P1: Mockup to Website Project Overview

You will be provided a design mockup as a PDF-file and must replicate the design as closely as possible in HTML and CSS. You will develop a responsive website for a single product overview page. You will be required to use the popular Twitter's Bootstrap framework to build the page.

Why this Project?

The first thing potential employers look for isn’t which school you attended or what your GPA was; they want to see what you’ve built! Not only do you need to showcase what you've built but you also need to be able to recreate designs that are provided to you. In this project you will be given a single page website to replicate. You must get your design to match the mockup as closely as possible. In the following nodes you will outline concepts needed to complete this task and you will be able to see how closely your design matches the mockup.

What will I learn?

You will learn how HTML is used to define the content of a web page and start to think of every web page as a number of boxes on the screen. You’ll then learn how to position those boxes and make them beautiful using CSS.

Why is this Important to my Career?

By being able to mimic a design you are able to showcase your ability to identify layout patterns. At their very foundation, web applications are just content delivery mechanisms; HTML defines how that language is structured. Reading poorly designed content is never an enjoyable experience; CSS empowers you to create beautiful content regardless of your user’s device.