This is a WIP translation of my book Aprenda HTML & CSS (in Portuguese).
It was written in 2016 and contains everything a complete beginner needs to learn HTML & CSS and create an entire landing page by the end of the book.
You may ask yourself: "How can a book from 2016 help me succeed in 2021?". And you may be surprised, but back then that book already had the bleeding edge properties from both technologies, the only thing that I'm going to add, that wasn't present back then, are chapters talking about CSS Grid.
This book was paid and more than 700 people have bought it, but since 2019 I decided to make it free, so enjoy.
This book is divided into very small chapters, around 1 - 1 1/2 pages. Things are not as complicated as you may be thinking and dividing it into digestible pieces, you can always come back to exact place you need and also keep progressing even if you don't have much time.
-
Part 1: HTML
- 1 - Writing HTML
- 2 - Presenting HTML
- 3 - Hello world!
- 4 - Basic structure
- 5 - Paragraphs
- 6 - Headings
- 7 - Images
- 8 - Image sizes and accessibility
- 9 - Lists
- 10 - Links
- 11 - Tables
- 12 - Advanced tables
- 13 - Forms
- 14 - Forms: short text input
- 15 - Forms: long text input
- 16 - Forms: radio buttons
- 17 - Forms: checkboxes
- 18 - Forms: select
- 19 - Forms: sending
- 20 - Forms: groups
- 21 - Indentation
- 22 - Comments
- 23 - Sections
- 24 - Sections: header and navigation
- 25 - Sections: main and secondary
- 26 - Sections: articles and generic sections
- 27 - Sections: footer and divs
- 28 - ID
- 29 - Internal links
- 30 - Audio and video
- 31 - Iframes
- 32 - Blocks and lines
- 33 - More text
- 34 - Meta tags
- 35 - Validating HTML
-
Part 2: CSS
- 36 - Writing CSS
- 37 - Writing CSS: inside HTML with style
- 38 - Writing CSS: inside HTML inline
- 39 - Writing CSS: in an external file
- 40 - Rules structure
- 41 - Classes
- 42 - Type selectors
- 43 - Class selectors
- 44 - ID selectors
- 45 - Cascade
- 46 - Colors
- 47 - Inheritance
- 48 - Measures
- 49 - Boxes (box-model)
- 50 - Padding
- 51 - Border
- 52 - Margin
- 53 - Text
- 54 - Fonts
- 55 - Lists
- 56 - Tables
- 57 - Background images
- 58 - Positioning
- 59 - Order (z-index)
- 60 - Attribute selectores
- 61 - Combining selectors
- 62 - Specificity
- 63 - Pseudo classes
- 64 - Accessibility
- 65 - Media queries
- 66 - Breakpoints
- 67 - Viewport
- 68 - Validating CSS
- 69 - Flexbox
- 70 - Flexbox: lines and columns
- 71 - Flexbox: breaks
- 72 - Flexbox: justify content
- 73 - Flexbox: align items
- 74 - Flexbox: align content
- 75 - Flexbox: items size
- 76 - NEW! Grid chapters will be added here!
-
Parte 3: BONUS
- 76 - Tools
- 77 - Project planning
- 78 - Files structure
- 79 - Standard HTML
- 80 - Developing HTML
- 81 - Developing CSS
- 82 - End
HTML (HyperText Markup Language) is a language that instructs the browser (Firefox, Chrome, Safari, Edge, Opera, etc.) how to assemble a page. These instructions basically tell the browser where each part of the page should be placed, be it a paragraph, an image or a header.
Even though we usually see pages around the internet composed with a lot of color, fonts and formats, HTML by itself is only responsible for their structure and content (texts, images, videos, links, etc.), while CSS (more details on it in the second part) is responsible for the presentation (instructions on how to present each content, like colors, sizes and disposition).
So that the browser can correctly interpret what we want displayed for the visitors of our pages, we need to write specific instructions in HTML. These instructions are made of simple text e can be written in any text editor like Notepad (for Windows) or TextEdit (for Mac), that are already part of operating systems or an appropriate code editor like Visual Studio Code if you want something installed on your machine or online editors like CodeSandbox (there are a ton more and you can find them searching for "code editors").
Each HTML document creates a page in the browser. That is, if we have twenty documents, we will have twenty pages in our site.
HTML documents are identified by their own extension. The filename ends with .html, like in about.html or contact.html.
During the course of this book, we will be restricted to the following characters when naming an HTML document (but there are other possibilities):
- just lowercase characters;
- no spaces;
- characters from 0 to 9, from a to z and
-(hifen).
[WIP: Exercises for this chapter]