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

4.7
stars
532 ratings

Taught by Meta Staff

34,690 already enrolled

Offered By

Meta Front-End Developer Professional CertificateMeta

About this Course

663,032 recent views

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.

Flexible deadlines

Reset deadlines in accordance to your schedule.

Shareable Certificate

Earn a Certificate upon completion

100% online

Start instantly and learn at your own schedule.

Coursera Labs

Includes hands on learning projects.

Learn more about Coursera Labs

Course 4 of 9 in the

Meta Front-End Developer Professional Certificate

Beginner Level

None! Learners do not need prior web development experience. Only basic internet navigation skills and an eagerness to get started with coding.

Approx. 28 hours to complete

English

What you will 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 will gain

Debugging
User Interface
React (Web Framework)
HTML and CSS
JavaScript

Flexible deadlines

Reset deadlines in accordance to your schedule.

Shareable Certificate

Earn a Certificate upon completion

100% online

Start instantly and learn at your own schedule.

Coursera Labs

Includes hands on learning projects.

Learn more about Coursera Labs

Course 4 of 9 in the

Meta Front-End Developer Professional Certificate

Beginner Level

None! Learners do not need prior web development experience. Only basic internet navigation skills and an eagerness to get started with coding.

Approx. 28 hours to complete

English

Instructor

Instructor rating

4.62/5 (153 Ratings)

Taught by Meta Staff

278,752 Learners

57 Courses

Offered by

Syllabus - What you will learn from this course

Content Rating96%(9,463 ratings)

Week1

Week 1

13 hours to complete

HTML in depth

13 hours to complete

23 videos (Total 88 min), 20 readings, 12 quizzes

23 videos

Introduction to the Program3mIntroduction to HTML and CSS in depth3mHow are HTML and CSS used in the real world?3mRecap: What you know about HTML and CSS2mSemantic tags and why we need them4mSemantic tags in action4mMetadata5mBare bones layout3mUX with meta tags3mSetting up a social media card3mForms and validation3mCreating a form7mMaking the most of client-side validation4mRadio buttons4mUsing interactive form elements5mForm submission3mBrowser differences3mVideo and audio2mEmbedded players3miFrames2miFrame as a picture3mThe canvas element3mModule summary: HTML deep dive2m

20 readings

Course syllabus10mHow to be successful in this course10mWorking with labs in this course10mSemantic HTML cheat sheet15mMetadata cheat sheet15mLayout design15mSocial media cards15mAdditional resources10mInput types15mVisual Studio Code on Coursera10mCreate and test a form (solution)10mCheat sheet: Interactive form elements15mSubmit15mGlossary: HTML form elements20mCreate a complex form (solution)10mAdditional resources10mRate the media (solution)10mImages10miFrame sandbox cheat sheet20mAdditional resources10m

12 practice exercises

Knowledge check: Practice using semantic tags21mKnowledge check: Metadata18mKnowledge check: Open Graph Protocol18mKnowledge check: Semantic and meta tags24mSelf review: Create and test a form10mKnowledge check: Declaring form elements18mKnowledge check: Form submission24mSelf-review: Create a complex form10mKnowledge check: User input and forms18mSelf review: Rate the media10mKnowledge check: Media elements18mModule quiz: HTML deep dive30m

Week2

Week 2

12 hours to complete

Interactive CSS

12 hours to complete

22 videos (Total 108 min), 20 readings, 8 quizzes

22 videos

CSS web layout4mBasic flexbox5mFlex charts7mCSS grids5mGrid showcase8mCase study: How Meta creates responsive builds2mWidely used selectors5mCombination selectors7mPseudo-classes4mPractical use of pseudo4mWhat is an effect4mText effects4mCSS Transforms and transitions5mCSS animation3mAnimation examples4mCommon errors6mHandling errors4mDebugging tools3mBrowser-specific CSS5mUI testing3mCase study: How Meta performs front-end testing3mModule summary: Interactive CSS2m

20 readings

Understanding flexbox20mCSS units of measurement10mGrids and flexbox cheat sheet15mGrid template area20mCreate a grid layout (solution)15mAdditional resources10mAll selectors and their specificity20mTargeted CSS (solution)15mPseudo-elements20mCSS Pseudo cheat sheet15mAdditional resources10mText effects cheat sheet15mTransforming and transitioning elements (solution)10mCSS keyframes20mAnimation and effects cheat sheet15mPreprocessors: sass, scss, Stylus20mAdditional resources10mInstalling a third-party Linter in VS Code15mDebugging the front-end20mAdditional resources10m

8 practice exercises

Self review: Create a grid layout12mKnowledge check: Creating layouts24mSelf review: Targeted CSS10mKnowledge check: CSS selectors18mSelf review: Transforming and transitioning elements15mKnowledge check: CSS effects18mKnowledge check: Debugging18mModule quiz: Interactive CSS 15m

Week3

Week 3

4 hours to complete

Graded Assessment

4 hours to complete

6 videos (Total 19 min), 5 readings, 2 quizzes

6 videos

Course recap3mSelecting the subject and working out the layout2mPositioning the elements, creating placeholders5mPlanning the user experience2mExemplar: So far so good3mCongratulations, you have completed HTMLS and CSS in depth!2m

5 readings

About the portfolio project5mSubject selection10mSetting up your local development environment10mCreating themes10mNext steps2m

1 practice exercise

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

Reviews

4.7

142 reviews

5 stars
80.28%
4 stars
14.46%
3 stars
3.25%
2 stars
0.90%
1 star
1.08%

TOP REVIEWS FROM HTML AND CSS IN DEPTH

by OISep 11, 2022

Great course, goes in depth into the latest approaches and best practices in using HTML and CSS in web development.

by ASDec 12, 2022

Great course, it'll definitely move you via your in-depth of CSS and HTML,many college students are lagging in flex and grid ideas in reality clean the one's concepts

by JLFeb 3, 2023

Super awesome! I love the process and progression of the course. I am not intimidated with CSS anymore but needs lots lots of practice.

by MMSep 13, 2022

Very good course to dive deeper into html semantics, , meta tags and their meanings, and all the ways we can use css

View all reviews

About the Meta Front-End Developer Professional Certificate

Want to get started in the world of coding and build websites as a career? This certificate, designed by the software engineering experts at Meta—the creators of Facebook and Instagram, will prepare you for a career as a front-end developer.

Upon completion, you’ll get access to the Meta Career Programs Job Board—a job search platform that connects you with 200+ employers who have committed to sourcing talent through Meta’s certificate programs, as well as career support resources to help you with your job search. In this program, you’ll learn: How to code and build interactive web pages using HTML5, CSS and JavaScript. In-demand design skills to create professional page layouts using industry-standard tools such as Bootstrap, React, and Figma. GitHub repositories for version control, content management system (CMS) and how to edit images using Figma. How to prepare for technical interviews for front-end developer roles. By the end, you’ll put your new skills to work by completing a real-world project where you’ll create your own front-end web application. Any third-party trademarks and other intellectual property (including logos and icons) referenced in the learning experience remain the property of their respective owners. Unless specifically identified as such, Coursera’s use of third-party intellectual property does not indicate any relationship, sponsorship, or endorsement between Coursera and the owners of these trademarks or other intellectual property.

Frequently Asked Questions

When will I have access to the lectures and assignments?
Access to lectures and assignments depends on your type of enrollment. If you take a course in audit mode, you will be able to see most course materials for free. To access graded assignments and to earn a Certificate, you will need to purchase the Certificate experience, during or after your audit. If you don't see the audit option:
The course may not offer an audit option. 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. If you only want to read and view the course content, you can audit the course for free.
What is the refund policy?
If you subscribed, you get a 7-day free trial during which you can cancel at no penalty. After that, we don’t give refunds, but you can cancel your subscription at any time. See our full refund policy.

More questions? Visit the Learner Help Center.

HTML and CSS in depth

About this Course

What you will learn

Skills you will gain