Skip to content

Commit 3334d94

Browse files
adamblanchardadamblanchard
committed
Renamed case of HTML-CSS to lower case
1 parent db60762 commit 3334d94

File tree

18 files changed

+172
-0
lines changed

18 files changed

+172
-0
lines changed

‎courses/Foundation/html-css/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# HTML-CSS
2+
3+
This repository contains the course material for the one and only HTML/CSS session. During the session we will review the concepts learned from the [Pre-course](../../Pre-course/README.md) materials and work hands-on with a large [exercise](./The-one-and-only-week1/README.md).
4+
5+
| Week | Topic | Preparation | Lesson Plan | Homework |
6+
| ---- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------- | ------------------------- |
7+
| 1. | Advanced HTML & CSS concepts, hands-on exercise turning Figma Wireframe into code, teamwork & peer-learning | [Pre-course](../../Pre-course/README.md) | [Lesson Plan](./The-one-and-only-week1/README.md) | [Homework](./homework.md) |
8+
9+
## Learning goals
10+
11+
- Round-up the [Pre-course](../../Pre-course/README.md) materials
12+
- Talk about any possible questions regarding the concepts learned so far
13+
- Briefly introduce Figma
14+
- Spend a lot of time with hands-on coding, figuring out the [exercise](./The-one-and-only-week1/README.md)
15+
- Learn to work efficiently with your teammates

‎courses/Foundation/html-css/The-one-and-only-week1/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Order form exercise
2+
3+
Use the `Session-exercise-template` to get started!
4+
5+
Design:
6+
<https://www.figma.com/file/VwksDkp1vSPhpfa62LWIAz/HTML%2FCSS-session1?type=design&node-id=0-1&mode=design&t=seawrJIXVyPoIt9L-0>
7+
8+
![Desktop design](Session-exercise-template/images/order-desktop.png)
9+
10+
![Mobile design](Session-exercise-template/images/order-mobile.png)

‎courses/Foundation/html-css/The-one-and-only-week1/Session-exercise-template/cards.png‎

294 KB
Loading

‎courses/Foundation/html-css/The-one-and-only-week1/Session-exercise-template/images/order-desktop.png‎

309 KB
Loading

‎courses/Foundation/html-css/The-one-and-only-week1/Session-exercise-template/images/order-mobile.png‎

182 KB
Loading

‎courses/Foundation/html-css/The-one-and-only-week1/Session-exercise-template/order.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* var(--gradient) */
2+
/* :root {
3+
--gradient: your gradient color here;
4+
} */

‎courses/Foundation/html-css/The-one-and-only-week1/Session-exercise-template/order.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" type="text/css" href="order.css" />
7+
<title>PAYMENT <span>FORM</span></title>
8+
</head>
9+
10+
<body>
11+
<header>
12+
<div id="order-summary"></div>
13+
</header>
14+
15+
<form>
16+
<div>
17+
<h2 id="">Payment Method</h2>
18+
</div>
19+
20+
<div id="">
21+
<h2 id="">Card Info</h2>
22+
<div id="">
23+
<div>
24+
<label for="card-number">Card number</label><br />
25+
<input
26+
type="text"
27+
id=""
28+
placeholder="1234 1234 1234 1234"
29+
name="card-number"
30+
required
31+
/>
32+
</div>
33+
34+
<div>
35+
<label for="exp-date">Expiry date</label><br />
36+
<input
37+
type="text"
38+
id=""
39+
placeholder="MM / YY"
40+
name="exp-date"
41+
required
42+
/>
43+
</div>
44+
45+
<div>
46+
<label for="sec-code">Security code</label><br />
47+
<input
48+
type="text"
49+
id=""
50+
placeholder="CVV"
51+
name="sec-code"
52+
required
53+
/>
54+
</div>
55+
</div>
56+
</div>
57+
58+
<input type="submit" id="buy-now" value="Buy now" />
59+
<p id="">Need Help?</p>
60+
</form>
61+
</body>
62+
</html>

‎courses/Foundation/html-css/The-one-and-only-week1/Session-exercise-template/paypal.png‎

81.9 KB
Loading

‎courses/Foundation/html-css/first-homework-submission.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# How to submit the first homework?
2+
3+
While you have not gone through [Git](https://github.com/HackYourFuture-CPH/Git) yet, you will submit your first homework in a different way. This applies only to the first homework. If you are confident with basic Git already, feel free to do the submission in a proper version-control way.
4+
5+
`1.` go to your homework repository`*` on github and to the branches section:
6+
7+
![screenshot](images/image.png)
8+
9+
`2.` find the "New branch" button and create a new branch, that follows the naming convention:
10+
11+
`html-css/yourname`
12+
13+
- ❌ html/css/maria
14+
- ❌ hmtl-css/maria
15+
- ❌ html-css-homework
16+
- ❌ html/maria
17+
- ❌ htmlcss/maria
18+
- ✅ html-css/maria
19+
20+
`3.` Go to the branch. It appears in the branch overview right after creation:
21+
22+
![screenshot](images/image-1.png)
23+
24+
Or, if you are not there for some reason, go back to the repository overview and find your new branch in the drop-down:
25+
26+
![screenshot](images/image-2.png)
27+
28+
To verify that you have switched to the branch, it should appear selected:
29+
30+
![screenshot](images/image-3.png)
31+
32+
`4.` Go to the html-css folder and upload your homework:
33+
34+
![screenshot](images/image-4.png)
35+
36+
`5.` Write a commit message and press "Commit changes":
37+
38+
![screenshot](images/image-5.png)
39+
40+
`6.` Go to "Pull requests" in the repository bar, and create a new pull request to the main branch <- from your branch:
41+
42+
![screenshot](images/image-6.png)
43+
44+
`7.` That is it! You should see your pull request listed in the "Pull requests" tab.
45+
46+
`8.` Post a link to your homework Pull Request in your class channel.
47+
48+
`*` It is either your own homework repository in your own GitHub account or the central class homework repository in the HackYourFuture-CPH GitHub account - depending on what approach is being followed for your class. Follow the information and instructions regarding this, and ask if you are still unsure.

‎courses/Foundation/html-css/homework.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# HOMEWORK
2+
3+
Make your own `Developer CV / Portfolio page`!
4+
5+
There is a long way to go in the learning journey, but why not start with a good online presence from the get-go?
6+
7+
Make it as extravagant as you like and look around the internet for inspiration (f.x. [here](https://scrimba.com/articles/web-developer-portfolio-inspiration)), while the **minimum requirements** are:
8+
9+
- [ ] Two files: .html and .css
10+
- [ ] Navigation bar leading to different parts of the single-page website
11+
- [ ] Header element with your name and title
12+
- [ ] Contact section that also includes the most important SoMe links
13+
- [ ] Short description section
14+
- [ ] Skill showcase section highlighting your technical skills
15+
- [ ] Portfolio section having the [FCC Survey Form](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form) as the first project.`*`
16+
- [ ] Advanced CSS and/or animations applied to implement interesting interactive elements
17+
- [ ] Website responsiveness so it looks good on different screen sizes and devices
18+
- [ ] Deploy your page on [Netlify](https://www.netlify.com)!
19+
20+
`*` it is not advisable to have tutorial or course projects in your portfolio, you should make sure to have unique and interesting self-driven projects. However, it is a bit too early for that. Start with the "Survey Form" and keep building and extending your project portfolio as you learn!
21+
22+
❗ Remember: you have to submit the homework during the week, before the weekend, so plan your workload accordingly. You can keep working on this portfolio in the future, so just focus on doing a nice initial version for now!
23+
24+
Check [the first homework submission](https://github.com/HackYourFuture-CPH/HTML-CSS/blob/main/first-homework-submission.md) instructions to make sure to submit the homework correctly!
25+
26+
**Small tip:**
27+
28+
- Got to [Loom.com](https://www.loom.com/) and download the app or plugin.
29+
- It's a great way to quickly share explainer videos or explain issues you are facing.
30+
31+
Good luck! ✌️
32+
33+
![Jim Carrey as the eponymous "Bruce Almighty", busily typing away](https://media.giphy.com/media/13GIgrGdslD9oQ/giphy.gif)

0 commit comments

Comments
 (0)