Use your knowledge of Bootstrap, documentation reading skills, and creative lens to create a website!

Adhoc

In this project, we're going to practice animation in Sass so you can hone your skills and feel confident taking them to the real world.
Why? No modern website is complete without a little bit of animation.

Animated Company Logo

In this project, we're going to practice element positioning in CSS so you can hone your skills and feel confident taking them to the real world.
Why? Applying the display and position properties on a certain element is something you'll be doing plenty of with CSS, so exploring and practicing it now will help you a lot.

Broadway

Build a style guide for your web projects, including custom fonts, colors, text styles, and more.

Challenge Project: Build a Website Design System

In this project, you'll use flexbox to design the layout for a company of your choosing.

Challenge Project: Company Home Page with Flexbox

Utilize your Responsive Design knowledge to create your ideal MeetUp group! Your page should look clean and crisp - regardless of the screen size!

Challenge Project: Responsive Club Website

Update a blog to meet common CSS accessibility standards.

Code! Blog

Use the iterative design process to strategically improve a fictional navigation app. Complete tasks related to research, ideation, prototyping, and testing.  

Comet Revamp: Iterating on Products

In this project, you'll practice creating a research plan and writing a test script for user testing.  

Create Your Own User Testing Plan

Use your knowledge of logic gates to create a circuit that computes the sum of binary digits.

Creating an Adder Circuit

In this project, we're going to practice Positioning in CSS so you can hone your skills and feel confident taking them to the real world.
Why? Proficiency in the positioning of elements on your web page, specifically overlapping, will prove very useful with building projects in CSS.

CSS Grid: Architecture Blog

In this project, we're going to practice organization in CSS so you can hone your skills and feel confident taking them to the real world.
Why? You'll need to get comfortable with defining columns and rows and controlling the elements within them in order to build beautiful websites.

CSS Grid: Task Board

Create various themes and reactive elements for a bird-watching website using CSS variables and functions.


Curious Ornithologist

It's time to build fluency in HTML Fundamentals. In this next project, we're going to practice Structure in HTML so you can hone your skills and feel confident taking them to the real world.
Why? This project will help you to understand and master the building blocks of a webpage. It'll all build up from these foundations.  What's next? A blogger, a developer, a stylish website. You got this! 

Fashion Blog

Set the Flexbox properties for a to-do app.

Flexbox: To-Do App

Use your knowledge of HTML forms to collect input users and put a spin on a classic story! 

Form a Story

Add breadcrumbs to an online grocery store.

FreshDeals: Blueberries

Using CSS selectors, you’ll give a recipe website style.

Healthy Recipes

In this project, you'll use the knowledge you gained from the color theory lesson and apply colors to a website.

Journey Around the World

Compose an impactful evaluative survey for a job search platform. Analyze survey data to
identify how the platform may be improved to better address user needs.

Listening Research Methods: Evaluative Survey

Create a blog about New York City using various semantic elements to show off how amazing the Big Apple is!

New York City Blog

In this project, you'll build a simple website for a fictional arts and crafts store using the tools on your own computer.

Off-Platform Project: Dasmoto's Arts & Crafts

Create a web page which advertises a product called "Excursion" using HTML, CSS, Command Line Interface, Git, and GitHub.

Off-Platform Project: Excursion

Create a fictional tea store on your computer using image assets and a design spec.

Off-Platform Project: Tea Cozy

In this project, we're going to practice Visual Rules in CSS so you can hone your skills and feel confident taking them to the real world.
Why? It's important to have a good grasp on the basic styling principles of a webpage.

Olivia Woodruff Portfolio

In this project, we're going to practice design in CSS so you can hone your skills and feel confident taking them to the real world.
Why? You'll feel comfortable with the various forms of color representation in CSS. 

Paint Store

For this project, you'll apply the knowledge gained from the Color For UI lesson and update an e-commerce checkout page to ensure the user is aware of different actions, errors, and other elements on the screen.

Pinpoint E-Commerce

In this next project, we're going to practice Grid Positioning in CSS so you can hone your skills and feel confident taking them to the real world.
Why? Using CSS grid allows you to conveniently organize data so that you can then easily manipulate across all platforms.

PupSpa

Are you up to the challenge of recreating Mondrian's Composition II in Red, Blue, and Yellow using Bootstrap's grid?

Recreate a painting using Bootstrap's grid

Help the movie review site _Reel Good Reviews_ update the text design on their site to improve readability and user satisfaction.

Reel Good Reviews

Transition a CSS codebase to embrace clean and organized SCSS.

Refactor CSS to SCSS

It's time to build fluency in a CSS preprocessor. In this next Pro Project, we're going to practice charts in Sass so you can hone your skills and feel confident taking them to the real world.
Why? Sass is a powerful tool that allows you to build awesome visualizations with pure styling.
What's next? Top 10 produce, charts without code, more Sass. You got this! 

Sass Bar Chart

In this project, we're going to practice parallax scrolling in Sass so you can hone your skills and feel confident taking them to the real world.
Why? Parallax scrolling is a popular method used on many landing pages to give them a professional feel.

Sassy Parallax Banner

In this project, we're going to practice box manipulation so you can hone your skills and feel confident taking them to the real world.
Why? You'll be able to hone the skill of accurately setting up your box model properties and sizing each element on your webpage.

The Box Model: Davie's Burgers

Demonstrate the interactive navigation elements of a site with CSS styles.

The Summit

Follow step-by-step instructions to add animations to an existing static web page for an online reader.

Transitions - 20,000 Leagues Under the Sea

In this project, we're going to practice responsive design in CSS so you can hone your skills and feel confident taking them to the real world.

Why? Making a responsive design for your webpage will ensure, no matter the screen, the user will always see the design you intended.

Tsunami Coffee

In this project, we're going to practice text styling in CSS so you can hone your skills and feel confident taking them to the real world.
Why? The arrangement and style of text on your webpage has a large impact on your user's experience. You want to make sure it's done right!

Typography

In this project, we're going to practice tabular organization in HTML so you can hone your skills and feel confident taking them to the real world. Why? If you're going to have data on a webpage, you've got to master the skill of effectively and aesthetically organizing it – an HTML table is the perfect solution.

Projects in web design

All projects in web design

Adhoc

Animated Company Logo

Broadway

Challenge Project: Build a Website Design System

Challenge Project: Company Home Page with Flexbox

Challenge Project: Responsive Club Website

Code! Blog

Comet Revamp: Iterating on Products

Create Your Own User Testing Plan

Resources

Support

Resources

Support

Plans

Community

Subjects

Languages

Career building

Mobile

Mobile