Click the image to get to the course.

Want to learn to build websites? Try our free 4-hour crash course on HTML & CSS

If you’re curious about web development, but don’t know where to start, this is the perfect course for you!

One of the layouts you’ll build in the course.

1. Introduction

2. What are HTML and CSS?

3. Basic Terminology and Syntax

4. Let’s write some HTML!

<!DOCTYPE html> <html> <head> <title>My first website</title> </head> <body> <h1>My very first webpage</h1> <h2>Websites are built with HTML</h2> <p>HTML is a markup language that tells the browser what everything is</p> <h2>They also use CSS</h2> <p>I can't wait to start learning CSS!</p> </body> </html>

5. strong and emphasis

6. File naming and organization

7. Anchors and Attributes

8. Intro to CSS

9. CSS Basics

10. Practice time!

<!--HTML 
- h1 (the title of the page)
- An introductory paragraph
- Two h2s, each followed by a few paragraphs
- Inside the paragraphs, use strong and emphasis tags
- If you are feeling adventurous add a second page and link to itCSS - Change the color of the h1
- Change the text alignment of the h1
- Change the color of the h2s
- Change the font-size of the paragraphs
- If you added a link, change the color of it
-->

11. Recap up until this point

12. Lists

13. Images

14. Practice time!

15. Internal CSS

<!DOCTYPE html> <html> <head> <title>All about Earth and Mars</title> <style> h1 { font-size: 60px; } p { font-size: 24px; color: steelblue; } </style> </head> <body> <h1>Earth and Mars</h1> <p>Earth and Mars are two planets within our solar system.</p> </body> </html>

16. External CSS

17. Classes and IDs

/* Element selector */ 
a { color: darksalmon; }
/* Class selector */
.intro { font-size: 24px; }
/* ID selector */ #earth-title { color: lightgreen; }

18. Comments in HTML and CSS

<html> 
<head>
<title>Comments!</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>Comments!</h1>
<!-- My comment goes here -->
</body>
</html>

19. The only tags you need to know (for now)

h1 -> 
h6
p
strong and em
a
ul, ol, li
img
header 
main
section
footer
nav
div

20. Intro to the box model

21. Margin and Padding

padding-top: 20px; 
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* Shorthand version would be */
padding: 20px 30px 40px 50px;
margin-top: 500px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 10px;
/* Shorthand version would be */
margin: 500px 100px 10px;

22. Borders

23. Box model wrap up

24. A basic layout

25. A basic layout — centring an element on the page

26. Creating columns with flexbox

27. Creating the layout from scratch — the HTML

28. Creating the Layout — The CSS

29. What’s next?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Per Harald Borgen

Per Harald Borgen

Co-founder of Scrimba, the next-generation coding school.