VOOZH about

URL: https://www.coursera.org/learn/creating-basic-web-layouts

⇱ Creating Basic Web Layouts | Coursera

Creating Basic Web Layouts

Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Gain insight into a topic and learn the fundamentals.
Intermediate level
Some related experience required
2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace
Gain insight into a topic and learn the fundamentals.
Intermediate level
Some related experience required
2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 assignments

Taught in English

Build your subject-matter expertise

This course is part of the Web Development for Beginners Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate

There are 4 modules in this course

In this course, we’ll explore the history of layout on the web and techniques that have been used to create those layouts. You’ll practice using Flexbox CSS and gain an understanding of how Flexbox works to create layouts for web pages. We’ll practice using responsive web design and discuss the challenges of managing layouts across multiple screen sizes. You’ll learn specific techniques to build a responsive web page and practice using mobile first development. Lastly, you’ll apply the techniques learned in this course by using Flexbox properties to create a mini portfolio website and deploy it on GitHub.

Welcome to the course! In this module, we will start exploring the history of layout on the web. By layout, I mean specifically how the visual space of the webpage can be used, and how different elements can be arranged within that space. We will discuss the history of techniques that have been used to create layouts on the web, and dive into the complexities and challenges associated with creating layouts on the web. Let's get started!

What's included

13 videos5 readings1 assignment4 discussion prompts

13 videos•Total 97 minutes
  • Course Introduction•3 minutes
  • Module Introduction•2 minutes
  • Web Layout History, Part 1•9 minutes
  • Web Layout History, Part 2•8 minutes
  • Web Layout History, Part 3•11 minutes
  • Web Layout History, Part 4•8 minutes
  • Box Model, Part 1•7 minutes
  • Box Model, Part 2•7 minutes
  • Box Model, Part 3•4 minutes
  • Box Model, Part 4•10 minutes
  • Display Property Basics, Part 1•10 minutes
  • Display Property Basics, Part 2•7 minutes
  • Display Property Basics, Part 3•11 minutes
5 readings•Total 41 minutes
  • Course Navigation and Safety Statement•1 minute
  • The Wax and the Wane of the Web•10 minutes
  • Box Model Files•10 minutes
  • Display Property Basics Files•10 minutes
  • Digging Into the Display Property: Box Generation•10 minutes
1 assignment•Total 35 minutes
  • Module 1 Quiz•35 minutes
4 discussion prompts•Total 60 minutes
  • Learning Goals•15 minutes
  • Box Model (Optional)•15 minutes
  • Display Property Basics (Optional)•15 minutes
  • Module 1 Discussion•15 minutes

Welcome to the second lesson in our course on basic web layout. In this lesson you will learn about and practice a limited set of initial features that accompany the flexbox CSS layout module. You will create simple layouts using these features and get a hint of what is to come, as we get deeper into understanding how flexbox works to help us create layouts for our web pages.

What's included

15 videos2 readings1 assignment3 discussion prompts

15 videos•Total 86 minutes
  • Module Introduction•2 minutes
  • Flexbox, Part 1.1•3 minutes
  • Flexbox, Part 1.2•6 minutes
  • Flexbox, Part 1.3•9 minutes
  • Flexbox, Part 1.4•5 minutes
  • Flexbox, Part 1.5•11 minutes
  • Flexbox Challenge 1 Intro•3 minutes
  • Flexbox Challenge 1 Answer & Challenge 2 Intro•2 minutes
  • Flexbox Challenge 2 Answer & Challenge 3 Intro•3 minutes
  • Flexbox Challenge 3 Answer & Challenge 4 Intro•5 minutes
  • Flexbox Challenge 4 Answer & Challenge 5 Intro•6 minutes
  • Flexbox Challenge 5 Answer & Challenge 6 Intro•5 minutes
  • Flexbox Challenge 6 Answer & Challenge 7 Intro•7 minutes
  • Flexbox Challenge 7 Answer & Challenge 8 Intro•6 minutes
  • Flexbox Challenge 8 Answer•13 minutes
2 readings•Total 20 minutes
  • Flexbox, Part 1 Files•10 minutes
  • Flexbox Challenge Files•10 minutes
1 assignment•Total 45 minutes
  • Module 2 Quiz•45 minutes
3 discussion prompts•Total 45 minutes
  • Flexbox, Part 1 (Optional)•15 minutes
  • Flexbox Challenge (Optional)•15 minutes
  • Module 2 Discussion•15 minutes

Welcome to the third lesson in our course on basic web layout. In this lesson you will learn about responsive web design, including how the term was coined and the history associated with the challenges of managing layouts across many possible screen sizes. You will learn specific techniques that you can use to build a responsive web page. We will discuss mobile first development and why it is important to make your designs work on the smallest, least capable devices first, then progressively enhance those designs for users with larger screens and more resources.

What's included

17 videos4 readings1 assignment3 discussion prompts

17 videos•Total 101 minutes
  • Module Introduction•1 minute
  • Responsive Design, Part 1•6 minutes
  • Responsive Design, Part 2•7 minutes
  • Responsive Design, Part 3•9 minutes
  • Responsive Design, Part 4•7 minutes
  • Responsive Design, Part 5•3 minutes
  • Responsive Design, Part 6•7 minutes
  • Responsive Design, Part 7•6 minutes
  • Responsive Design, Part 8•8 minutes
  • Responsive Design, Part 9•8 minutes
  • Responsive Design, Part 10•8 minutes
  • Responsive Design, Part 11•6 minutes
  • Mobile First Responsive Example, Part 1•7 minutes
  • Mobile First Responsive Example, Part 2•5 minutes
  • Mobile First Responsive Example, Part 3•2 minutes
  • Mobile First Responsive Example, Part 4•9 minutes
  • Common Sense CSS Resets•4 minutes
4 readings•Total 60 minutes
  • Responsive Design Files•10 minutes
  • Responsive Design Historical Readings•30 minutes
  • Mobile First Response Files•10 minutes
  • Common Sense CSS Resets File•10 minutes
1 assignment•Total 45 minutes
  • Module 3 Quiz•45 minutes
3 discussion prompts•Total 45 minutes
  • Responsive Design (Optional)•15 minutes
  • Mobile First Responsive Example (Optional)•15 minutes
  • Module 3 Discussion•15 minutes

Welcome to the fourth lesson in our course on basic web layout. In this lesson you will learn about more of the flexbox properties that will help you create a variety of web layouts. This set of properties compliments the techniques learned in the previous lesson about responsive design, as they will help you further control the design of your website across a wide variety of screen sizes. At the end of this module, you will have the opportunity to use everything you have learned to create a simple, mini portfolio website and deploy it to GitHub to share with your friends, family and colleagues.

What's included

18 videos4 readings1 assignment5 discussion prompts

18 videos•Total 113 minutes
  • Module Introduction•1 minute
  • Flexbox, Part 2.1•4 minutes
  • Flexbox, Part 2.2•7 minutes
  • Flexbox, Part 2.3•6 minutes
  • Flexbox, Part 2.4•5 minutes
  • Flexbox, Part 2.5•8 minutes
  • Flexbox Challenge 9 Intro•1 minute
  • Flexbox Challenge 9 Answer & Challenge 10 Intro•3 minutes
  • Flexbox Challenge 10 Answer & Challenge 11 Intro•4 minutes
  • Flexbox Challenge 11 Answer & Challenge 12 Intro•4 minutes
  • Flexbox Challenge 12 Answer & Challenge 13 Intro•3 minutes
  • Flexbox Challenge 13 Answer•5 minutes
  • Flexbox Layout Challenges 1-3 Introduction•3 minutes
  • Flexbox Layout Challenge 1 Answer•8 minutes
  • Flexbox Layout Challenge 2 Answer•13 minutes
  • Flexbox Layout Challenge 3 Answer•15 minutes
  • Putting it all Together: Mini Portfolio Project•21 minutes
  • Course Summary•1 minute
4 readings•Total 40 minutes
  • Flexbox, Part 2 Files•10 minutes
  • Flexbox Challenge Files•10 minutes
  • Flexbox Layout Challenge Files•10 minutes
  • Mini Portfolio Files•10 minutes
1 assignment•Total 45 minutes
  • Module 4 Quiz•45 minutes
5 discussion prompts•Total 75 minutes
  • Flexbox, Part 2 (Optional)•15 minutes
  • Flexbox Challenge (Optional)•15 minutes
  • Flexbox Layout Challenge (Optional)•15 minutes
  • Module 4 Discussion•15 minutes
  • Self-Reflection•15 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

University of California, Davis
8 Courses•328,197 learners

Explore more from Mobile and Web Development

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,