Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #1592

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update README.md #1592

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
# User Interface Project: Great Idea Web Page

Being able to create a user interface from scratch based on a design file is considered a basic necessity for front end developers. We will be building a single page website using HTML and CSS.
Being able to create a user interface from scratch based on a designed file is considered a basic necessity for front end developers. We will be building a single page website using HTML and CSS.

Given this [design file](design-files/desktop.jpg), use HTML and CSS to build the web page layout. Remember, you can only use `display:inline-block` and box model CSS properties for this project. **Note: you are NOT permitted to use Flexbox or CSS Grid. This is an exercise in basic layout techniques.**

**Lambda Life Tip:** Use the code from your instructor's demonstration to help you tackle the objectives.

## To Get Started

* Fork / Clone this project into a directory on your machine.
* Fork / Clone this project (https://github.com/LambdaSchool/User-Interface.git) or download as zip

* save it into a directory on your machine.

* Open the code with your preferred integrated development environment (IDE).

* Start on the objectives
* Follow on the objectives

## Objectives:

Project objectives are meant to increase your knowledge by giving you practice on the principles learned earlier in the day. Aim to complete every objective on this list. Get as far as you can on the design as we will be using your work today for tomorrow's project as well.
Project objectives are meant to increase your knowledge by giving you hands on practice for the principles learned earlier in the day. Aim to complete every objective on this list. Get as far as you can on the design as we will be using your work today for tomorrow's project as well.

**Watch this short guide on how to setup your project:** [UI Project Setup 101](https://youtu.be/UU9WjpMsaLE)
**Refer to this short guide on how to setup your project:** [UI Project Setup 101](https://youtu.be/UU9WjpMsaLE)

- [ ] Study the [desktop design file](design-files/desktop.jpg). Visualize how you would convert the design into HTML and CSS. Make a quick sketch of how you would build the HTML structure. Use your sketch as a plan of action for the next two objectives. Challenge yourself to only use 10 minutes for this particular objective.

Expand All @@ -37,4 +39,4 @@ Stretch goals are not required. Complete the project objectives before working o

- [ ] Change all the image tags into background images instead

- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items
- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items