Skip to main content
HTML, CSS and Layout
My Courses
College Courses
Professional Courses
My Courses
Chemistry
General Chemistry
Organic Chemistry
Analytical Chemistry
GOB Chemistry
Biochemistry
Intro to Chemistry
Biology
General Biology
Microbiology
Anatomy & Physiology
Genetics
Cell Biology
Math
College Algebra
Trigonometry
Precalculus
Physics
Physics
Business
Microeconomics
Macroeconomics
Financial Accounting
Social Sciences
Psychology
Programming
Introduction to Python
Microsoft Power BI
Data Analysis - Excel
Introduction to Blockchain
HTML, CSS & Layout
Introduction to JavaScript
R Programming
Product & Marketing
Agile & Product Management
Digital Marketing
Project Management
AI in Marketing
Channels Home
Learn
Bookmarks
Table of contents
Skip to main content
Introduction
Worksheet
Learn Enough HTML, CSS and Layout to Be Dangerous: Introduction
1: Basic HTML
Worksheet
1.1 Introduction
1.2 HTML tags
1.3 Starting the project
1.4 The first tag
1.5 An HTML skeleton
2: Filling in the Index Page
Worksheet
Topics
2.1 Headings
2.2 Text formatting
2.3 Links
2.4 Adding images
3: More Pages, More Tags
Worksheet
Topics
3.1 An HTML page about HTML
3.2 Tables
3.3 Divs and spans
3.4 Lists
3.5 A navigation menu
4: Inline Styling and CSS
Worksheet
Topics
4.1 Text styling
4.2 Floats
4.3 Applying a margin
4.4 More margin tricks
4.5 Box styling
4.6 Navigation styling
4.7 A taste of CSS
4.8 Conclusion
5: Introduction to CSS
Worksheet
Topics
5.1 You’re a front-end developer
5.2 CSS overview and history
5.3 Sample site setup
5.4 Start stylin’
5.5 CSS selectors
6: The Style of Style
Worksheet
Topics
6.1 Naming things
6.2 When and why
6.3 Priority and specificity
6.4 How to be a good styling citizen
7: CSS Values: Color and Sizing
Worksheet
Topics
7.2 Introduction to sizing
7.3 Pixels (and their less-used cousin the point)
7.4 Percentages
7.5 em
7.6 rem isn’t just for dreaming
7.7 Vh, vw: The New Kids on the Block
7.8 Pleasing fonts
8: The Box Model
Worksheet
Topics
8.1 Inline vs block
8.2 Margins, padding, and borders
8.3 Floats
8.4 A little more about the overflow style
8.5 Inline block
8.6 Margins for boxes
8.7 Padding … not just for chairs
8.8 Fun with borders
9: Laying It All Out
Worksheet
Topics
9.1 Layout basics
9.2 Jekyll
9.3 Layouts, includes and pages (oh my!)
9.4 The layout file
9.5 CSS file and reset
9.6 Include intro: Head and header
9.7 Advanced selectors
9.8 Positioning
9.9 Fixed header
9.10 A footer and includes in includes
10: Page Template and Frontmatter
Worksheet
Topics
10.1 Template content
10.2 There’s no place like home
10.3 More advanced selectors
10.4 Other pages, other folders
11: Specialty Page Layouts with Flexbox
Worksheet
Topics
11.1 Having content fill a container
11.2 Vertical flex centering
11.3 Flexbox style options and shorthand
11.4 Three-column page layout
11.5 A gallery stub
12: Adding a Blog
Worksheet
Topics
12.1 Adding blog posts
12.2 Blog index content loop
12.3 A blog post page
13: Mobile Media Queries
Worksheet
Topics
13.1 Getting started with mobile designs
13.2 Mobile adaptation
13.3 Mobile viewpoint
13.4 Dropdown menu
13.5 Mobile dropdown menu
14: Adding More Little Touches
Worksheet
Topics
14.1 Custom fonts
14.2 Favicons
14.3 Custom title and meta description
14.4 Conclusion and further reading
Summary
Worksheet
Learn Enough HTML, CSS and Layout to Be Dangerous: Summary
13: Mobile Media Queries
Topics
13: Mobile Media Queries
Topics
Next Topic: 13.1 Getting started with mobile designs