HTML and CSS in depth

HTML and CSS in depth

This course is part of multiple programs.

Instructor: Taught by Meta Experts

Access provided by Nielsen

160,713 already enrolled

3 modules

Gain insight into a topic and learn the fundamentals.

1,913 reviews

Beginner level

Recommended experience

Flexible schedule

3 weeks at 10 hours a week

Learn at your own pace

96%

Most learners liked this course

3 modules

Gain insight into a topic and learn the fundamentals.

1,913 reviews

Beginner level

Recommended experience

Flexible schedule

3 weeks at 10 hours a week

Learn at your own pace

96%

Most learners liked this course

What you'll learn

Create a simple form with a responsive layout using HTML5 and CSS
Create a responsive layout using CSS
Create a UI using Bootstrap
Implement debugging tools

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

1 quiz, 20 assignments¹

AI Graded see disclaimer

Taught in English

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

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

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

There are 3 modules in this course

In this course, you’ll use software development tools like HTML to build attractive web pages that work well—and you’ll use structured semantic data to control how websites appear to the end user.

You will then dive deeper into CSS by applying increasingly specific styling to various elements. You’ll learn to use Bootstrap’s grid system to create layouts and work with components and themes. Finally, you’ll explore debugging and learn how it can be utilized to banish common front-end errors. By the end of this course you will be able to: • Create a simple form with a responsive layout using HTML5 and CSS • Create a responsive layout using CSS • Create a UI using Bootstrap • Implement debugging tools This is a beginner course for learners who would like to prepare themselves for a career in front-end development. To succeed in this course, you do not need prior development experience, only basic internet navigation skills and an eagerness to get started with coding.

In this module, you will use structured semantic data to control how web sites appear to the user. You will create semantic HTML to structure webpages to look good and work well.

What's included

23 videos20 readings12 assignments4 ungraded labs

23 videos Total 88 minutes

Introduction to the Program 3 minutes
Introduction to HTML and CSS in depth 3 minutes
How are HTML and CSS used in the real world? 4 minutes
Recap: What you know about HTML and CSS 3 minutes
Semantic tags and why we need them 5 minutes
Semantic tags in action 5 minutes
Metadata 5 minutes
Bare bones layout 3 minutes
UX with meta tags 4 minutes
Setting up a social media card 3 minutes
Forms and validation 3 minutes
Creating a form 7 minutes
Making the most of client-side validation 4 minutes
Radio buttons 4 minutes
Using interactive form elements 6 minutes
Form submission 4 minutes
Browser differences 3 minutes
Video and audio 3 minutes
Embedded players 4 minutes
iFrames 3 minutes
iFrame as a picture 4 minutes
The canvas element 4 minutes
Module summary: HTML deep dive 3 minutes

20 readings Total 255 minutes

Course syllabus 10 minutes
How to be successful in this course 10 minutes
Working with labs in this course 10 minutes
Semantic HTML cheat sheet 15 minutes
Metadata cheat sheet 15 minutes
Layout design 15 minutes
Social media cards 15 minutes
Additional resources 10 minutes
Input types 15 minutes
Visual Studio Code on Coursera 10 minutes
Create and test a form (solution) 10 minutes
Cheat sheet: Interactive form elements 15 minutes
Submit 15 minutes
Glossary: HTML form elements 20 minutes
Create a complex form (solution) 10 minutes
Additional resources 10 minutes
Rate the media (solution) 10 minutes
Images 10 minutes
iFrame sandbox cheat sheet 20 minutes
Additional resources 10 minutes

12 assignments Total 204 minutes

Knowledge check: Practice using semantic tags 21 minutes
Knowledge check: Metadata 18 minutes
Knowledge check: Open Graph Protocol 18 minutes
Knowledge check: Semantic and meta tags 24 minutes
Self review: Create and test a form 10 minutes
Knowledge check: Declaring form elements 18 minutes
Knowledge check: Form submission 24 minutes
Self-review: Create a complex form 10 minutes
Knowledge check: User input and forms 18 minutes
Self review: Rate the media 10 minutes
Knowledge check: Media elements 18 minutes
Knowledge check: HTML 15 minutes

4 ungraded labs Total 240 minutes

Semantic HTML: Enhancing Web Page Accessibility and Structure 60 minutes
Create and test a form 60 minutes
Create a complex form 60 minutes
Rate the media 60 minutes

In this module, you will dive deeper into CSS by applying increasingly specific styling to various elements.

What's included

22 videos20 readings1 quiz7 assignments1 discussion prompt4 ungraded labs

22 videos Total 108 minutes

CSS web layout 4 minutes
Basic flexbox 6 minutes
Flex charts 7 minutes
CSS grids 5 minutes
Grid showcase 8 minutes
Case study: How Meta creates responsive builds 3 minutes
Widely used selectors 5 minutes
Combination selectors 7 minutes
Pseudo-classes 4 minutes
Practical use of pseudo 4 minutes
What is an effect 5 minutes
Text effects 4 minutes
CSS Transforms and transitions 6 minutes
CSS animation 4 minutes
Animation examples 5 minutes
Common errors 6 minutes
Handling errors 5 minutes
Debugging tools 4 minutes
Browser-specific CSS 6 minutes
UI testing 4 minutes
Case study: How Meta performs front-end testing 4 minutes
Module summary: Interactive CSS 2 minutes

20 readings Total 305 minutes

Understanding flexbox 20 minutes
CSS units of measurement 10 minutes
Grids and flexbox cheat sheet 15 minutes
Grid template area 20 minutes
Create a grid layout (solution) 15 minutes
Additional resources 10 minutes
All selectors and their specificity 20 minutes
Targeted CSS (solution) 15 minutes
Pseudo-elements 20 minutes
CSS Pseudo cheat sheet 15 minutes
Additional resources 10 minutes
Text effects cheat sheet 15 minutes
Transforming and transitioning elements (solution) 10 minutes
CSS keyframes 20 minutes
Animation and effects cheat sheet 15 minutes
Preprocessors: sass, scss, Stylus 20 minutes
Additional resources 10 minutes
Installing a third-party Linter in VS Code 15 minutes
Debugging the front-end 20 minutes
Additional resources 10 minutes

1 quiz Total 12 minutes

Self review: Create a grid layout 12 minutes

7 assignments Total 118 minutes

Knowledge check: Creating layouts 24 minutes
Self review: Targeted CSS 10 minutes
Knowledge check: CSS selectors 18 minutes
Self review: Transforming and transitioning elements 15 minutes
Knowledge check: CSS effects 18 minutes
Knowledge check: Debugging 18 minutes
Module quiz: Interactive CSS 15 minutes

1 discussion prompt Total 10 minutes

What are some CSS bugs you have struggled with? 10 minutes

4 ungraded labs Total 240 minutes

Create a grid layout 60 minutes
Targeted CSS 60 minutes
Styling with Pseudo-Classes and Pseudo-Elements 60 minutes
Transforming and transitioning elements 60 minutes

In this module, you will be assessed on the key skills covered in the Course.

What's included

6 videos5 readings1 assignment1 peer review2 discussion prompts1 ungraded lab

6 videos Total 19 minutes

Course recap 3 minutes
Selecting the subject and working out the layout 3 minutes
Positioning the elements, creating placeholders 5 minutes
Planning the user experience 3 minutes
Exemplar: So far so good 3 minutes
Congratulations, you have completed HTMLS and CSS in depth! 2 minutes

5 readings Total 37 minutes

About the portfolio project 5 minutes
Subject selection 10 minutes
Setting up your local development environment 10 minutes
Creating themes 10 minutes
Next steps 2 minutes

1 assignment Total 5 minutes

Readiness check: Have you completed the initial setup? 5 minutes

1 peer review Total 90 minutes

Submit your portfolio project 90 minutes

2 discussion prompts Total 20 minutes

Share your completed portfolio 10 minutes
What did you find most interesting in this course? 10 minutes

1 ungraded lab Total 60 minutes

Project sandbox 60 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Instructor ratings

(539 ratings)

Taught by Meta Experts

Offered by

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

5 stars
79.24%
4 stars
14.58%
3 stars
3.55%
2 stars
1.09%
1 star
1.51%

Showing 3 of 1913

Reviewed on Feb 19, 2023

The best course to really dive deep in HTML & CSS. Very deep and specific knowledge Thanks to the Instructor, Meta and of course COURSERA. You all doing a great job.

Reviewed on Apr 13, 2023

I want to take this opportunity to congratulate the Meta and Coursera for this Course. I am impressed with the efficient delivery of this course.

Reviewed on Jan 28, 2023

Good, still I missed more explanation on flex and grid layouts. Cheat sheets are good, but more complex explanations in videos could've been better.

View more reviews