HTML and CSS in depth

Ends in 5 days! Save 40% on your access to 10,000+ programs and make a real impact in your career. Save now.

HTML and CSS in depth

This course is part of multiple programs.

Instructor: Taught by Meta Experts

166,508 already enrolled

Included with Learn more

Ask Coursera

3 modules

Gain insight into a topic and learn the fundamentals.

1,932 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,932 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

21 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 videosTotal 88 minutes

Introduction to the Program3 minutes
Introduction to HTML and CSS in depth3 minutes
How are HTML and CSS used in the real world?4 minutes
Recap: What you know about HTML and CSS3 minutes
Semantic tags and why we need them5 minutes
Semantic tags in action5 minutes
Metadata5 minutes
Bare bones layout3 minutes
UX with meta tags4 minutes
Setting up a social media card3 minutes
Forms and validation3 minutes
Creating a form7 minutes
Making the most of client-side validation4 minutes
Radio buttons4 minutes
Using interactive form elements6 minutes
Form submission4 minutes
Browser differences3 minutes
Video and audio3 minutes
Embedded players4 minutes
iFrames3 minutes
iFrame as a picture4 minutes
The canvas element4 minutes
Module summary: HTML deep dive3 minutes

20 readingsTotal 255 minutes

Course syllabus10 minutes
How to be successful in this course10 minutes
Working with labs in this course10 minutes
Semantic HTML cheat sheet15 minutes
Metadata cheat sheet15 minutes
Layout design15 minutes
Social media cards15 minutes
Additional resources10 minutes
Input types15 minutes
Visual Studio Code on Coursera10 minutes
Create and test a form (solution)10 minutes
Cheat sheet: Interactive form elements15 minutes
Submit15 minutes
Glossary: HTML form elements20 minutes
Create a complex form (solution)10 minutes
Additional resources10 minutes
Rate the media (solution)10 minutes
Images10 minutes
iFrame sandbox cheat sheet20 minutes
Additional resources10 minutes

12 assignmentsTotal 204 minutes

Knowledge check: Practice using semantic tags21 minutes
Knowledge check: Metadata18 minutes
Knowledge check: Open Graph Protocol18 minutes
Knowledge check: Semantic and meta tags24 minutes
Self review: Create and test a form10 minutes
Knowledge check: Declaring form elements18 minutes
Knowledge check: Form submission24 minutes
Self-review: Create a complex form10 minutes
Knowledge check: User input and forms18 minutes
Self review: Rate the media10 minutes
Knowledge check: Media elements18 minutes
Knowledge check: HTML15 minutes

4 ungraded labsTotal 240 minutes

Semantic HTML: Enhancing Web Page Accessibility and Structure60 minutes
Create and test a form60 minutes
Create a complex form60 minutes
Rate the media60 minutes

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

What's included

22 videos20 readings8 assignments1 discussion prompt4 ungraded labs

22 videosTotal 108 minutes

CSS web layout4 minutes
Basic flexbox6 minutes
Flex charts7 minutes
CSS grids5 minutes
Grid showcase8 minutes
Case study: How Meta creates responsive builds3 minutes
Widely used selectors5 minutes
Combination selectors7 minutes
Pseudo-classes4 minutes
Practical use of pseudo4 minutes
What is an effect5 minutes
Text effects4 minutes
CSS Transforms and transitions6 minutes
CSS animation4 minutes
Animation examples5 minutes
Common errors6 minutes
Handling errors5 minutes
Debugging tools4 minutes
Browser-specific CSS6 minutes
UI testing4 minutes
Case study: How Meta performs front-end testing4 minutes
Module summary: Interactive CSS2 minutes

20 readingsTotal 305 minutes

Understanding flexbox20 minutes
CSS units of measurement10 minutes
Grids and flexbox cheat sheet15 minutes
Grid template area20 minutes
Create a grid layout (solution)15 minutes
Additional resources10 minutes
All selectors and their specificity20 minutes
Targeted CSS (solution)15 minutes
Pseudo-elements20 minutes
CSS Pseudo cheat sheet15 minutes
Additional resources10 minutes
Text effects cheat sheet15 minutes
Transforming and transitioning elements (solution)10 minutes
CSS keyframes20 minutes
Animation and effects cheat sheet15 minutes
Preprocessors: sass, scss, Stylus20 minutes
Additional resources10 minutes
Installing a third-party Linter in VS Code15 minutes
Debugging the front-end20 minutes
Additional resources10 minutes

8 assignmentsTotal 130 minutes

Self review: Create a grid layout12 minutes
Knowledge check: Creating layouts24 minutes
Self review: Targeted CSS10 minutes
Knowledge check: CSS selectors18 minutes
Self review: Transforming and transitioning elements15 minutes
Knowledge check: CSS effects18 minutes
Knowledge check: Debugging18 minutes
Module quiz: Interactive CSS 15 minutes

1 discussion promptTotal 10 minutes

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

4 ungraded labsTotal 240 minutes

Create a grid layout60 minutes
Targeted CSS60 minutes
Styling with Pseudo-Classes and Pseudo-Elements60 minutes
Transforming and transitioning elements60 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 videosTotal 19 minutes

Course recap3 minutes
Selecting the subject and working out the layout3 minutes
Positioning the elements, creating placeholders5 minutes
Planning the user experience3 minutes
Exemplar: So far so good3 minutes
Congratulations, you have completed HTMLS and CSS in depth!2 minutes

5 readingsTotal 37 minutes

About the portfolio project5 minutes
Subject selection10 minutes
Setting up your local development environment10 minutes
Creating themes10 minutes
Next steps2 minutes

1 assignmentTotal 5 minutes

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

1 peer reviewTotal 90 minutes

Submit your portfolio project90 minutes

2 discussion promptsTotal 20 minutes

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

1 ungraded labTotal 60 minutes

Project sandbox60 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

(541 ratings)

Taught by Meta Experts

Offered by

Explore more from Mobile and Web Development

IBM
Introduction to HTML, CSS, & JavaScript
Course
Status: Free Trial
Packt
Styling with CSS – Layouts and Visual Design
Course
Status: Free Trial
EDUCBA
Design and Build Websites with HTML & CSS Fundamentals
Course
Status: Free Trial
Packt
Modern HTML & CSS From The Beginning 2.0
Specialization
Status: Free Trial

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.54%
3 stars
3.51%
2 stars
1.13%
1 star
1.55%

Showing 3 of 1932

Reviewed on Oct 31, 2022

The teachers were so marvelous and explanations were done to perfection. I enjoyed this course and I will recommend anyone who is interested in web development to take this course.

Reviewed on Feb 12, 2023

Great course in general, It would be great to focus more on practicing the concepts, maybe in a larger project divided into each week, like an integrating project.

Reviewed on Apr 20, 2023

This course was amazing. I learned a lot through this course. especially about animation effects and the effective use of CSS and HTML.

View more reviews

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Certificate, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.