Scribd
Upload
13 views

HTML & CSS basics

Uploaded by

Lucas Lanna
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

HTML & CSS basics

Uploaded by

Lucas Lanna
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 171

_w:27770:1717694393

HTML & CSS BASICS


FRONT-END MODULE
Day #1 (today) 👉 Simple HTML / CSS (fonts, colors, box
model)
Day #2 👉 Building components (buttons, forms, tabs, etc...)
Day #3 👉 Bootstrap & building layouts
TODAY'S OBJECTIVES
Learn HTML / CSS basics
Code your profile page like this
Put it online with GitHub Pages
LECTURE BOILERPLATE
https://github.com/lewagon/html-demo
mkdir -p ~/code/lewagon/lectures && cd $_
gh repo clone lewagon/html-demo
cd html-demo
rm -rf .git
code .
FRONT-END LANGUAGES
The languages your browser speaks
It's a markup language (== structure)
HTML
Your page has different contents
HTML
HTML tags help you identify content
HTML
Hence, browser default styles will apply
HTML
And you will also be able to apply your own style rules if you
want
HTML SKELETON
<!DOCTYPE html>

<!-- end of file -->


HTML SKELETON
<!DOCTYPE html>
<html>

</html>
<!-- end of file -->
HTML SKELETON
<!DOCTYPE html>
<html>
<head>

<!-- Page's intelligence = meta tags -->

</head>
<body>

<!-- Page's content = displayed on the page -->

</body>
</html>
<!-- end of file -->
HTML SKELETON - HEAD
<!DOCTYPE html>
<html>
<head>
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer t
<meta charset="utf-8">
</head>
<body>

</body>
</html>
<!-- end of file -->
HTML SKELETON - HEAD & GOOGLE
<head>
<!-- Google result text-->
<title>Coding Bootcamp Le Wagon | Europe's Best Coding Bootcamp</
<!-- Google result description-->
<meta name="description" content="Le Wagon is Europe’s best codin
</head>
HTML SKELETON - HEAD & FACEBOOK
<head>
<meta property="og:title" content="Le Wagon - The French innovati
<meta property="og:image" content="facebook-card.jpg">
<meta property="og:description" content="Le Wagon is the best Fre
<meta property="og:site_name" content="Le Wagon"/>
</head>
HTML SKELETON - HEAD & TWITTER
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Lewagonparis">
<meta name="twitter:title" content="Le Wagon - The French innovat
<meta name="twitter:description" content="Le Wagon is the best Fr
<meta name="twitter:creator" content="@Lewagonparis">
<meta name="twitter:image:src" content="http://twitter-card.jpg">
</head>
HTML SKELETON - BODY
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<h1>Hello buddies!</h1>
</body>
</html>
<!-- end of file -->
BASIC SYNTAX
EXAMPLE
<a href="https://www.lewagon.com" target="_blank">
Le Wagon
</a>

Result: Le Wagon

QUIZZ
What is the name of the tag?
What is the content?
What are the 2 attributes (name and value)?
TITLES
<h1>[...]</h1>
<h2>[...]</h2>
<h3>[...]</h3>
<h4>[...]</h4>
<h5>[...]</h5>
<h6>[...]</h6>
PARAGRAPHS
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Veritatis laboriosam mollitia autem at ab omnis iure quis
asperiores inventore eos nam aut iusto officiis deserunt
nihil, sequi tempore impedit quae?
</p>
EMPHASIZE
<p>
You can emphasize <em>some words</em>,
and even <strong>more if needed</strong>
</p>
LISTS
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Butter</li>
</ul>

<h2>World Cup 2022</h2>


<ol>
<li>Argentina</li>
<li>France</li>
<li>Croatia</li>
<li>Morocco</li>
</ol>
IMAGES
<img src="https://raw.githubusercontent.com/lewagon/fullstack-image
FORMS
<form>
<input type="email">
<input type="password">
<input type="submit" value="Log in">
</form>
MUCH MORE
codeguide.co
MDN reference
LIVE-CODE
Let's add some HTML content to our profile page!
WEB WITHOUT CSS ?
Cut the <head> on medium.com with Chrome dev tool.
This is how a website looks like without CSS 😬
LINKING STYLESHEET TO HTML PAGE
CSS SYNTAX
CSS VOCABULARY
EXAMPLE
COLORS
color: #FF530D;
color: rgb(255, 83, 13);
color: rgba(255, 83, 13, 1.0);

x
COLORS - TIPS
body {
color: rgb(10, 10, 10);
}

RGB stands for Red Green Blue


each value is between 0 and 255
for same values of R, G and B, you are on the grey scale
TEXT VS BACKGROUND
BACKGROUND IMAGE
FONT - FAMILY
FONTS - SIZE AND SPACING
FONTS - DECORATION
FONTS - ALIGNMENT
FONTS - WEIGHT
FONTS - GOOGLE FONTS
Make your shopping on Google fonts.
Open-Sans 👉 <body>
Raleway, Montserrat, Varela Round, etc... 👉 <h1>, <h2>,
<h3>
FONTS - FONT AWESOME
Font Awesome is a font of icons, really useful!
<!-- cdn link to paste in your <head> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v

You can now use any of the free Font Awesome icons 🎉
SMALL TIPS
Use the inspector, then copy the css in your text editor.
LIVE-CODE
Let's design our fonts and colors using Google fonts.
DIV AND BOX MODEL
REAL LIFE...
... IS MADE OF <DIV>
BOX MODEL
BOX MODEL - BORDER
BORDERS
div {
border: 1px solid red;
}
/* or */
div {
border-top: 1px solid red;
border-right: 2px dotted black;
border-bottom: 1px dashed green;
border-left: 2px dotted black;
}
BORDER RADIUS
BORDER RADIUS
BOX SHADOW
UNITS
/* Absolute */
p {
width: 50px;
}

/* Relative to parent */
p {
width: 50%;
}

/* Relative to font size */


p {
width: 2em;
}
DIV DESIGN TIPS
background: white; /* White background */
padding: 30px; /* Internal space */
border-radius: 4px; /* Small radius */
box-shadow: 0 10px 30px rgba(0,0,0,.1); /* Light shadow */

RESULT:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos voluptatibus, quis iure vel
aliquam veritatis architecto fugiat necessitatibus? Quidem error explicabo nemo maiores
voluptatem odio delectus ad, esse reprehenderit animi.
DIV CENTERING TECHNIQUE
width: 300px; /* Set the width */
margin: 0 auto; /* Set automatic margins on right/left */

RESULT:

Lorem ipsum dolor sit amet, consectetur


adipisicing elit. Eos voluptatibus, quis
iure vel aliquam veritatis architecto fugiat
necessitatibus? Quidem error explicabo
nemo maiores voluptatem odio delectus
ad, esse reprehenderit animi.
LIVE-CODE
Let's add some div in our HTML and play with the box model
with Chrome Dev tool.
ID AND CLASS
HOW DO YOU STYLE ONLY THE LOGO?
NAME YOUR TAG WITH ID
HOW DO YOU STYLE YOUR STAFF PICTURES?
NAME YOUR TAGS WITH CLASS
ID OR CLASS?
COMBINE (1)
COMBINE (2)
COMBINE (3)
CLASS NAMING - QUIZZ
Which one is more explicit (tells what it does)?

.btn-red or .btn-signup?
.background-blue or .background-home?
.img-user or .img-circle?

Change your mindset => think graphical


CLASS NAMING - CONVENTION
.component-shape
/* Examples*/
.text-center
.text-justify
.btn-red
.btn-green
.btn-big
.list-inline
.form-horizontal
.img-rounded
.img-circle
SELECTORS SUMMARY
ELEMENT SELECTOR
<!-- index.html -->
[...]
<body>
<h1>Hello World</h1>
</body>

combined with
/* style.css */
h1 {
color: red;
font-weight: bold;
}

makes the h1 elements red and bold.


CLASS SELECTOR
<!-- index.html -->
[...]
<body>
<p>This paragraph is not justified</p>
<p class="text-justify">This one is</p>
<p class="text-justify">This one also</p>
</body>

combined with
/* style.css */
.text-justify {
text-align: justify;
}

will make only the second and third paragraphs justified.


ID SELECTOR
<!-- index.html -->
<body>
<div id="banner">
<h1>Le Wagon</h1>
<p>We bring tech skills to creative people</p>
</div>
</body>

combined with
/* style.css */
#banner {
background-image: url("example.jpg");
background-size: cover;
}
will put an image background on the unique div with
DESCENDANT SELECTORS
<!-- index.html -->
<body>
<div id="banner">
<h1>Le Wagon</h1>
<p>We bring tech skills to creative people</p>
</div>
</body>

combined with
/* style.css */
#banner h1 {
color: white;
}

h1 children of the element id="banner" will be white.


DIRECT CHILDREN
<!-- index.html -->
<body>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>

combined with
/* style.css */
#navigation > li > a {
color: blue;
}
a direct children of li direct children of id="navigation"
GROUPING
/* style.css */
h1, h2, h3 {
font-weight: bold;
}

is a shortcut syntax for


/* style.css */
h1 {
font-weight: bold;
}
h2 {
font-weight: bold;
}
[...]
PSEUDO CLASSES
/* style.css */
a {
color: red;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

will make links underlined when the mouse hovers over them.

See other pseudo classes


QUIZZ #1
<!-- index.html -->
<body>
<p class="text-red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</body>

combined with
/* style.css */
p {
color: black;
}
.text-red {
color: red;
}
QUIZZ #2
<!-- index.html -->
<body>
<p id="bio" class="text-red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</body>

combined with
/* style.css */
.text-red {
color: red;
}
#bio {
color: green;
}
SPECIFICITY OF SELECTORS
p { /* least specific */
color: black;
}
.text-red { /* ↓ */
color: red;
}
#bio { /* most specific */
color: green;
}

Check out the specificity calculator


LIVE-CODE
Let's finish our live-code and get this final result!
Tonight, we will put our profile online using GitHub Pages.
LET'S BUILD YOUR PROFILE!

You might also like