Free Course Image CSS Front-End Web Developer

Free online courseCSS Front-End Web Developer

Duration of the online course: 6 hours and 28 minutes

New course

Learn CSS with Slaying The Dragon's course and master web development essentials. Design responsive, animated, CSS-only websites with practical skills.

In this free course, learn about

  • Foundations and Responsive Layout
  • CSS Effects and Units
  • Layout, Box Model, and Variables
  • Advanced CSS Layout and Components

Course Description

Dive into the world of web development with the comprehensive CSS Front-End Web Developer course by Slaying The Dragon. This meticulously structured course offers an enriching journey through the essentials of modern web design and development. Starting with the fundamental skills necessary to construct a professional portfolio website, you'll integrate HTML, CSS, and JavaScript while learning to implement dark mode and lazy loading effectively. Each lesson builds on your ability to produce responsive designs using media queries, ensuring your website looks impeccable on any device.

One of the cornerstones of this course is mastering CSS positioning with practical, real-world examples, making complex layout decisions more intuitive. Animate your designs with flair as you delve into CSS animations, a turbocharged way to bring static pages to life, and understand CSS units in-depth to enhance layout precision across various browser environments.

In as little as 13 minutes, grasp the essentials of CSS Grid to design layout structures with ease or understand Flexbox in just 8 minutes to align and distribute space within a container effectively. Explore the CSS Box Model, which demystifies content sizing, and learn how utilizing CSS variables can streamline your coding process.

Take your skills further with lessons on the innovative CSS Subgrid and build functionality without JavaScript using CSS-only techniques for features like infinite scroll. The course rounds out with practical topics such as a thorough explanation of CSS Selectors and creating modals easily.

This course is a perfect fit for anyone eager to advance their web development skills, whether you're updating existing knowledge or starting fresh, ensuring you’re equipped with the skills to flourish in the dynamic field of Information Technology, specifically in Web Development.

Course content

  • Video class: Build Your Portfolio Website - HTML CSS JS - Dark Mode - Lazy Loading 3h32m
  • Exercise: What setup ensures a responsive container that only resizes at defined breakpoints
  • Video class: Master Media Queries And Responsive CSS Web Design Like a Chameleon! 09m
  • Exercise: In a mobile-first CSS workflow, which media query pattern should you use to add styles as the viewport gets larger?
  • Video class: Learn CSS Positioning Quickly With A Real World Example 08m
  • Exercise: Which CSS position removes an element from normal flow and positions it using top right bottom left relative to the nearest positioned ancestor?
  • Video class: Learn CSS Animations In 20 Minutes - For Beginners 21m
  • Exercise: When should you prefer a CSS transition instead of a keyframe animation?
  • Video class: A CSS Unit Deep Dive - Learn CSS Units 15m
  • Exercise: Which CSS unit is best for setting font sizes to respect user preferences and avoid compounded inheritance?
  • Video class: Learn CSS Grid - A 13 Minute Deep Dive 13m
  • Exercise: Which CSS property sets the size of rows in the implicit grid when items overflow the explicit grid?
  • Video class: Learn Flexbox CSS in 8 minutes 08m
  • Exercise: Flexbox alignment with flex-direction: column
  • Video class: Learn CSS BOX MODEL - With Real World Examples 17m
  • Exercise: Which box sizing value makes width and height include padding and border
  • Video class: Learn CSS Variables In 7 Minutes 07m
  • Exercise: Define and use a CSS custom property for a site-wide primary color
  • Video class: Learn CSS Subgrid in 14 minutes 14m
  • Exercise: Which CSS approach makes elements inside sibling grid items align across shared tracks by inheriting them from the parent grid?
  • Video class: You Don't Need JavaScript For This - CSS ONLY Infinite Scroll 23m
  • Exercise: What is the main purpose of assigning each item a unique negative animation-delay in a CSS only infinite horizontal scroll?
  • Video class: 100 CSS Selectors Explained in 20 Minutes 20m
  • Exercise: Which CSS selector targets an element that is immediately after a specified sibling?
  • Video class: Modals Made Easy in 15 Minutes 15m
  • Exercise: After a global reset * { margin: 0; padding: 0; } breaks centering, how do you re-center a dialog element?

This free course includes:

6 hours and 28 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at Web Development

Download the App now to have access to + 3300 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 48 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate

+ 9 million
students

Free and Valid
Certificate

60 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video and ebooks