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

CSS

Free online courses on CSS

Discover the Power of Styling with Free Online CSS Courses

Unlock the full potential of web design with our comprehensive listing of free online CSS courses. Whether you're a beginner looking to understand the basics or an experienced developer aiming to refine your skills, our selection offers something for everyone. Dive into the world of Cascading Style Sheets (CSS) and learn how to create visually stunning and responsive websites with ease.

Beginner-Friendly CSS Courses

Starting your journey into web development? Our beginner-friendly CSS courses are the perfect starting point. Learn the fundamentals of CSS, including syntax, selectors, and properties. Understand how to integrate CSS with HTML to style text, layout pages, and manage basic interactivity. With step-by-step tutorials and hands-on projects, you'll be able to build a solid foundation in no time.

Intermediate CSS Techniques

Ready to elevate your CSS knowledge? Explore our intermediate courses where you can learn about advanced selectors, animation, and responsive design. Discover how to use CSS frameworks like Bootstrap to speed up your workflow, and delve into pre-processors like SASS to enhance your styling capabilities. These courses will help you create more complex and dynamic websites with confidence.

Responsive Web Design

With the rise of mobile devices, responsive web design has become a crucial skill for any web developer. Our free courses cover the latest techniques for making your website look great on any screen size. Learn about media queries, flexible grid layouts, and responsive images to ensure your projects are mobile-friendly and accessible to all users.

CSS Grid and Flexbox

Master the modern layout modules of CSS Grid and Flexbox through our targeted courses. These powerful tools offer a new level of control over page layouts, allowing for complex designs that are both scalable and maintainable. Through practical examples, you'll understand how to harness these features to build sophisticated layouts with minimal effort.

Advanced CSS Topics

For those looking to push the boundaries of CSS, our advanced courses delve into cutting-edge features and optimization techniques. Learn about CSS variables, custom properties, and blend modes to create dynamic, themeable interfaces. Study performance best practices to ensure your websites are fast and efficient. By the end of these courses, you'll be equipped to tackle any styling challenge that comes your way.

Animation and Transitions

Add life to your web pages with CSS animations and transitions. Our courses guide you through the process of creating engaging and interactive user experiences. From simple hover effects to complex keyframe animations, you'll learn how to make your designs stand out and keep users engaged.

CSS Best Practices

Writing maintainable and scalable CSS is essential for any large project. Our courses on CSS best practices will teach you how to organize and structure your stylesheets effectively. Learn about methodology like BEM (Block, Element, Modifier) and SMACSS (Scalable and Modular Architecture for CSS) to keep your CSS clean and easy to manage, even on the largest of websites.

With our curated list of free online CSS courses, you're on the right path to becoming a proficient web designer or developer. Start learning today and take the first step towards mastering the art of styling for the web.

Responsive Web Design

Free online courses on Responsive Web Design

Explore Free Responsive Web Design Courses for Effective Web Development Skills

Discover the best free online courses designed to boost your skills in Responsive Web Design, a crucial subcategory of Web Development. Enhance your ability to create visually appealing and device-friendly websites optimized for desktops, tablets, and smartphones. Dive into the essential techniques and industry best practices that effective web developers use every day.

Our carefully-selected Responsive Web Design course list includes top-notch instruction that allows you to learn HTML and CSS techniques for designing fully responsive and mobile-friendly websites—completely free.

  • Build a Responsive Website with HTML and CSS by Kevin Powell: Learn the fundamentals of responsive web design and create professional-looking websites in this comprehensive free course taught by industry professional Kevin Powell. Master layout, design principles, and responsive techniques that ensure your website looks phenomenal on any device.

Whether you're a beginner aspiring to start your journey in web development or a seasoned developer looking to refresh your skills in responsive design, this free course list has something for you. Learn at your own pace and build a robust web development skillset.

Boost your career potential, and conquer web development challenges with confidence. Enroll today in these free responsive web design courses and begin your path towards professional excellence!

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

QR Code - Baixar Cursa - Cursos Online

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

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