Advanced Web Layouts

Overview

In this final course of the Web Development for Beginners specialization, we’ll review new approaches for designers and developers to create and control the flow of content on web pages. We’ll review advanced uses of CSS grid, and explore creative ways grid has been implemented on websites in recent years. You’ll practice to build your fluency with challenges and techniques learned throughout the course, and work with advanced features of CSS Flexbox properties to create web layouts. Lastly, we’ll explore how artificial intelligence will affect design and web development in the near-term future, and provide some guidance around using those tools effectively.

Syllabus

CSS Grid

Welcome to the course! In this module, we will start by reviewing the different ways in which designers and developers can create and control the flow of content on web pages. In other words, how the content on the page is laid out. We will see how these different systems of layout use different CSS properties to tell the browser how to display content on the page. Then we will dive specifically into the basics of CSS Grid and explore the properties that make this system work.

Advanced Grid Examples

Welcome to the second module of this course. In this module, you will review some more advanced uses of CSS grid, and explore some of the creative ways grid has been implemented on websites in recent years. You will also work on some challenges that will help you practice and become familiar with the techniques discussed in this module.

Flexbox Part 3 & Positioning

In this module, you will learn about some more advanced features of the CSS Flexbox properties and how you can control the use of space in a row or a column, particularly when you are unsure of how large the viewport will be. You will also learn about positioning in this module, and how that layout system can be used in combination with the other tools in your toolkit to create complex web layouts. Along the way, you will get lots of practice with these techniques and see plenty of examples you can use in your own web projects.

Example Project

Welcome to the final module of our course. In this module you will learn about a few more techniques that will help you create web layouts. Then we will wrap up the course by talking about what's next to learn and ways in which you can utilize the skills you have learned in this course. We will also explore some ideas about how artificial intelligence will affect design and web development in the short term future, and provide some guidance around using those tools effectively