VOOZH about

URL: https://www.coursera.org/learn/packt-build-real-world-websites-using-html5-css3-flexbox-grid-and-sass-w6iuk

⇱ Build Real-World Websites Using HTML5, CSS3, Sass and more | Coursera


Build Real-World Websites Using HTML5, CSS3, Sass and more

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

Build Real-World Websites Using HTML5, CSS3, Sass and more

Included with

Ask Coursera

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week 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

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

What you'll learn

  • Identify the key structural elements of a website

  • Demonstrate how to embed an external video into a website

  • Construct a simple login form using HTML

  • Differentiate between various types of CSS positioning

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 assignments

Taught in English

There are 4 modules in this course

Updated in May 2025.

This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. This course takes you from the basics of HTML and CSS to advanced web development techniques, empowering you to build professional and responsive websites. You’ll start with the essentials, creating your first website while learning key concepts like HTML structure, headings, paragraphs, links, images, and forms. Alongside this, you'll master CSS to style your web pages, ensuring they look polished and professional. As the course progresses, you will dive into more sophisticated styling techniques using Flexbox, CSS Grid, and Sass. These tools allow you to create flexible layouts, align content effectively, and handle responsive design challenges. You'll also engage with projects, including creating an Amazon checkout page, a photo gallery, and a mathematics tutorial website, all while applying your newfound Flexbox and Grid skills. By the end of the course, you'll be able to structure, style, and host fully responsive websites. With projects designed to challenge and build your skills, you’ll gain a strong foundation in modern web design principles. Sass will also be introduced to help streamline your CSS workflow, allowing for more efficient and maintainable code. This course is perfect for beginners and intermediate web developers, hobbyists, and anyone interested in creating websites from scratch. No prior experience is required, but basic computer literacy is recommended.

In this module, we will start with the basics of web development, introducing you to HTML. You’ll learn to create your first website and share it with the world through free web hosting. You’ll also explore various HTML elements, from text to multimedia, to enhance your website’s structure.

What's included

22 videos1 reading

22 videosTotal 140 minutes
  • Introduction2 minutes
  • Structure of a Website9 minutes
  • Your First Website6 minutes
  • Get Your Free Unlimited Web Hosting9 minutes
  • Share Your Website with the World7 minutes
  • Share Your Website with the World - Cyberduck Version13 minutes
  • Share Your Website with the World - FileZilla Version16 minutes
  • Headings5 minutes
  • Paragraphs2 minutes
  • Links7 minutes
  • Images4 minutes
  • Inline Versus Block Elements6 minutes
  • iframes - Activity: Embed a Nice Relaxing YouTube Video to Your Website5 minutes
  • Unordered Lists3 minutes
  • Ordered Lists2 minutes
  • Description Lists2 minutes
  • Tables4 minutes
  • Entities5 minutes
  • Forms Part 1 - Activity: Create a Simple Login Form8 minutes
  • Forms Part 2 - Activity: Create a Marketplace Checkout Form20 minutes
  • Text Decoration4 minutes
  • Comments2 minutes
1 readingTotal 10 minutes
  • Full Course Resources10 minutes

In this module, we will dive into CSS, the language responsible for the look and feel of your website. You’ll learn different methods to apply styles, control layouts, and add stunning visual effects. By mastering these concepts, you’ll be able to create visually appealing, responsive web designs.

What's included

28 videos1 assignment

28 videosTotal 129 minutes
  • Introduction1 minute
  • Inline CSS2 minutes
  • Internal CSS2 minutes
  • External CSS2 minutes
  • Classes and IDs3 minutes
  • Div and Span7 minutes
  • Box Model3 minutes
  • Box Model Padding4 minutes
  • Box Model: Border6 minutes
  • Box Model: Outline2 minutes
  • Box Model: Margin2 minutes
  • Background7 minutes
  • Floating4 minutes
  • Positioning6 minutes
  • Display3 minutes
  • Text Decoration5 minutes
  • Text Align2 minutes
  • Text Font4 minutes
  • Text Effects8 minutes
  • Image Sprites5 minutes
  • Image Opacity3 minutes
  • Styling Lists8 minutes
  • Styling Links7 minutes
  • Gradients10 minutes
  • 2D Transforms6 minutes
  • 3D Transforms5 minutes
  • Transitions5 minutes
  • Animations9 minutes
1 assignmentTotal 15 minutes
  • Assessment 115 minutes

In this module, we will put your HTML and CSS skills to the test by building a full-fledged mathematics tutorial website. You’ll design key website sections, such as headers, menus, and footers, while learning how to style each element for a professional look and feel.

What's included

8 videos

8 videosTotal 99 minutes
  • Introduction2 minutes
  • Header - Part 118 minutes
  • Header - Part 216 minutes
  • Menu18 minutes
  • Introduction Box7 minutes
  • Sidebars - Part 120 minutes
  • Sidebars - Part 28 minutes
  • Footer and Congratulations10 minutes

In this module, we will explore advanced CSS concepts such as Flexbox and Grid to create dynamic, responsive websites. You will also learn to optimize your CSS code using Sass, a powerful preprocessor that enhances code organization and reusability for large-scale projects.

What's included

26 videos3 assignments

26 videosTotal 349 minutes
  • Flexbox: Introduction4 minutes
  • Flexbox: Basic Flexbox16 minutes
  • Flexbox: Align Flex Items16 minutes
  • Flexbox: Align Flex Lines7 minutes
  • Flexbox: Resize Flex Items - Part 119 minutes
  • Flexbox: Resize Flex Items - Part 215 minutes
  • Flexbox Application: Photo Gallery - Part 19 minutes
  • Flexbox Application: Photo Gallery - Part 212 minutes
  • Flexbox Application: Amazon Checkout - Part 119 minutes
  • Flexbox Application: Amazon Checkout - Part 218 minutes
  • Flexbox Application: Amazon Checkout - Part 311 minutes
  • Flexbox Application: Math Website - Part 113 minutes
  • Flexbox Application: Math Website - Part 211 minutes
  • Flexbox Application: Math Website - Part 313 minutes
  • CSS Grid: Introduction and Basic Grid Template19 minutes
  • CSS Grid: Implicit Versus Explicit Grid8 minutes
  • CSS Grid: Grid Areas and Responsive Design14 minutes
  • CSS Grid: Master the "grid-column" Property8 minutes
  • CSS Grid: Grid Coordinates17 minutes
  • CSS Grid: Align Grid Items13 minutes
  • CSS Grid Application: Photo Gallery9 minutes
  • CSS Grid Application: Picture Grid9 minutes
  • Sass: Introduction - Installation - Nesting Syntax20 minutes
  • Sass: .scss Versus .sass - Variables14 minutes
  • Sass: @import and @extend Directives16 minutes
  • Sass: Mixins - Operators - Functions20 minutes
3 assignmentsTotal 90 minutes
  • Full Course Practice Assessment15 minutes
  • Assessment 215 minutes
  • Full Course Assessment60 minutes

Instructor

Offered by

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

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

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,