When will I have access to the lectures and assignments?

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.

What will I get if I subscribe to this Certificate?

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.

HTML and CSS in depth

Ends tomorrow! Save on skills that make you shine with 40% off 3 months of Coursera Plus. Save now

HTML and CSS in depth

This course is part of multiple programs.

Instructor: Taught by Meta Experts

164,290 already enrolled

Included with

Learn more

3 modules

Gain insight into a topic and learn the fundamentals.

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

91% of learners achieved a positive career outcome

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.

Module details

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

Learner reviews

5 stars
79.23%
4 stars
14.53%
3 stars
3.53%
2 stars
1.14%
1 star
1.55%

Showing 3 of 1924

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