Guided Website Development Project

Guided Website Development Project

This course is part of Front-End Web Development for Beginners Specialization

Instructor: University of Washington Team

Access provided by NMIMS Indore

4 modules

Gain insight into a topic and learn the fundamentals.

Beginner level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Beginner level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

This course isn’t just about building a website—it’s about discovering what you’re truly capable of as a front-end developer.

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

1 assignment¹

AI Graded see disclaimer

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Front-End 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

This course is where things get real. This is your chance to put all those HTML, CSS, and responsive design skills to work on a project that simulates the real deal—a professional website for a client. Imagine you’re a freelance developer, hired to create a site from scratch. You’ll start by diving into client requirements, mapping out user stories, and building a structure that brings the client’s vision to life. From there, it’s all about rolling up your sleeves and making the magic happen with the tools and techniques you’ve mastered.

But here’s the kicker: this isn’t just a follow-the-instructions project. It’s guided, yes, but we want you to get creative, push boundaries, and explore beyond what’s covered. Plus, you’ll learn how smart developers collaborate with AI to streamline workflows and spark new ideas. Your project will also be peer-reviewed, so you’ll get valuable feedback and see how other people tackled the same challenge. At the finish line, you’ll have a multi-page website ready to wow clients and beef up your portfolio. This course is your chance to prove you’re not just learning web dev—you’re living it.

In this first module, you will begin your capstone project by learning about the goals and expectations. You will study the steps involved in a web project, including how to define the purpose of your website using user stories and planning. You will examine the content, style guide, and assets provided by the client for the Archery website. This module focuses on careful planning before coding, ensuring you are ready to build an effective and user-friendly website.

What's included

9 readings1 peer review1 discussion prompt

9 readings Total 105 minutes

About this Course 5 minutes
Welcome to the Capstone Project: Building an Archery Website 10 minutes
Email from Giap 5 minutes
Email: Subject: Re: Website Content for Straight to the Point Archery 5 minutes
Analyzing Project Requirements 10 minutes
Defining User Stories 10 minutes
Designing the Information Architecture 20 minutes
Email from Designer 20 minutes
Combining Information Design with Graphic Design 20 minutes

1 peer review Total 60 minutes

User Stories & Wireframes 60 minutes

1 discussion prompt Total 10 minutes

Welcome to the Project 10 minutes

This module focuses on setting up your development environment and starting to build your website. You will initialize your project with proper version control using Git and GitHub. You will build the basic HTML framework, including the header, navigation, hero section, and overall content layout. The emphasis is on using semantic HTML and organizing content effectively, based on your earlier planning.

What's included

13 readings

13 readings Total 85 minutes

Setting Up Your Project Structure 5 minutes
Initializing Git Version Control 5 minutes
Connecting to GitHub 5 minutes
Creating the HTML Boilerplate 5 minutes
Using Semantic HTML5 Elements 5 minutes
Building the Header and Navigation 5 minutes
Creating the Hero Section 5 minutes
Organizing Content Based on User Stories 5 minutes
Developing the Classes Section 10 minutes
Building the Instructors Section 10 minutes
Crafting the About Us Section 10 minutes
Setting up the Contact Page 10 minutes
Using User Stories to Guide Content 5 minutes

In this module, you will transform your HTML structure into a visually appealing and interactive website. You will apply styles from the provided style guide, use advanced CSS for layout and design, and enhance your site with custom fonts, icons, and images. You will also add interactive elements to improve user engagement and ensure your website is accessible to everyone, following best practices.

What's included

19 readings

19 readings Total 230 minutes

Setting Up Your CSS Stylesheet 5 minutes
Implementing the Color Scheme 15 minutes
Applying Typography Styles 15 minutes
Incorporating Design Elements 20 minutes
Testing and Refining Your Styles 5 minutes
Implementing Flexbox and CSS Grid 20 minutes
Using CSS Grid for Page Layouts 10 minutes
Ensuring Consistency Across Pages 15 minutes
Testing Responsiveness 5 minutes
Incorporating Images 15 minutes
Using Font Awesome Icons 15 minutes
Optimizing Images for Web Performance 5 minutes
Enhancing Accessibility with Images 5 minutes
Integrating Backgrounds and Patterns 10 minutes
Implementing Hover Effects 15 minutes
Adding CSS Transitions and Animations 10 minutes
Enhancing Accessibility with Skip Links 15 minutes
Ensuring Overall Accessibility 10 minutes
Optimizing Images for Responsive Design 20 minutes

The final module is dedicated to refining your website for a professional finish. You will test and debug your site across different browsers and devices to ensure it works correctly and performs well. You will finalize content and design decisions, possibly revisiting earlier choices based on testing results. You will deploy your website using GitHub Pages, making it live on the internet. Finally, you will reflect on your development journey, document your process, and identify areas for future growth.