/User-Interface

Primary LanguageHTML

User Interface Project: Great Idea Web Page

Being able to create a user interface from a design file is considered a basic necessity for front end developers. We will be building a single page website throughout this week to get plenty of practice using HTML and CSS. We will approach the same layout in several different ways so that we can learn the many challenges of building user interfaces. The first challenge will be to build the interface using only the box model and display: inline-block. You can use floats and clears if you want as well! The second challenge will be to re-build your first inline-block build with flexbox techniques. Do not skip the first challenge! The learnings you will gain from inline-block layout are important for you to understand.

Hint The HTML structure is already in the project, you can use that as a guide for your CSS. If you want to stretch yourself, delete the HTML and start from scratch.

Challenge 1: display:inline-block

Only use display:inline-block and box model CSS properites to layout the Great Idea design.

Useful Resource: Layout Using inline-block

Objectives:

  • Style the provided HTML using display:inline-block and box model CSS properties only.
  • Try to make your styles match as close to the desktop design as you can.
  • Aim for coding the whole page from navigation all the way to the footer
  • Stretch Goal: Delete the provided HTML and build your own file.

Challenge 2: display: flexbox

Building layouts with flexbox is way more fun compared to inline-block but flexbox comes with a lot more things to learn. This challenge is to use the same layout design file as challenge 1 but now you will use flexbox to control your layout isntead of inline-block.

Useful Resource: Flexbox Guide

Objectives:

  • You must complete challenge 1 before attempting challenge 2.
  • Incorporate flexbox where you were using inline-block.
  • Aim for coding the whole page from navigation all the way to the footer
  • Stretch Goal: Delete the provided HTML and build your own file.

If you accomplish both challenges early, push yourself to build the other pages in the navigation

To Get Started

  • Fork / Clone this project into a directory on your machine.
  • cd into your forked local copy.
  • Start coding!