Apping
Home └HTML and CSS in depth

HTML and CSS in depth

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.

Private Course
Please sign in to contact responsible.
Responsible Ramit Verma
Last Update 26/03/2024
Completion Time 14 hours 38 minutes
Members 2
  • HTML in depth
    • Introduction to the Program
    • Introduction to HTML and CSS in depth
    • Course Syllabus
    • How are HTML and CSS used in the real world?
    • Recap What you know about HTML and CSS
  • Semantic and Meta Tags
    • Semantic tags and why we need them
    • Semantic HTML Cheat Sheet
    • Semantic tags in action
    • Metadata
    • Metadata cheat sheet
    • Bare bones layout
    • Layout Design
    • UX with meta tags
    • Social media cards
    • Setting up a social media card
    • Additional resources
  • User Input and Forms
    • Forms and validation
    • Input types
    • Creating a form
    • Making the most of client-side validation
    • Create and test a form
    • Create and test a form (solution)
    • Radio buttons
    • Cheat sheet: Interactive form elements
    • Using interactive form elements
    • Form submission
    • Submit
    • Browser differences
    • Glossary: HTML form elements
    • Create a complex form
    • Create a complex form (solution)
    • Additional resources
  • Media Elements
    • Video and audio
    • Embedded players
    • Rate the media
    • Rate the Media (Solution)
    • Images
    • iFrames
    • iFrame sandbox cheat sheet
    • iFrame as a picture
    • The canvas element
    • Module summary: HTML deep dive
    • Additional resources
  • Interactive CSS
    • CSS web layout
    • Understanding flexbox
    • CSS units of measurement
    • Basic flexbox
    • Flex charts
    • CSS grids
    • Grids and flexbox cheat sheet
    • Grid showcase
    • Grid template area
    • Create a grid layout
    • Create a grid layout (solution)
    • Case study: How Meta creates responsive builds
    • Additional Resources
  • CSS Selectors
    • Widely used selectors
    • All selectors and their specificity
    • Combination selectors
    • Targeted CSS
    • Targeted CSS (solution)
    • Pseudo-classes
    • Pseudo-elements
    • Practical use of pseudo
    • CSS Pseudo cheat sheet
    • Additional resources
  • CSS Effects
    • What is an effect
    • Text effects
    • Text effects cheat sheet
    • CSS Transforms and transitions
    • Transforming and transitioning elements
    • Transforming and transitioning elements (solution)
    • CSS animation
    • CSS keyframes
    • Animation examples
    • Animation and effects cheat sheet
    • Preprocessors: sass, scss, Stylus
    • Additional resources
  • Debugging
    • Common errors
    • Handling errors
    • Installing a third-party Linter in VS Code
    • Debugging the front-end
    • Debugging tools
    • Browser-specific CSS
    • UI testing
    • Case study How Meta performs front end testing
    • Module summary Interactive CSS
    • Additional resources
  • Course recap
    • Course recap
    • About the portfolio project
    • Subject selection
    • Selecting the subject and working out the layout
    • Positioning the elements, creating placeholders
    • Setting up your local development environment
    • Planning the user experience
    • Creating themes
    • Congratulations, you have completed HTMLS and CSS in depth!