Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Coursera

CSS Modern Responsive Web Design – Build 5 Websites

Packt via Coursera

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
This course 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 hands-on course is designed to guide you through the process of creating responsive websites using modern CSS techniques. You will learn to build five distinct websites from scratch, applying a variety of layout strategies such as CSS Flexbox, CSS Grid, and Float. With every step, you'll explore different methods of positioning elements, styling text, and creating interactive, user-friendly designs for both mobile and desktop devices. Throughout the course, you will start by learning the fundamentals of CSS, from setting up CSS files and selecting page elements to understanding the CSS Box Model and applying styles to text and images. As you move through the lessons, you will dive into more advanced topics, including building multi-column layouts, creating responsive navigation bars, and adding interactive features like smooth scrolling and collapsible menus. The course will also take you through the process of building five unique websites, giving you practical experience in applying CSS to real-world web design challenges. You will practice creating templates, designing responsive pages, and building fully functional websites with modern features that look great on any device. This course is perfect for anyone looking to build a solid foundation in web design and enhance their skills in creating modern, responsive websites. . Prior experience with HTML and CSS is recommended. By the end of the course, you will be able to create complex layouts using Flexbox and Grid, build responsive navigation, and integrate JavaScript features for a dynamic user experience.

Syllabus

  • CSS Course Information
    • In this module, we will introduce you to the basics of CSS and web design. You will learn how to set up your first CSS file and link it to an HTML document. By the end of this section, you will have a solid understanding of how CSS enhances the presentation of your web pages.
  • Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript
    • In this module, we will provide an overview of the course and introduce you to the essential tools and resources needed to start creating websites from scratch. You’ll learn how to set up your development environment and explore the core technologies that will power your web projects: HTML, CSS, and JavaScript. By the end of this section, you’ll be ready to begin building your own websites with confidence
  • Modern Responsive Websites Using Float and CSS to Create Reusable Grids
    • In this module, we will guide you through the process of creating a modern, responsive single-page website using Float and CSS. You’ll learn how to set up your web development environment, create a website wireframe, and design a reusable grid structure. By the end of this section, you'll have the skills to develop a responsive website with a navigation bar, image gallery, contact form, and other essential sections.
  • Single-Page Flexbox Website with Auto-scroll JavaScript
    • In this module, we will guide you through the creation of a single-page website using Flexbox and JavaScript. You will learn how to set up a webpage with Flexbox, create a responsive navbar, design page cards, and integrate smooth scrolling with JavaScript. By the end of this section, you'll have the skills to build a modern, dynamic single-page website with a smooth, seamless user interface.
  • "No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section
    • In this module, we will walk you through building a responsive website using CSS Grid. You’ll learn how to set up your design with CSS Grid, create a responsive navbar, and ensure it functions without JavaScript. By the end of this section, you will be able to build a fully responsive website with a collapsible navbar and a polished footer, all while mastering CSS Grid layout techniques.
  • JavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website
    • In this module, we will teach you how to build a fully responsive, mobile-ready website using CSS Float and JavaScript. You’ll learn how to set up a dynamic, collapsible navigation menu, add placeholder content, and optimize your website for a seamless user experience. By the end of this section, you’ll have the skills to create a modern, responsive website with an interactive, mobile-friendly navbar and smooth, functional layout.
  • CSS Flexbox Website with Responsive Navbar Sub-Menu Items
    • In this module, we will guide you through the creation of a complex, responsive navbar using CSS Flexbox. You will learn how to design mobile-first websites, implement multi-layered sub-menus, and integrate JavaScript for navbar interactivity. By the end of this section, you will be able to build a fully functional, interactive navbar with responsive sub-menus, making your websites both user-friendly and visually appealing.

Taught by

Packt - Course Instructors

Reviews

Start your review of CSS Modern Responsive Web Design – Build 5 Websites

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.