Learn HTML and CSS

Learn HTML and CSS

This course is part of multiple programs.

Instructor: Per Harald Borgen

What you'll learn

How to code websites from scratch with HTML and CSS
How to build beautiful layouts using color palettes, fonts, images, and other styling techniques
How to use professional tools for code editing, collaboration, and deployment

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

5 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Build your subject-matter expertise

This course is available as part of

When you enroll in this course, you'll also be asked to select a specific program.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

There are 5 modules in this course

This course is perfect if you want to learn how to code websites from scratch. You will learn the basics of HTML and CSS through interactive challenges. Along the way, you will build multiple projects, like a Google.com clone, a Space Exploration page, and a fun birthday site filled with GIFs.

In this module, you will learn the basics of HTML through interactive coding challenges. At the end, you will build a personal website that we will deploy to the web so that you can share with the world.

What's included

1 assignment17 plugins

1 assignmentTotal 15 minutes

Intro to HTML - Assignment15 minutes

17 pluginsTotal 79 minutes

Welcome to the HTML & CSS course!3 minutes
How to use scrims2 minutes
HTML tags11 minutes
Write a news article!8 minutes
The <img> tag5 minutes
Nesting3 minutes
Internet superpowers -> Change the BBC news!5 minutes
Interactive elements - button2 minutes
Interactive elements - input tags -> Experiment with input types5 minutes
Let's build Google!4 minutes
Aside: Anchor tags5 minutes
Add an anchor tag to Google.com2 minutes
Proper document structure6 minutes
Aside: Lists4 minutes
Build a Personal Website9 minutes
Deploy your Personal Website3 minutes
HTML Recap2 minutes

In this module, you will learn the basics of CSS by building a clone of the Google.com homepage.

What's included

1 assignment24 plugins

1 assignmentTotal 25 minutes

CSS Assignment - Layouts, Spacing, and Structure25 minutes

24 pluginsTotal 75 minutes

Let's learn CSS!1 minute
Write your first lines of CSS!4 minutes
Write your first lines of CSS! - Solution4 minutes
Let's destroy wikipedia - recording2 minutes
Link to the CSS file3 minutes
Set the width of the elements2 minutes
inline vs block elements2 minutes
Margin top1 minute
Divs rule the world2 minutes
CSS classes4 minutes
Aside: Learn margins via flags6 minutes
Add space between our elements1 minute
Aside: centering with margins3 minutes
Centering our content1 minute
Aside: padding5 minutes
Aside: border and border-radius5 minutes
Aside challenge: style Twitter button5 minutes
Fix the input field5 minutes
Center the button2 minutes
Style the button4 minutes
Why we can't have two block-level buttons4 minutes
Aside: flexbox4 minutes
Centering both buttons with flexbox3 minutes
Google clone recap2 minutes

In this module, you will deepen your CSS skills by building a digital business card for yourself.

What's included

1 assignment19 plugins

1 assignmentTotal 25 minutes

CSS Assignment - Attributes, Styles, and Tools25 minutes

19 pluginsTotal 56 minutes

Building your digital business card1 minute
Fix the image path3 minutes
Add alt attribute4 minutes
Make image smaller1 minute
Add a border and padding4 minutes
Aside: flexbox child containers4 minutes
Flex item containers2 minutes
Add a utility class3 minutes
Justify the items2 minutes
Center the card2 minutes
Aside: inheritance4 minutes
Center the text via inheritance3 minutes
Add colors3 minutes
Web-safe fonts5 minutes
Aside: margin/padding shorthand4 minutes
Use the margin&padding shorthands1 minute
Make it your own!3 minutes
Deploy your Digital Business Card5 minutes
Business Card recap2 minutes

In this module, you will build a website about space exploration. It will teach you several techniques for making your projects look beautiful and polished.

What's included

1 assignment14 plugins

1 assignmentTotal 15 minutes

CSS Assignment - Images, Fonts, and Styling15 minutes

14 pluginsTotal 44 minutes

Let's go to space!1 minute
Add a background image from unsplash4 minutes
Center elements and style button3 minutes
Add a Google Font4 minutes
@font-face2 minutes
Aside: spans4 minutes
Add an underline using a span2 minutes
Use an ID for the logo4 minutes
Replace the jpg with a webp3 minutes
Choose a color palette from an image3 minutes
Add the terms & conditions section4 minutes
Aside: text shadow6 minutes
Improving the readability with text shadows2 minutes
Space Exploration recap2 minutes

In this module, you will build a fun website that you can use for a friend or family member's birthday. You will deepen your layout skills and learn how to get setup with a local development environment.

What's included

1 assignment23 plugins

1 assignmentTotal 25 minutes

CSS Assignment - Tools and Techniques: Setup, Styling, and Flexbox25 minutes

23 pluginsTotal 75 minutes

Let's build a Birthday GIFt site!1 minute
Add basic header styling4 minutes
Set the colors2 minutes
Add shadow on text3 minutes
We have a problem that flexbox can fix3 minutes
Aside: align-items6 minutes
Aside: flex-direction4 minutes
Turn the header into a flexbox2 minutes
Fix date and age design4 minutes
Create the first gift5 minutes
Replace the img with a div4 minutes
Aside: make elements change on hover3 minutes
Add the hover effect2 minutes
Create the next GIFt4 minutes
Create two more GIFts3 minutes
Create the final GIFt3 minutes
Add the footer4 minutes
Add a background gradient3 minutes
Personalize the Birthday GIFt Site2 minutes
Use GitHub Desktop to publish your Birthday GIFt Site5 minutes
Deploying your Birthday GIFt Site1 minute
Use VS Code to edit your Birthday GIFt Site5 minutes
GIFt site recap2 minutes

Instructor

Instructor ratings

4.9 (24 ratings)

Per Harald Borgen

Scrimba

20 Courses46,124 learners

Offered by

Scrimba

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Learner reviews

4.5

76 reviews

5 stars
73.68%
4 stars
14.47%
3 stars
7.89%
2 stars
0%
1 star
3.94%

Showing 3 of 76

Reviewed on Jan 11, 2024

Per, the instructor is the best I have ever seen! He is really witty, passionate, and his communication is excellent! 100% you will get no regret.

Reviewed on Jan 8, 2024

I loved this course. I went a head a bit since I was already was in vscode, but the instructor really makes it fun to learn and breaks everything down really well. Looking forward to the next course!

Reviewed on Sep 10, 2023

The really nice thing about this course is the projects and the hands on learning where you get to practice within the videos.

View more reviews