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
Level 1: root folder. Make desktop homepage with flexbox
Level 2: level-2 folder. Add the 'order' page with a form
Level 3: level-3 folder. Make both pages responsive
In these repositories you will find solutions to each weeks coursework. These solutions are example answers and will not be the exact solution that students give. You should use it to inform your feedback of the coursework.
27
+
In these repositories you will find solutions to each week's coursework. These solutions are example answers and will not be the exact solution that students give. You should use it to inform your feedback of the coursework.
28
28
29
29
Additionally, you will find marking guides in these places
@@ -15,26 +13,12 @@ The aim of this exercise is to create a page that looks just like this one:
15
13
Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Karma repository on Github (which was created when you forked).
16
14
17
15
# Instructions
18
-
## Level 1
16
+
19
17
-**Edit `index.html` and `style.css`** to re-create the design above.
20
18
- Remember, use semantic HTML to re-create the structure, and style each element using CSS to make a perfect copy of the above image.
21
19
- All the images and icons you need can be found in the `img` folder, and the font 'Roboto' is already loaded into the project.
22
20
-**Only create the Desktop design** for now.
23
21
24
-
## Level 2
25
-
- Go to the folder named 'level 2' and find the updated designs there.
26
-
- Add the new design block in your `index.html`
27
-
- Create a new page called `order.html` and re-create the design for the Order form page (find this in the Level 2 folder as well)
28
-
- For the Order page styles, you can keep using the same `style.css` file and add your Order page styles in there. Make sure the stylesheet is imported in the `<head>` of `order.html`.
29
-
- Connect the 2 pages by making the homepage's "Get Karma today" button navigate to the Order page.
30
-
31
-
## Level 3
32
-
Now let's make this website responsive!
33
-
- Use the techniques you've learned in class to make both the homepage and the Order page look good on mobile.
34
-
- You'll find the mobile designs inside the Level 3 folder.
35
-
- Use 1 or 2 breakpoints:
36
-
- 768px
37
-
38
22
### Submitting your work
39
23
-**Commit and push your code often** so you get into the habit and you avoid losing any code that you write if your machine crashes for example.
40
24
- Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing).
The aim of this exercise is to add a new section to the homepage, and create a new page with an Order form.
4
+
5
+
### Set up
6
+
7
+
You can choose to add your code for Level 2 to the same branch you were using for Level 1, or to create a new 'level-2' branch.
8
+
9
+
# Instructions
10
+
11
+
- You'll find the designs inside the 'level 2' folder.
12
+
- Add the new design block in your `index.html`
13
+
- Create a new page called `order.html` and re-create the design for the Order form page (find this in the Level 2 folder as well)
14
+
- For the Order page styles, you can keep using the same `style.css` file and add your Order page styles in there. Make sure the stylesheet is imported in the `<head>` of `order.html`.
15
+
You could also create a specific `order.css` file - just make sure you're not duplicating the CSS already defined in `style.css`!
16
+
- Connect the 2 pages by making the homepage's "Get Karma today" button navigate to the Order page.
17
+
18
+
### Submitting your work
19
+
- Remember to **commit and push your code often**
20
+
- Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing).
21
+
**Note:** If you've added your level 2 code to the same branch as level 1, then it will just update your level 1 Pull Request and you won't need a new PR.
You can choose to add your code for Level 3 to the same branch you were using for the previous levels, or to create a new 'level-3' branch.
9
+
10
+
# Instructions
11
+
12
+
- Use the techniques you've learned in class to make both the homepage and the Order page look good on mobile.
13
+
- You'll find the mobile designs inside the 'Level 3' folder.
14
+
- You can use 1 or 2 breakpoints, it's up to you (if you're not sure, start with 768px - it's a classic one as it's the width of an iPad and a good point to switch from a mobile layout to a desktop layout).
15
+
16
+
### Submitting your work
17
+
- Remember to **commit and push your code often**
18
+
- Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing).
19
+
**Note:** If you've added your level 3 code to the same branch you used for the previous levels, then it will just update your existing Pull Request and you won't need a new PR.
20
+
21
+
## Designs
22
+
23
+
![alt text](./homepage-mobile.png"Homepage mobile design")
24
+
25
+
![alt text](./store-mobile.png"Store mobile design")
0 commit comments