HTML & CSS

Mastro

Μερικοί όροι

Front End

  • HTML, CSS,  JavaScript

Back End

  • PHP, Ruby, Python

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

Εργαλεία

  • Code Editor
  • Browser

Πώς ανοίγουν τα developer tools

 

  • Mac: Cmd + Option + i
  • Windows/Linux: Ctrl + Shift + i ή F12
  • Δεξί κλικ, inspect element

FILE STRUCTURE

 

DOCUMENT STRUCTURE

<!DOCTYPE html>

<html>

    <head>
      <title>Page Title</title>
    </head>

    <body>
    
      <h1>I am a heading!</h1>
    
      <p>I am a paragraph!</p>
    
    </body>

</html>

Tags

<tagname>Some Content</tagname>

SELF CLOSING TAGS

  • <img> images
  • <hr>    horizontal rule
<selfclosing /> ή <selfclosing>

area, base, br, col, embed, hr, img, input,
keygen, link, meta, param, source, track, wbr

ATTRIBUTES

  • class
  • id
  • src
  • href

META TAGS

<!DOCTYPE html>

<html>

    <head>
      <title>Page Title</title>
      <meta name="description" content="This is my webstie about website things.">
      <meta name="keywords" content="various, keywors, here">
      <meta name="author" content="George Mastro">
    </head>

    <body>
    
      <h1>I am a heading!</h1>
    
      <p>I am a paragraph!</p>
    
    </body>

</html>

Tags

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
...
<h6>Heading 6</h6>

<p>I am a paragraph!</p>

<em>I am emphasis & italic</em>
<strong>I am important and bold</strong>

<blockquote>I am a block quote</blockquote>

DIVISIONS AND SPANS

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
...
<h6>Heading 6</h6>

<div>
    <p>I am a paragraph!</p>
</div>

<div>Some text here <span>I am a special text!</span></div>

<strong>I am important and bold</strong>

<blockquote>I am a block quote</blockquote>

STRUCTURAL TAGS

   

  • Navigation:         <nav></nav>
  • Header:               <header></header>
  • Section:               <section></section>
  • Article:                 <article></article>
  • Aside:                   <aside></aside>
  • Footer:                 <footer></footer>
  • Ordered List:      <ol></ol>
  • Unordered List:  <ul></ul>
  • List Item:             <li></li>

LISTS

<h3>I am an unordered list</h3>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
    

<h3>I am an ordered list</h3>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

<h3>I am a description list</h3>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

LISTS

.
.
.
</head>
<body>
    <header>
        <nav>
            I am navigation!
        </nav>
    </header>
    
    <section>
        <h1>I am a section</h1>
        <article>
            <h2>I am an article</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
             et dolore magna aliqua. Ut enim ad minim veniam, quis no   
             aliquip ex ea commodo consequat. Duis aute irure dolor in
             dolore eu fugiat nulla pariatur. Excepteur sint occaecat     
             officia deserunt mollit anim id est laborum.</p>
        </article>
    </section>
    
    <aside>
        <h2>I am an aside</h2>
    </aside>
    
    <footer>
        <p>I am the footer.</p>
    </footer>
</body>

CSS

body {
    background: pink;
}

h1 {
    color: red;
}

div {
    background-color: blue;
    color: white;
    font-family: Helvetica;
    width: 500px;
}

CSS SYNTAX

selector {
    property: value;
}
p {
    color: red;
}
header {
    background-color: red;
}

SELECTORS

CLASS

.alert {
    color: red;
}
<p class="alert">Alert! Alert!</p>

ID

#navigation {
    background-color: black;
}
<nav id="navigation">I'm here to navigate you.</nav>

PROPERTIES

  • font-family
  • font-size
  • line-height
  • color
  • background-image
  • background-color

Ενσωμάτωση CSS στην HTML

  • External
  • Embeded
  • Inline

EXTERNAL

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

EMBEDDED


<head>
    <style>
        header {
            background-color: blue;
        }
    
        p {
            color: red;
        }
    </style>
</head>


<header>
    <nav>
        I am navigation!
    </nav>
</header>

<section>
    <h1>I am a section</h1>
    <article>
        <h2>I am an article</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         et dolore magna aliqua. Ut enim ad minim veniam, quis no   
         aliquip ex ea commodo consequat. Duis aute irure dolor in
         dolore eu fugiat nulla pariatur. Excepteur sint occaecat     
         officia deserunt mollit anim id est laborum.</p>
    </article>
</section>

<footer>
    <p>I am the footer.</p>
</footer>

INLINE

<p style="color: red;">I am a red paragraph!</p>

Cascade Order

Cascade Order

more at: https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

Cascade Order

THE BOX MODEL

  • margin
  • border
  • padding
  • width
  • height

DISPLAY

selector {
    display: inline;
}

selector-two {
    display: inline-block;
}

selector-three {
    display: block;
}

Flexbox

play here: https://flexbox.help/

more at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

and here: flexboxfroggy.com

learn here: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

Grid

play here: https://mozilladevelopers.github.io/playground/css-grid/

Study more advanced

http://htmldog.com/guides/css/advanced/

To Study

  • https://web.dev/learn/
  • htmldog.com (HTML-CSS)
  • CodeSchool (HTML, CSS)
  • W3Schools (HTML-CSS)
  • https://scrimba.com/learn/introtocss
  • https://youtu.be/-33oY1V14IQ (Figma to HTML)

g.mastro@netstudio.gr

n.charalampidis@netstudio.gr

Task

Turn PSD to HTML

Ask anything!

HTML & CSS

By George Mastro

Made with Slides.com

HTML & CSS

Code Arena | Day 1 | Part 1

  • 1,135

More from George Mastro