Where to find a free course about CSS Grid and Flexbox to responsive websites ?

Free online courseCSS Grid and Flexbox to responsive websites

Duration of the online course: 5 hours and 44 minutes

New course

Master responsive web design with free CSS Grid and Flexbox course. Enhance skills in modern, adaptable layouts. Perfect for web development enthusiasts.

Course Description

Dive into the dynamic world of web development with the free online course on CSS Grid and Flexbox by Scrimba, perfect for enhancing your skills in creating responsive websites. Ideal for those looking to explore the intricacies of responsive design, this course offers a detailed exploration of essential techniques and best practices in Web Development.

Begin with understanding the principles of responsive design, exploring responsive CSS tutorials that guide you through CSS units and their applications, such as percentages, ems, and rems. Learn to control image widths and utilize min and max width properties to optimize your designs.

The course advances into an extensive refresher on Flexbox, equipping you with the knowledge to set up HTML, apply basic styles, and configure columns to improve the layout of your web pages. Discover how to space out columns, control flex items' vertical positioning, and use media queries to ensure your layout adapts to various screen sizes.

Progress into mastering navigation through creating, styling, and refining navigation bars that are both aesthetically pleasing and responsive. Examine the broader project structure by setting up feature articles and organizing web page layouts into structured sections. Enrich your designs with techniques for mobile-first thinking, altering visual order, and adjusting image sizes using Flexbox properties and CSS rules.

Conclude your learning journey with CSS Grid, delving into fundamental concepts and advanced implementations. Explore fractional units, repeat functions, positioning items, and template areas to design complex grid layouts. Learn about aligning and justifying content and compare these techniques with Bootstrap for a comprehensive understanding.

This course is your gateway to mastering responsive web design using CSS Grid and Flexbox, allowing you to create modern, adaptable, and visually engaging sites that stand out.

Course content

Video class: 1. Starting to think responsively - Responsive CSS Tutorial

0h03m
Video class: 2 CSS Units - Responsive CSS Tutorial

0h03m
Video class: 3 CSS Units. Percentage - Responsive CSS Tutorial

0h05m
Video class: 4. Controlling the width of images - Responsive CSS Tutorial

0h04m
Video class: 5. min width and max width - Responsive CSS Tutorial

0h02m
Video class: 6. CSS Units. The em unit - Responsive CSS Tutorial

0h05m
Video class: 7. The problem with ems - Responsive CSS Tutorial

0h02m
Video class: 8. The Solution Rems - Responsive CSS Tutorial

0h04m
Video class: 9. Picking which unit to use - Responsive CSS Tutorial

0h03m
Video class: 10. ems and rems an example - Responsive CSS Tutorial

0h07m
Video class: 11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial

0h07m
Video class: 12. Basic Styles and setting up the columns - Responsive CSS Tutorial

0h07m
Video class: 13. Adding the background color - Responsive CSS Tutorial

0h04m
Video class: 14. Setting the columns widths - Responsive CSS Tutorial

0h03m
Video class: 15. Spacing out the columns - Responsive CSS Tutorial

0h04m
Video class: 16. Controlling the vertical position of flex items - Responsive CSS Tutorial

0h05m
Video class: 17. Media Query basics - Responsive CSS Tutorial

0h10m
Video class: 18. Making layout responsive with flex direction - Responsive CSS Tutorial

0h06m
Video class: 19. flex direction explained - Responsive CSS Tutorial

0h03m
Video class: 20. Creating a navigation - Responsive CSS Tutorial

0h04m

This free course includes:

5 hours and 44 minutes of online video course

Exercises to train your knowledge

Certificate of course completion

100% free, from content to certificate

This online course can only be accessed through the Cursa App. Download it using the QR code or the links below:

This online course can only be accessed through the Cursa app. Install it using the links below:

Study for free!

Here you never pay! Not even for the certificate, because everything in the app is 100% free!
Improve your resume!

There are more than 4,000 free courses for you to study anything that interests you!
Free Digital Certificate!

Complete the course and issue your internationally recognized Digital Certificate free of charge.

More free courses at Web Development

Free Course Image JavaScript for beginners

Free CourseJavaScript for beginners

(13)

1h40m

2 exercises

Free CourseUmbraco CMS

4.86

(22)

6h21m

19 exercises

Free Course Image Angular 2 for Beginners

Free CourseAngular 2 for Beginners

4.79

(28)

1h02m

9 exercises

Free Course Image Full Stack Web Development

Free CourseFull Stack Web Development

4.78

(9)

26h16m

48 exercises

Free Course Image Design and code a landing page

Free CourseDesign and code a landing page

4.76

(34)

4h40m

15 exercises

Free CourseJavascript

4.75

(102)

4h52m

46 exercises

Free CourseHTML and CSS

4.74

(31)

9h07m

3 exercises

Free Course Image Web Development for beginners

Free CourseWeb Development for beginners

4.72

(793)

5h21m

30 exercises

Free CoursejQuery

4.71

(14)

9h04m

7 exercises

Free Course Image Learn Full Stack Web Development

Free CourseLearn Full Stack Web Development

4.67

(3)

21h48m

6 exercises

Free Ebook + Audiobooks! Learn by listening or reading!

Complete HTML, CSS and Javascript course to become a Front End Developer

3.22

(9)

125 pages

Complete HTML Course