We may earn an affiliate commission when you visit our partners.

Hands-on Responsive Web Design 3

Columns, Flexbox, and Grids

This course will teach you how to implement multiple column layouts using standard divisions, Flexbox, and CSS Grids. You'll also examine CSS shapes for interesting text wrapping.

At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, and SASS. In this course, Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids, you'll learn the skills you need to layout a page using standard divisions and CSS, as well as newer technologies like Flexbox and CSS Grids. First, you'll discover how to automate this process by leveraging the power of SASS operators. Next, you'll explore how to use CSS shapes to create text wrapping. Finally, you'll delve into using CSS Grids for the overall page layout. By the end of this course, you'll have a mobile music player app project that adapts to vertical or horizontal orientation of mobile screens.

Enroll now

Or start your subscription today

And complete this course over a free trial

Here's a deal for you

We found an offer that may be relevant to this course.

Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Valid for a limited time only

Future-proof your career

Access O'Reilly books, live events, courses, and more. Save with an annual subscription.

Take

15%

off

What's inside

Syllabus

Course Overview

Introduction

Twelve Column Grid

CSS Shapes

Flexbox

CSS Grid

Music Player Project

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops practical skills in using modern CSS layout techniques for responsive design

Taught by recognized industry expert Paul Cheney

Covers key industry-standard layout techniques

Provides hands-on project to apply learning

Suitable for learners with some experience in HTML, CSS, and SASS

Course material uses older versions of CSS software (last updated 2019)

Save this course

Save Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids to your list so you can find it easily later:

Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids with these activities:

Review the basics of HTML and CSS

Show steps

Reviewing the basics of HTML and CSS will help you to better understand the concepts that will be covered in this course.

Browse courses on HTML

Show steps

Go through online tutorials on HTML and CSS.
Complete practice exercises on HTML and CSS.

Join a study group or online forum

Show steps

Joining a study group or online forum will allow you to connect with other students and learn from each other.

Browse courses on Responsive Web Design

Show steps

Find a study group or online forum that is focused on the topics that you are interested in.
Participate in discussions and ask questions.
Help other students with their questions.

Follow tutorials on Flexbox and CSS Grids

Show steps

Following tutorials on Flexbox and CSS Grids will help you to learn how to use these technologies to create responsive layouts.

Browse courses on Flexbox

Show steps

Find a tutorial on Flexbox and CSS Grids that is appropriate for your level of experience.
Follow the steps in the tutorial to create a responsive layout.
Experiment with different values for the Flexbox and CSS Grid properties to see how they affect the layout.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Complete exercises on creating responsive layouts

Show steps

Completing exercises on creating responsive layouts will help you to practice your skills and improve your understanding of the concepts.

Browse courses on Responsive Web Design

Show steps

Find a set of exercises on creating responsive layouts that is appropriate for your level of experience.
Complete the exercises in the set.
Check your answers against the provided solutions.

Create a simple music player app

Show steps

Creating a simple music player app will help you to apply the concepts that you have learned in this course to a real-world project.

Browse courses on Responsive Web Design

Show steps

Plan the layout of your app.
Create the HTML and CSS for your app.
Add functionality to your app, such as the ability to play and pause music.
Test your app on different devices and screen sizes.

Write a blog post about your experience with the course

Show steps

Writing a blog post about your experience with the course will help you to reflect on what you have learned and share your knowledge with others.

Browse courses on Responsive Web Design

Show steps

Brainstorm ideas for your blog post.
Write an outline for your blog post.
Write the first draft of your blog post.
Edit and revise your blog post.
Publish your blog post.

Mentor a junior developer

Show steps

Mentoring a junior developer will help you to solidify your understanding of the concepts that you have learned and to develop your leadership skills.

Browse courses on Responsive Web Design

Show steps

Find a junior developer who is interested in learning about the topics that you are familiar with.
Set up a regular meeting time with your mentee.
Provide your mentee with guidance and support.
Track your mentee's progress and provide feedback.

Career center

Learners who complete Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids will develop knowledge and skills that may be useful to these careers:

Web Designer

Web Designers create the visual appearance of websites and applications. They work with clients to understand their needs and create designs that are both visually appealing and functional. Web Designers need a strong understanding of HTML5, CSS3, and JavaScript. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids provides a strong foundation for Web Designers as it emphasizes a deep understanding of CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Web Designer

Front-End Developer

Front-End Developers are responsible for the website's client-side, or what the user sees and interacts with. They create the layouts, images, and interactive elements that make up the user interface. As a Front-End Developer, you will help implement web designs using HTML5, CSS3, and JavaScript. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids places an emphasis on CSS syntax, which is necessary to become a Front-End Developer.

See salaries and explore the career path for Front-End Developer

Full-Stack Developer

Full Stack Developers are responsible for both the front-end and back-end development of websites and applications. They work on both the client-side and server-side, ensuring websites are functional and visually appealing. Full Stack Developers need a strong understanding of HTML5, CSS3, JavaScript, and server-side programming languages. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids focuses on developing proficiency with CSS syntax, which is necessary to become a Full Stack Developer.

See salaries and explore the career path for Full-Stack Developer

Web Developer

A Web Developer implements and maintains websites and applications. In your role, you will ensure that websites are accessible, user-friendly, and visually appealing. As a Web Developer, strong knowledge of HTML5, CSS3, and JavaScript is highly sought after. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids focuses on perfecting CSS syntax. This helps build a strong foundation for web developers who have an interest in responsive design.

See salaries and explore the career path for Web Developer

UX Designer

UX Designers focus on the user experience of websites and applications. They conduct user research to understand how users interact with products and use this information to create designs that are easy to use and navigate. UX Designers help ensure that websites are user-friendly and accessible. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids provides a foundation for UX Designers as it emphasizes a deep understanding of CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for UX Designer

UI Designer

UI Designers determine the look and feel of websites and applications. They create prototypes and mockups to demonstrate how the final product will appear to users. UI Designers are responsible for making sure that websites are user-friendly and visually appealing. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids focuses on learning CSS syntax to implement visual elements. This can help you become a UI Designer.

See salaries and explore the career path for UI Designer

Art Director

Art Directors oversee the visual style and concepts of a variety of projects, including websites, advertisements, and marketing campaigns. They work with a team of designers, photographers, and illustrators to create a cohesive visual identity for a brand. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to an Art Director, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Art Director

Graphic designer

Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. They develop the overall layout and production design of applications, brochures, magazines, and other materials. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to a Graphic Designer, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Graphic designer

Creative Director

Creative Directors oversee the creative vision of a company or organization. They develop and execute marketing campaigns, advertising campaigns, and other creative projects. Creative Directors work with a team of designers, writers, and other creatives to ensure that all creative output is consistent with the company's brand identity. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to a Creative Director, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Creative Director

Product Manager

Product Managers are responsible for the development and launch of new products and features. They work with a team of engineers, designers, and marketers to ensure that products meet the needs of customers. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to a Product Manager, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Product Manager

Project Manager

Project Managers plan and execute projects from start to finish. They work with a team of project stakeholders to ensure that projects are completed on time, within budget, and to the required quality standards. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to a Project Manager, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Project Manager

Marketing Manager

Marketing Managers develop and execute marketing campaigns to promote products and services. They work with a team of marketers to create and implement marketing strategies, including advertising, public relations, and social media marketing. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to a Marketing Manager, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Marketing Manager

Data Analyst

Data Analysts collect, analyze, and interpret data to help businesses make better decisions. They use statistical methods and data visualization techniques to identify trends and patterns. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to a Data Analyst, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Data Analyst

Software Engineer

Software Engineers design, develop, and maintain software systems. They work with a team of engineers to create and implement software solutions. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to a Software Engineer, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Software Engineer

Business Analyst

Business Analysts work with businesses to identify and solve problems. They use data analysis and other techniques to understand business needs and develop solutions. Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids may be useful to a Business Analyst, as it provides a foundation in CSS syntax, which is used to implement visual elements in websites and applications.

See salaries and explore the career path for Business Analyst

Reading list

We've selected ten books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids.

The 2022 Web Almanac

Save

Is the most comprehensive guide to CSS Grid Layout available. It covers everything you need to know to use this technology to create complex layouts.

Hands-on Responsive Web Design 3

Columns, Flexbox, and Grids

Here's a deal for you

What's inside

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses