Master HTML & CSS
Master HTML & CSS
Learn HTML & CSS the right way, from basics to advanced
About the Book
This book will teach you two languages that the browsers are using to render a Web Page. HyperText Markup Language (HTML), which is used to structure the Web Page with visual elements, and CSS (Cascading StyleSheets), which is used to tell things about the look and feel of the content, like the font size and the color. It starts from the basics and takes you to an advanced level.
About the Author
Table of Contents
- Credits To Photo on Cover Page
- About and Copyright Notice
-
HTML & CSS
-
Chapter 1 - Introduction
- Summary
- Learning Goals
- What is HTML
- What is CSS
- Tasks and Quizzes
-
Chapter 2 - Setup Development Environment
- Summary
- Learning Goals
- Setup your development environment
- We are using Linux
- Linux Users - Ideal Environment
- Windows Users - Let’s get a Linux
- HTML & CSS Editor
- Tasks
-
Chapter 3 - Hello World!
- Summary
- Learning Goals
- Hello World Page
- Write the HTML code
- View your HTML page on your browser
- Tasks
-
Chapter 4 - Minimum HTML Document
- Summary
- Learning Goals
- Minimum HTML Document
-
One
htmltag -
One
headand onebodylike humans -
Let’s fill in the
<head> - The title of our page
-
Let’s fill in the
<body> - Tasks and Quizzes
-
Chapter 5 - Heading Tags
- Summary
- Learning Goals
- Heading Tags
- Tasks
-
Chapter 6 - About White Space
- Summary
- Learning Goals
- About White Space
-
Line break HTML tag
<br> - White spaces between words
- Tasks
-
Chapter 7 - HTML Entities
- Summary
- Learning Goals
- HTML Entities
- Some Common Ones
- HTML reserved characters
- Currencies
- Special Alphabet Characters
- Other Symbols
- Full References
- Tasks & Quizzes
-
Chapter 8 - Paragraphs, Horizontal Lines And Comments
- Summary
- Learning Goals
- Paragraphs, Horizontal Lines and Comments
- Paragraphs
- Horizontal Lines
- Comments
- Tasks
-
Chapter 9 - HTML Lists
- Summary
- Learning Goals
- Lists
- Unordered Lists
- Ordered Lists
- Nested Lists
- Tasks
-
Chapter 10 - HTML Tables
- Summary
- Learning Goals
- Tables
- Starting and closing tags
- Rows of the table
- Columns of the table
- Table Head and Table Body
- Head Cells
- Cell spacing
- Cell padding
- Column Span
- Aligning
- Row span
- Styling tables
- Tables and Emails
- Tasks & Quizzes
- Quiz:
-
Chapter 11 - First Simple CSS Rules
- Summary
- Learning Goals
- First Simple CSS Rules
- Style Rules and CSS Language
- Default style values
-
Set the color of the text -
color -
Set the text size -
font-size -
Set border -
border -
Set background / fill color -
background-color -
The
<style>tag - The reference to the CSS file
- Tasks
-
Chapter 12 - First Encounter With CSS Selectors
- Summary
- Learning Goals
- First Encounter with CSS Selectors
- Selecting by the HTML tag name
- Specificity - Containing-Contained Relationships
- Multiple selectors
- Tasks
-
Chapter 13 - More Advanced CSS Selectors
- Summary
- Learning Goals
- More Advanced CSS Selectors
-
idattribute - CSS Selecting elements by id
-
The
classattribute - Combining class selection with tag name selection
- Multiple classes on same element
- Tasks
-
Chapter 14 - Talk About Color
- Summary
- Learning Goals
- Let’s Talk about Color
- Text Color and Background Color
- Specifying the color value
- RGB Color With Transparency
- Tasks
-
Chapter 15 - Formatting Parts Of Text
- Summary
- Learning Goals
- Formatting parts of text
-
spantag - HTML formatting tags
- Closing note
- Tasks
-
Chapter 16 - CSS Box Model
- Summary
- Learning Goals
- CSS Box Model
- Boundaries of Body
- Visible Border Box
- Padding Area
- Margin Area
- CSS Box Model again
- Use Chrome Developer Tools
- Width and Box Sizing
- Line Height
- Inherited and Non-Inherited values
- Applying Rule To All Elements
-
Why
bodybackground-color covers the whole canvas? - Tasks
-
Chapter 17 - Block And Inline Elements
- Summary
- Learning Goals
- Block and Inline HTML Elements
- Block HTML Elements
- Inline HTML Elements
- Default Block Elements
- Default Inline Elements
- Setting width and height for inline elements
- Closing Note
- Tasks
-
Chapter 18 - Dividing Page To Sections Using Divs
- Summary
- Learning Goals
-
Dividing Page to Sections Using
<div> - Step 1: Empty Page
- Step 2: Let’s set the basic rules
- Step 3: Dividing our page
- Step 4 - Left Column
- Step 5 - Middle Column
- Step 6 - Right Column
-
Step 7 - Use
floatto position the elements. - Step 8 - Footer
-
Step 9 - Fixing footer problem with
clear - Final Styling Touches
- Tasks
-
Chapter 19 - HTML Links
- Summary
- Learning Goals
- HTML Links
-
<a>tag -
http://orhttps:// - Anything a link
- Styling the Anchor Links
- Style links as buttons
- Side Note - CSS comments
- Links within the same page - Bookmarks
- Links to Other Pages within Same Site
- Styling the links on navigation bar
- Tasks
-
Chapter 20 - Deploying Our Work
- Summary
- Learning Goals
- Deploying Our Work
- Static Sites
- Sites are hosted on Servers
- Companies Offering Hosting
- Netlify - Create an Account
- Deploy our first Site
- Deploying a Site with Stylesheets/CSS
- Deploying to Netlify using the command line
- Netlify Optimizes our CSS
- Disable Optimization of your CSS content
- Tasks
-
Chapter 21 - Images
- Summary
- Learning Goals
- Images
- Image Files
-
<img>tag -
The
srcattribute -
The
altand thetitleattributes - Image size
- Images as Links
- Text Around Images
- Images and line height
- Using images stored on our site
- Tasks
-
Chapter 22 - Image Backgrounds
- Summary
- Learning Goals
- Image Backgrounds
-
Image as a
bodybackground - Let’s Be More Accurate
- How To Stop Propagation
- Body Without Content is Not Displayed
- Adding Content to Body
-
Make
bodyHigh Enough - Remove Margin
- Where is The Happy Dogs Text?
- One Image to Cover Whole Page
- Center Image
- Cover The Whole Body
- Adding Text On the Page
- Make the Image Fixed
- Use A Big Image
- Background Images on Parts of Page
- Bottom Margin Will Not Work
- A Blank Div Will Do
- Why Bottom Margin Didn’t Work?
- Move Background to HTML instead
- DRYing our Code
- Background Size
- Background Color
-
backgroundshorthand property - Tasks
-
Chapter 23 - Element Positioning
- Summary
- Learning Goals
- Element Positioning
- Inline Elements
- Block Elements
- Float Property
- Clear Property
- Positioning Relative to Browser Window
- Positioning Element Relative To Their Normal Position
- Positioning Elements Relative To Other Element
- Positioned Elements
-
z-index - Tasks
-
Chapter 24 - CSS Units
- Summary
- Learning Goals
- CSS Units
- Everything is pixels
- Absolute Units
- Default Font Size
- Default Font Size and Absolute Units
- Relative Units
- Tasks
-
Chapter 25 - Collapsing Margins
- Summary
- Learning Goals
- Collapsing Margins
- What is collapsing margins?
- Parents and Children
- How can we preserve both parent and children margins?
- How can we eliminate the collapsing vertical margins phenomenon?
- Why do the vertical margins collapse?
- Closing Suggestion
- Tasks
-
Chapter 26 - Fonts and Typeface
- Summary
- Learning Goals
- Fonts and Typeface
- Font Families
- General Families
- Specifying Font Family with CSS
- Default Font Families
- Safe CSS Font Stacks
- Make Sure Browser Is Using the Font We Want
- Other Properties of the Fonts
- Tasks
-
Chapter 27 - HTML Forms
- Summary
- Learning Goals
- HTML Forms
-
inputoftype="text" -
label -
select -
inputoftype=submit -
form - Input elements’ ID
-
autofocus -
labelforattribute -
required - Sign Up Form
-
inputwithtypeemail -
inputwithtypepassword -
inputwithtypecheckbox - Multiple Checkboxes
- Multiple Select Box
-
inputoftyperadio -
checkedattribute -
textarea -
placeholderattribute -
title -
autocompleteattribute -
inputwithtypenumber -
minandmaxattributes -
stepattribute -
inputwithtyperange -
valueattribute - Grouping Selection Options
-
inputoftypecolor -
inputoftypedate -
inputoftypefile - Grouping Form Fields
- Tasks
-
Chapter 28 - Advanced CSS Selectors
- Summary
- Learning Goals
- Pseudo-classes
- Pseudo-elements
- Other CSS Selectors
- Tasks
-
Chapter 29 - HTML5
- Summary
- Learning Goals
- HTML5
- Semantic Elements
- HTML5 Graphics
- HTML5 Multimedia
- Tasks
-
Chapter 30 - Some Other HTML Elements
- Summary
- Learning Goals
-
iframe -
blockquote -
codeandpre - Tasks
-
Chapter 31 - Mobile Friendly Web Pages
- Summary
- Learning Goals
- Introduction
- The Viewport
- Media Queries
- A more complex example page with responsive design
- Loading CSS files with media query
- Responsive Images
- Responsive Videos
- Responsive Frameworks
- Tasks
-
Chapter 1 - Introduction
Causes Supported
Code Club
https://www.codeclub.org.ukA nationwide network of volunteer-led after school coding clubs for children aged 9-11.
Authors have earned$10,236,634writing, publishing and selling on Leanpub, earning 80% royalties while saving up to 25 million pounds of CO2 and up to 46,000 trees.
Learn more about writing on Leanpub
The Leanpub 45-day 100% Happiness Guarantee
Within 45 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
See full terms
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers), EPUB (for phones and tablets) and MOBI (for Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
Top Books
- #1
500 QUIZ MMG COMMENTATI
ALS Medicina Generale500 Quiz degli ULTIMI Concorsi di Medicina Generale (2014/2016/2017/2018/2019)
Riassunti e suddivisi per area con Griglia risposte vuota e Griglia risposte esatte Ministeriale
Commentati con link alla fonte per approfondimento e ausilio allo studio
- #2
C++20
Rainer GrimmC++20 is the next big C++ standard after C++11. As C++11 did it, C++20 changes the way we program modern C++. This change is, in particular, due to the big four of C++20: ranges, coroutines, concepts, and modules.
- #3
Atomic Kotlin
Bruce Eckel and Svetlana IsakovaFor both beginning and experienced programmers! From the author of the multi-award-winning Thinking in C++ and Thinking in Java together with a member of the Kotlin language team comes a book that breaks the concepts into small, easy-to-digest "atoms," along with exercises supported by hints and solutions directly inside IntelliJ IDEA!
- #4
Functional Design and Architecture
Alexander GraninSoftware Design in Functional Programming, Design Patterns and Practices, Methodologies and Application Architectures. How to build real software in Haskell with less efforts and low risks. The first complete source of knowledge.
- #5
C++ Best Practices
Jason TurnerLevel up your C++, get the tools working for you, eliminate common problems, and move on to more exciting things!
- #6
Algebra-Driven Design
Sandy MaguireA how-to field guide on building leak-free abstractions and algebraically designing real-world applications.
- #7
Ansible for DevOps
Jeff GeerlingAnsible is a simple, but powerful, server and configuration management tool. Learn to use Ansible effectively, whether you manage one server—or thousands.
- #8
Thinking with Types
Sandy MaguireThis book aims to be the comprehensive manual for type-level programming. It's about getting you from here to there---from a competent Haskell programmer to one who convinces the compiler to do their work for them.
- #9
Advanced Web Application Architecture
Matthias NobackThe missing manual for making your web applications future-proof
- #10
Stratospheric
Tom Hombergs, Björn Wilmsmann, and Philip RiecksFrom Zero to Production with Spring Boot and AWS. All you need to know to get a Spring Boot application into production with AWS. No previous AWS knowledge required.
Top Bundles
- #1
Software Architecture for Developers: Volumes 1 & 2 - Technical leadership and communication
2 Books
"Software Architecture for Developers" is a practical and pragmatic guide to modern, lightweight software architecture, specifically aimed at developers. You'll learn:The essence of software architecture.Why the software architecture role should include coding, coaching and collaboration.The things that you really need to think about before... - #3
Cloud Architect: Transform Technology and Organization
2 Books
Architects don't just recite product names and features. They understand the options, decisions, and trade-offs behind them. They earn credibility and maintain authenticity by connecting the penthouse with the engine room. Get two essential books that redefine the role of the software and IT architect at one low price:37 Things One Architect... - #5
Linux Administration Complet
4 Books
Ce lot comprend les quatre volumes du Guide Linux Administration :Linux Administration, Volume 1, Administration fondamentale : Guide pratique de préparation aux examens de certification LPIC 1, Linux Essentials, RHCSA et LFCS. Administration fondamentale. Introduction à Linux. Le Shell. Traitement du texte. Arborescence de fichiers. Sécurité... - #8
Development and Deployment of Multiplayer Online Games, Part ARCH. Architecture (Vol. I-III)
3 Books
What's the Big Idea? The idea behind this book is to summarize the body of knowledge that already exists on multiplayer games but is not available in one single place.And quite a fewof the issues discussed within this series (planned as three nine volumes ~300 pages each), while known in the industry, have not been published at all (except for... - #9
Mastering Containers
2 Books
Docker and Kubernetes are taking the world by storm! These books will get you up-to-speed fast! Docker Deep Dive is over 400 pages long, and covers all objectives on the Docker Certified Associate exam.The Kubernetes Book includes everything you need to get up and running with Kubernetes! - #10
Retromat eBook Bundle for Agile Retrospectives
2 Books
If you facilitate retrospectives this bundle is for you: "Plans for Retrospectives" helps beginners learn the lay of the land with tried-and-true plans. Once you know your way around, "Run great agile retrospectives" contains all 135+ activities in Retromat for you to mix and match.
