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.
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
Do Well. Do Good.
Authors have earned$10,623,269writing, 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
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
Jetpack Compose internals
Jorge CastilloJetpack Compose is the future of Android UI. Master how it works internally and become a more efficient developer with it. You'll also find it valuable if you are not an Android dev. This book provides all the details to understand how the Compose compiler & runtime work, and how to create a client library using them.
- #2
Functional Programming Made Easier
Charles ScalfaniA Functional Programming book from beginner to advanced without skipping a single step along the way.
In my 40 years of programming, I've felt that programming books always let me down, especially Functional Programming books. So, I wrote the book I wish I had 5 years ago.
Functional Programming will never be easy, but it can be easier.
- #3
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.
- #4
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.
- #5
A Practical Guide to Testing in DevOps Japanese Edition
Katrina Clokie, Yuya Kazama, and Masanori KawaradaKatrina Clokieによる2017年8月発行の書籍『A Practical Guide to Testing in DevOps』の日本語翻訳版です。実装前や実装中でのテストだけでなく、本番環境でのテストについて、数多くの事例を用いて語られています。
- #6
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.
- #7
Continuous Delivery Pipelines
Dave FarleyThis practical handbook provides a step-by-step guide for you to get the best continuous delivery pipeline for your software.
- #8
Practical FP in Scala: A hands-on approach
Gabriel VolpeA practical book aimed for those familiar with functional programming in Scala who are yet not confident about architecting an application from scratch.
Together, we will develop a purely functional application using the best libraries in the Cats ecosystem, while learning about design patterns and best practices.
- #9
Algebra-Driven Design
Sandy MaguireA how-to field guide on building leak-free abstractions and algebraically designing real-world applications.
- #10
The Python Journeyman
Robert Smallshire, Austin Bingham, and Sixty NorthOne of Python's strengths is that it's approachable and easy to learn, so that almost anyone can learn to write a basic Python program. The Python Journeyman will take you beyond that, beyond the basics. We will lead you through some of the deeper aspects of Python, and give you the skills you need to write great Python programs.
Top Bundles
- #1
CCIE Service Provider Ultimate Study Bundle
2 Books
Piotr Jablonski, Lukasz Bromirski, and Nick Russo have joined forces to deliver the only CCIE Service Provider training resource you'll ever need. This bundle contains a detailed and challenging collection of workbook labs, plus an extensively detailed technical reference guide. All of us have earned the CCIE Service Provider certification... - #2
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... - #4
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. - #6
9 Books-Bundle: Shut Up and Code!
9 Books
"Shut up and code." Laughter in the audience. The hacker had just plugged in his notebook and started sharing his screen to present his super-smart Python script. "Shut up and code" The letters written in a white literal coding font on black background was the hackers' home screen background mantra. At the time, I was a first-year computer... - #8
The Python Craftsman
3 Books
The Python Craftsman series comprises The Python Apprentice, The Python Journeyman, and The Python Master. The first book is primarily suitable for for programmers with some experience of programming in another language. If you don't have any experience with programming this book may be a bit daunting. You'll be learning not just a programming...
