Scribd
Upload
469 views56 pages

HTML & CSS Workshop

This document provides an introduction to HTML and CSS basics. It includes: - An overview of HTML defining the content structure and meaning of web pages using syntax like tags and attributes. - An explanation of CSS for describing the presentation of HTML documents using selectors, the cascade, specificity, and inheritance to style elements. - A discussion of the box model and dimensions in CSS layout. - A look at what's next including Flexbox, Grid, responsive design, and connections to JavaScript.

Uploaded by

Laura Peralta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
469 views56 pages

HTML & CSS Workshop

This document provides an introduction to HTML and CSS basics. It includes: - An overview of HTML defining the content structure and meaning of web pages using syntax like tags and attributes. - An explanation of CSS for describing the presentation of HTML documents using selectors, the cascade, specificity, and inheritance to style elements. - A discussion of the box model and dimensions in CSS layout. - A look at what's next including Flexbox, Grid, responsive design, and connections to JavaScript.

Uploaded by

Laura Peralta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

HTML & CSS

BASICS
BY: ANDRES GONZALEZ
Software Engineer Jr for BAQ/CALI/ECU and Bomberbot

Background
-Front End developer at Immigo (Final project - Holberton foundations)
-Holberton CH13
-Former UX Researcher at Torre
-Former Filmmaker and voiceover actor

Twitter: @andresgfranco
Linkedin: https://www.linkedin.com/in/andresgfranco/
Today's Guide
HTML
Brief context.
Web CSS
browser/client. Ways of using
Syntax. CSS.
DOM. Selectors.
Tags. Cascade,
Attributes. specificity, and
Semantic. inheritance.
Web's anatomy. Box model.
Dimensions.
What's next.
HTML
Tim
Berners-Lee
URL

SUGGESTION:
HTTP W3C - WORLD
WIDE WEB
CONSORTIUM
MOSAIC
IBM
Web NETSCAPE
INTERNET
browsers EXPLORER
SAFARI
GOOGLE
CHROME(V8)
FIREFOX
Standards

HTML5 CSS JAVASCRIPT


Static pages vs dynamic pages
You are here
HTML
HYPERTEXT MARKUP LANGUAGE

THE MOST BASIC WEB COMPONENT. IT


DEFINES THE MEANING AND CONTENT
STRUCTURE
Syntax-analogy

LET'S SEE SOME CODE:


-VS CODE
-HTML5 TEMPLATE GENERATOR
-LIVE SERVER
DOM
STRUCTURE AND SEMANTIC TO
WEBSITE CONTENT
Hierarchy

EACH ONE HAS DIFFERENT


TAGS
USES AND CHARACTERISTICS
Even their final look could be similar

MOST OF THEM SHOULD BE


CLOSED
Open tags, closing tags, and self-closing
tags.

ATTRIBUTES
Extra characteristics. Some of them are
shared others are exclusive.
TAG
ANATOMY
Semantic web
HYPERTEXT MARKUP LANGUAGE
Webpage
anatomy
CSS
CASCADING STYLE SHEETS

IS THE STYLES LANGUAGE USED TO DESCRIBE


THE HTML DOCUMENTS PRESENTATION
DIRECTLY
BY
ATTRIBUTE

3 ways of
adding BY
CREATING

CSS to
A STYLE
TAG

our HTML BY
IMPORTING
AN
EXTERNAL
CSS FILE
Skipped on purpose: last property
semicolon optional
but it is suggested to use it.
Selectors

GLOBAL
Selectors

CLASS
TAG
Selectors

ID ATTRIBUTE
Selectors

GROUP
Selectors

DESCENDANT
Selectors

DESCENDANT
Selectors

DIRECT
DESCENDANT
GENERAL SIBLING (~)

ADJACENT SIBLING (+)

PSEUDOCLASS (:)

PSEUDOELEMENT (::)
Some others
Cascade,
specificity, and
inheritance
TRIVIA TIME!
What color will be .title?
What would be the output color?
What would be the output color?
What would be the output color?
What would be the output color?
What would be the output color?
What would be the output color?
What would be the output color?
Inheritance
TRIVIA TIME!
What would be the output color?
What would be the output color?
Box model
Dimensions
Colors
FLEXBOX, AND GRID

What's next? CSSOM, RENDER


TREE, LAYOUT

RESPONSIVE DESIGN,
MOBILE FIRST, SASS,
SCSS

JAVASCRIPT,
WEBPACK, BABEL,
ECMASCRIPT,
FRAMEWORKS, ETC.
Thanks!

You might also like