Buy Now AED 170.99 + VAT

Monthly Subscription Starting at AED 99 + VAT

HTML and CSS in depth
  • Level Foundation
  • Duration 29 hours
  • Course by Meta
  • Offered by

About

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.

Modules

Course Introduction

    • 4 Videos
    • 3 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • What do you hope to learn?

4 Videos

  • Introduction to the Program
  • Introduction to HTML and CSS in depth
  • How are HTML and CSS used in the real world?
  • Recap: What you know about HTML and CSS

3 Readings

  • Course syllabus
  • How to be successful in this course
  • Working with labs in this course

Semantic and Meta Tags

    • 6 Videos
    • 5 Readings
    • 4 Assignment
Show info about module content

4 Assignment

  • Knowledge check: Practice using semantic tags
  • Knowledge check: Metadata
  • Knowledge check: Open Graph Protocol
  • Knowledge check: Semantic and meta tags

6 Videos

  • Semantic tags and why we need them
  • Semantic tags in action
  • Metadata
  • Bare bones layout
  • UX with meta tags
  • Setting up a social media card

5 Readings

  • Semantic HTML cheat sheet
  • Metadata cheat sheet
  • Layout design
  • Social media cards
  • Additional resources

User Input and Forms

    • 7 Videos
    • 8 Readings
    • 2 Lab
    • 5 Assignment
Show info about module content

5 Assignment

  • Self review: Create and test a form
  • Knowledge check: Declaring form elements
  • Knowledge check: Form submission
  • Self-review: Create a complex form
  • Knowledge check: User input and forms

2 Labs

  • Create and test a form
  • Create a complex form

7 Videos

  • Forms and validation
  • Creating a form
  • Making the most of client-side validation
  • Radio buttons
  • Using interactive form elements
  • Form submission
  • Browser differences

8 Readings

  • Input types
  • Visual Studio Code on Coursera
  • Create and test a form (solution)
  • Cheat sheet: Interactive form elements
  • Submit
  • Glossary: HTML form elements
  • Create a complex form (solution)
  • Additional resources

Media Elements

    • 6 Videos
    • 4 Readings
    • 1 Quiz
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self review: Rate the media
  • Knowledge check: Media elements

1 Labs

  • Rate the media

6 Videos

  • Video and audio
  • Embedded players
  • iFrames
  • iFrame as a picture
  • The canvas element
  • Module summary: HTML deep dive

4 Readings

  • Rate the media (solution)
  • Images
  • iFrame sandbox cheat sheet
  • Additional resources

1 Quiz

  • Module quiz: HTML deep dive

Creating layouts

    • 6 Videos
    • 6 Readings
    • 1 Quiz
    • 1 Lab
    • 1 Assignment
Show info about module content

1 Assignment

  • Knowledge check: Creating layouts

1 Labs

  • Create a grid layout

6 Videos

  • CSS web layout
  • Basic flexbox
  • Flex charts
  • CSS grids
  • Grid showcase
  • Case study: How Meta creates responsive builds

6 Readings

  • Understanding flexbox
  • CSS units of measurement
  • Grids and flexbox cheat sheet
  • Grid template area
  • Create a grid layout (solution)
  • Additional resources

1 Quiz

  • Self review: Create a grid layout

CSS Selectors

    • 4 Videos
    • 5 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self review: Targeted CSS
  • Knowledge check: CSS selectors

1 Labs

  • Targeted CSS

4 Videos

  • Widely used selectors
  • Combination selectors
  • Pseudo-classes
  • Practical use of pseudo

5 Readings

  • All selectors and their specificity
  • Targeted CSS (solution)
  • Pseudo-elements
  • CSS Pseudo cheat sheet
  • Additional resources

CSS Effects

    • 5 Videos
    • 6 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • Self review: Transforming and transitioning elements
  • Knowledge check: CSS effects

1 Labs

  • Transforming and transitioning elements

5 Videos

  • What is an effect
  • Text effects
  • CSS Transforms and transitions
  • CSS animation
  • Animation examples

6 Readings

  • Text effects cheat sheet
  • Transforming and transitioning elements (solution)
  • CSS keyframes
  • Animation and effects cheat sheet
  • Preprocessors: sass, scss, Stylus
  • Additional resources

Debugging

    • 7 Videos
    • 3 Readings
    • 1 Discussion
    • 2 Assignment
Show info about module content

2 Assignment

  • Knowledge check: Debugging
  • Module quiz: Interactive CSS

1 Discussions

  • What are some CSS bugs you have struggled with?

7 Videos

  • Common errors
  • Handling errors
  • Debugging tools
  • Browser-specific CSS
  • UI testing
  • Case study: How Meta performs front-end testing
  • Module summary: Interactive CSS

3 Readings

  • Installing a third-party Linter in VS Code
  • Debugging the front-end
  • Additional resources

Graded Assessment

    • 5 Videos
    • 4 Readings
    • 1 Discussion
    • 1 PeerReview
    • 1 Lab
    • 1 Assignment
Show info about module content

1 Assignment

  • Readiness check: Have you completed the initial setup?

1 Peer Review

  • Submit your portfolio project

1 Discussions

  • Share your completed portfolio

1 Labs

  • Project sandbox

5 Videos

  • Course recap
  • Selecting the subject and working out the layout
  • Positioning the elements, creating placeholders
  • Planning the user experience
  • Exemplar: So far so good

4 Readings

  • About the portfolio project
  • Subject selection
  • Setting up your local development environment
  • Creating themes

Course wrap up

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • What did you find most interesting in this course?

1 Videos

  • Congratulations, you have completed HTMLS and CSS in depth!

1 Readings

  • Next steps

Auto Summary

Unlock the world of web development with "HTML and CSS in Depth," an engaging course designed for beginners aiming to build a career in front-end development. Led by Coursera, this foundational course covers essential HTML and CSS skills, including responsive layouts, Bootstrap UI, and debugging tools. With a duration of 1740 minutes, you can dive into creating attractive, functional websites. No prior experience needed—just basic internet skills and enthusiasm for coding. Available with a Starter subscription.

Taught by Meta Staff
Instructor

Taught by Meta Staff