forked from bloominstituteoftechnology/User-Interface
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
9 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,21 @@ | ||
# 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. | ||
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 using HTML and CSS. | ||
|
||
**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](design-files/desktop.jpg). | ||
Given this [design file](design-files/desktop.jpg), use CSS to style the web page layout. Remember, you can only use `display:inline-block` and box model CSS properties for layout. | ||
|
||
***Useful Resource: [Layout Using inline-block](http://learnlayout.com/inline-block-layout.html)*** | ||
|
||
***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](design-files/desktop.jpg) 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](design-files/desktop.jpg) as challenge 1 but now you will use flexbox to control your layout isntead of `inline-block`. | ||
|
||
***Useful Resource: [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)*** | ||
|
||
***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. | ||
- Layout the provided HTML using `display:inline-block` and box model CSS properties only | ||
- Style the whole page based on the [design](design-files/desktop.jpg) | ||
- Try to make your styles match the design as closely as you can | ||
|
||
**If you accomplish both challenges early, push yourself to build the other pages in the navigation** | ||
***Stretch Goal:*** | ||
- Delete the provided HTML and build your own structure | ||
- Attemp the layout using floats and clears | ||
|
||
#### To Get Started | ||
* Fork / Clone this project into a directory on your machine. | ||
* `cd` into your forked local copy. | ||
* Pull up the code into your preffered text editor. | ||
* Start coding! |