HTML and CSS in depth

This course is part of Meta Front-End Developer Professional Certificate

Instructor: Taught by Meta Staff

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

HTML and CSS

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

2 quizzes, 19 assignments

Taught in English

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

Learn more about Coursera for Business

Build your Mobile and Web Development expertise

This course is part of the Meta Front-End Developer Professional Certificate

When you enroll in this course, you'll also be enrolled in this Professional Certificate.

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 from Meta

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 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 readings1 quiz11 assignments1 discussion prompt3 ungraded labs

23 videosTotal 88 minutes

Introduction to the Program3 minutesPreview module
Introduction to HTML and CSS in depth3 minutes
How are HTML and CSS used in the real world?3 minutes
Recap: What you know about HTML and CSS2 minutes
Semantic tags and why we need them4 minutes
Semantic tags in action4 minutes
Metadata5 minutes
Bare bones layout3 minutes
UX with meta tags3 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 elements5 minutes
Form submission3 minutes
Browser differences3 minutes
Video and audio2 minutes
Embedded players3 minutes
iFrames2 minutes
iFrame as a picture3 minutes
The canvas element3 minutes
Module summary: HTML deep dive2 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

1 quizTotal 30 minutes

Module quiz: HTML deep dive30 minutes

11 assignmentsTotal 189 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

1 discussion promptTotal 10 minutes

What do you hope to learn?10 minutes

3 ungraded labsTotal 180 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 readings1 quiz7 assignments1 discussion prompt3 ungraded labs

22 videosTotal 107 minutes

CSS web layout4 minutesPreview module
Basic flexbox5 minutes
Flex charts7 minutes
CSS grids5 minutes
Grid showcase8 minutes
Case study: How Meta creates responsive builds2 minutes
Widely used selectors5 minutes
Combination selectors7 minutes
Pseudo-classes4 minutes
Practical use of pseudo4 minutes
What is an effect4 minutes
Text effects4 minutes
CSS Transforms and transitions5 minutes
CSS animation3 minutes
Animation examples4 minutes
Common errors6 minutes
Handling errors4 minutes
Debugging tools3 minutes
Browser-specific CSS5 minutes
UI testing3 minutes
Case study: How Meta performs front-end testing3 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

1 quizTotal 12 minutes

Self review: Create a grid layout12 minutes

7 assignmentsTotal 118 minutes

Module quiz: Interactive CSS 15 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

1 discussion promptTotal 10 minutes

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

3 ungraded labsTotal 180 minutes

Create a grid layout60 minutes
Targeted CSS60 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 minutesPreview module
Selecting the subject and working out the layout2 minutes
Positioning the elements, creating placeholders5 minutes
Planning the user experience2 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

Instructor

Instructor ratings

4.6 (490 ratings)

Taught by Meta Staff

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

4.7

1,709 reviews

5 stars
79.51%
4 stars
14.74%
3 stars
3.42%
2 stars
1.04%
1 star
1.27%

Showing 3 of 1709

Reviewed on Aug 5, 2023

It was a good course, it was taught from the basicsBut you must pay attention to the fact that you must repeat the codes that are taught during the course

Reviewed on Dec 4, 2023

The course is in detail. Very engaging, not at all boring, lab works give a good idea of concepts taught, gains practical implementation and confidence.

Reviewed on May 7, 2023

This course gives you a complete overview of HTML and CSS, it goes deeper in cross-browser compatibility and semantic HTML. I definitely recommend it for beginners.

View more reviews