Skip to main content
HTML, CSS and Layout
My Courses
College Courses
Professional Channels
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
4m
Worksheet
Learn Enough HTML, CSS and Layout to Be Dangerous: Introduction
4m
1: Basic HTML
25m
Worksheet
1.1 Introduction
0m
1.2 HTML tags
3m
1.3 Starting the project
4m
1.4 The first tag
5m
1.5 An HTML skeleton
10m
2: Filling in the Index Page
31m
Worksheet
Topics
1m
2.1 Headings
3m
2.2 Text formatting
4m
2.3 Links
9m
2.4 Adding images
12m
3: More Pages, More Tags
49m
Worksheet
Topics
1m
3.1 An HTML page about HTML
4m
3.2 Tables
16m
3.3 Divs and spans
15m
3.4 Lists
5m
3.5 A navigation menu
6m
4: Inline Styling and CSS
34m
Worksheet
Topics
1m
4.1 Text styling
7m
4.2 Floats
1m
4.3 Applying a margin
2m
4.4 More margin tricks
4m
4.5 Box styling
4m
4.6 Navigation styling
2m
4.7 A taste of CSS
7m
4.8 Conclusion
1m
5: Introduction to CSS
48m
Worksheet
Topics
1m
5.1 You’re a front-end developer
2m
5.2 CSS overview and history
9m
5.3 Sample site setup
9m
5.4 Start stylin’
12m
5.5 CSS selectors
12m
6: The Style of Style
33m
Worksheet
Topics
1m
6.1 Naming things
5m
6.2 When and why
4m
6.3 Priority and specificity
6m
6.4 How to be a good styling citizen
16m
7: CSS Values: Color and Sizing
54m
Worksheet
Topics
1m
7.2 Introduction to sizing
1m
7.3 Pixels (and their less-used cousin the point)
5m
7.4 Percentages
13m
7.5 em
9m
7.6 rem isn’t just for dreaming
7m
7.7 Vh, vw: The New Kids on the Block
10m
7.8 Pleasing fonts
4m
8: The Box Model
1h 53m
Worksheet
Topics
1m
8.1 Inline vs block
15m
8.2 Margins, padding, and borders
17m
8.3 Floats
16m
8.4 A little more about the overflow style
9m
8.5 Inline block
6m
8.6 Margins for boxes
20m
8.7 Padding … not just for chairs
4m
8.8 Fun with borders
20m
9: Laying It All Out
2h 36m
Worksheet
Topics
1m
9.1 Layout basics
2m
9.2 Jekyll
13m
9.3 Layouts, includes and pages (oh my!)
7m
9.4 The layout file
6m
9.5 CSS file and reset
13m
9.6 Include intro: Head and header
25m
9.7 Advanced selectors
20m
9.8 Positioning
33m
9.9 Fixed header
13m
9.10 A footer and includes in includes
18m
10: Page Template and Frontmatter
1h 7m
Worksheet
Topics
1m
10.1 Template content
4m
10.2 There’s no place like home
25m
10.3 More advanced selectors
28m
10.4 Other pages, other folders
8m
11: Specialty Page Layouts with Flexbox
1h 30m
Worksheet
Topics
1m
11.1 Having content fill a container
17m
11.2 Vertical flex centering
13m
11.3 Flexbox style options and shorthand
13m
11.4 Three-column page layout
23m
11.5 A gallery stub
20m
12: Adding a Blog
1h 24m
Worksheet
Topics
1m
12.1 Adding blog posts
26m
12.2 Blog index content loop
25m
12.3 A blog post page
31m
13: Mobile Media Queries
1h 51m
Worksheet
Topics
1m
13.1 Getting started with mobile designs
10m
13.2 Mobile adaptation
23m
13.3 Mobile viewpoint
7m
13.4 Dropdown menu
33m
13.5 Mobile dropdown menu
34m
14: Adding More Little Touches
55m
Worksheet
Topics
0m
14.1 Custom fonts
26m
14.2 Favicons
9m
14.3 Custom title and meta description
12m
14.4 Conclusion and further reading
5m
Summary
3m
Worksheet
Learn Enough HTML, CSS and Layout to Be Dangerous: Summary
3m
10: Page Template and Frontmatter
10.4 Other pages, other folders
10: Page Template and Frontmatter
10.4 Other pages, other folders - Video Tutorials & Practice Problems
Video duration:
8m
Play a video:
Previous Topic: 10.3 More advanced selectors
0