• ∇ LINK

Instructions

A travel agency is in need of a website that showcases the top beach destinations preferred by their customers. Use your HTML and CSS skills to create the website and style it according to their needs. The following video reviews the most important concepts from this unit. In it, you will see how to build a web page that is similar in style and structure to the Beach Paradise web page.

• ∇ LINK

Instructions

In this project, you'll build a simple website for a fictional arts and crafts store using the tools on your own computer. This project will provide you with less guidance than previous projects. You should expect to use the internet, Codecademy, and other resources when you encounter a problem that you cannot easily solve.

• ∇ LINK

Instructions

You've been selected to create the web page for a new design firm named Broadway. You'll build the web page using all the tools you've learned thus far. We've set up this real-world scenario, but the development choices are in your hands.

• ∇ LINK

Instructions

This week you learned about the Box Model, CSS Display, and Flexbox; the basic tools for positioning elements on a web page. In this project you will put what you've learned to practice. You will create a website on your local computer for a fake news website named "My Times".

• ∇ LINK

Instructions

In this project, you will create a fictional tea shop website on your own computer. We will provide a design spec and image assets to help you along the way. A design spec is an image of a web page outlined with all of its CSS properties and values. These are usually created by a designer as a source of instructions for a web developer. This project assumes that you will be able to reproduce the basic HTML and CSS with little guidance.

• ∇ LINK

Instructions

Secret Agent Supply needs a website that looks great on every device so that clients can easily find and view their products no matter where they are in the world. Use your knowledge of HTML, CSS, and media queries to build their website.

• ∇ LINK

Instructions

Tortoiseshell Optics is a non-profit that needs help building their website. A visual designer has provided you with mockups of the website. Use your web development knowledge to make their website come to life.

• ∇ LINK

Instructions

In this project you will fix a broken version of a responsive website called Fotomatic. You will update it to look and work exactly the same as the specs do. Download the broken code here and the specs here. You can also see a working version of the final product here.

• ∇ LINK

Instructions

You are tasked with designing and creating the landing page for a new school. You will help them by making informed design decisions about color and typography using the skills you learned last week. You will then implement your design. For this project we will provide you with wireframes. A wireframe is a document which contains the positioning of the elements on a page without specifying any other design information. This allows designers and developers to focus on the flow of a site without getting distracted with design decisions such as color and typography.

• ∇ LINK

Instructions

In this project, you will build a music search app using the MusicGraph API. The app has a text input field and a search button. When a user inputs some text and clicks the button, the app will search MusicGraph's database for songs related to that text. When the API request is complete, the app displays each song found in a list. The user can then sort the list in a number of ways and listen to a sample of each song via a play button.