Project 2 - Turn Mockups into a Web Page with HTML and CSS.

Overview

This is the first technical project that I completed as part of my web development diploma. The premise of the project was to turn the provided website mockup (below) into a single responsive web page using HTML and CSS.

Instructions

- Use live server or similar
OR
- Open "index.html" in web browser.

Tech Stack

- HTML5
- CSS3

Scenario

You’ve got your first internship as a developer for Booki, a small company which offers a holiday planning tool. Booki website helps its users to find accommodation and activities in a town of their choosing. Accommodation can be filtered by things such as budget or atmosphere.

A new design, based on the principles of Material Design, has just been created by Loïc, a UI designer.

Before approving a final version of the design the company has decided to create a prototype. You’re in charge of creating this prototype by embedding the mockup in HTML and CSS.

In the morning you receive an email from Sarah, the CTO, providing you with a few final details about the project.

From: Sarah
To: You
Subject: Booki mockups

Hey,

We’ve made good progress on the Booki site project. You’ll be dealing with the embedding of the design mockups as HTML/CSS mockups. Your work will then be used as the code base for the rest of the development work. So here are the new mockups that were made by Loïc for both the desktop and the mobile version. This folder also contains the images that need to be embedded into the page.

I’ve worked with Loïc to prepare a summary document in order to make everything clear for you. It outlines our design specifications as well as some of the technical rules you will need to abide by.

That’s all for now!

Good luck with this project!
Sarah, CTO @Booki

After receiving all this information, you start with a pen and paper. This will allow you to define the main sections of the page before getting started with the embedding work. Good luck!