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
+22-14
Original file line number
Diff line number
Diff line change
@@ -1,25 +1,33 @@
1
-
# HTML / CSS - User Interface Project
1
+
# User Interface Project: Great Idea Web Page
2
2
3
-
We will be building a single page website throughout this week. We will approach the layout in a few different ways so that we can learn the many challenges of building user interface. The first challenge will be to build the interface using only the box model and display types of block and inline. You can use floats and clears if you want as well!
3
+
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.
4
4
5
-
The second challenge will be to re-approach your first build with flexbox techniques. Don't accomplish the second challenge until you have completely finished the page using box model and display types only!
5
+
**Hint**
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.**
6
7
7
-
*Hint*
8
-
The HTML 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.
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.
***Useful Resource: [Layout Using inline-block](http://learnlayout.com/inline-block-layout.html)***
13
12
14
-
### Challenge 1
15
-
Objective: Code up as much of the web page as you can using the box model and any layout techniques you have learned.
13
+
***Objectives:***
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)
16
+
- Aim for coding the whole page from navigation all the way to the footer
17
+
-**Stretch Goal**: Delete the provided HTML and build your own file.
16
18
17
-
* Try to make the site look like the included great-idea-example.jpg
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`.
18
21
19
-
* I have included a CSS reset and some base styles you will need to match the design.
<imgclass="logo" src="img/logo.png" alt="Great Idea! Company logo.">
31
+
</header>
32
+
33
+
<sectionclass="cta">
34
+
<divclass="cta-text">
35
+
<h1>Innovation<br> On<br> Demand</h1>
36
+
<button>Get Started</button>
37
+
</div>
38
+
<imgsrc="img/header-img.png" alt="Image of a code snippet.">
39
+
</section><!-- cta -->
40
+
41
+
<sectionclass="main-content">
42
+
<divclass="top-content">
43
+
<divclass="text-content">
44
+
<h4>Features</h4>
45
+
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
46
+
</div>
47
+
<divclass="text-content">
48
+
<h4>About</h4>
49
+
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
50
+
</div>
51
+
</div>
52
+
<imgclass="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
53
+
<divclass="bottom-content">
54
+
<divclass="text-content">
55
+
<h4>Services</h4>
56
+
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
57
+
</div>
58
+
<divclass="text-content">
59
+
<h4>Product</h4>
60
+
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
61
+
</div>
62
+
<divclass="text-content">
63
+
<h4>Vision</h4>
64
+
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
0 commit comments