You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -6,18 +6,18 @@ Being able to create a user interface from a design file is considered a basic n
6
6
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.**
7
7
8
8
### Challenge 1: `display:inline-block`
9
-
You are to only use `display:inline-block` and the box model CSS properites to get as much of the layout done as you can. If this is your first time coding HTML and CSS, just try to get the top half of the page done.
9
+
Only use `display:inline-block` and box model CSS properites to layout the [Great Idea design.](design-files/desktop.jpg).
10
10
11
11
***Useful Resource: [Layout Using inline-block](http://learnlayout.com/inline-block-layout.html)***
12
12
13
13
***Objectives:***
14
14
- Style the provided HTML using `display:inline-block` and box model CSS properties only.
15
-
- Try to make your styles match as close to the [design files as possible.](design-files/great-idea-example.jpg)
15
+
- Try to make your styles match as close to the [desktop design](design-files/desktop.jpg) as you can.
16
16
- Aim for coding the whole page from navigation all the way to the footer
17
17
-**Stretch Goal**: Delete the provided HTML and build your own file.
18
18
19
19
### Challenge 2: `display: flexbox`
20
-
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/great-idea-example.jpg) as challenge 1 but now you will use flexbox to control your layout isntead of `inline-block`.
20
+
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`.
0 commit comments