Skip to content

Commit 8bade3a

Browse files
BigKnellBigKnell
committed
Initial commits for Responsive Web Design - I
1 parent 862e565 commit 8bade3a

File tree

9 files changed

+45
-2
lines changed

9 files changed

+45
-2
lines changed

‎README.md‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,23 @@
1-
# responsive-web-design-I
2-
Responsive Web Design I project
1+
# Responsive-Web-Design
2+
3+
It's time to expand our CSS skills into multiple devices. You will be creating an adaptive version of the "Great Idea" design. You will be working through design mock ups for desktop, tablet, and mobile devices located in the [design-files](design-files) folder.
4+
5+
## Task 1: Set Up The Project With Git
6+
7+
* [ ] Fork the project into your GitHub user account
8+
* [ ] Clone the forked project into a directory on your machine
9+
* [ ] You are now ready to build this project with your preferred IDE
10+
11+
## Task 2: Project Objectives
12+
13+
* [ ] Review each [design file](design-files). Notice the subtle differences between them all.
14+
* [ ] Insert a `viewport` meta tag into the head of the project with these html attributes: `content="width=device-width, initial-scale=1"`
15+
* [ ] Introduce max-width media queries into your project at 800px and 500px
16+
* [ ] Do your best to make your styles match the design files at each breakpoint
17+
18+
## Stretch Goals:
19+
* [ ] Create a tablet and mobile version of the services page from previous projects
20+
* [ ] Once you have completed the project with max-width media queries, start over with min-width media queries to get a feel for how a mobile first approach would be like. I recommend making a copy of all your contents in a new folder named "mobile-first" to keep it separate
21+
22+
23+

‎css/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* Use your own code or past solution for Great Idea Web Page CSS here! */
2+
3+

‎design-files/desktop-view.png‎

521 KB
Loading

‎design-files/mobile-view.png‎

189 KB
Loading

‎design-files/tablet-view.png‎

298 KB
Loading

‎img/header-img.png‎

187 KB
Loading

‎img/logo.png‎

3.26 KB
Loading

‎img/mid-page-accent.jpg‎

22.3 KB
Loading

‎index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Great Idea - Responsive I</title>
7+
8+
<link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
9+
<link rel="stylesheet" href="css/index.css">
10+
11+
<!--[if lt IE 9]>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
13+
<![endif]-->
14+
</head>
15+
16+
<body>
17+
<!-- Use your own code or past solution for Great Idea Web Page HTML here! -->
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)