Import html-and-css

Probably identical to
https://github.com/HackYourFuture-CPH/programme/tree/main/courses/Foundation/HTML-CSS.
I will check this next.

Author: rvedotrc

legacy/html-and-css/Pre-course/README.md

@@ -0,0 +1,84 @@
+# Pre-course materials
+
+This section lists the steps you have to complete **BEFORE** the bootcamp starts.
+
+You are going to be fully self-learning `HTML` and `CSS`, so it is very important and **mandatory** that you complete the steps before the first sunday session at HackYourFuture.
+
+You will also get a little introduction to `Javascript`, so that you can be more comfortable jumping into it when the course starts.
+
+## HTML and CSS
+
+### freeCodeCamp certifications
+
+The `freeCodeCamp` courses are a good way to learn and their certifications are widely recognized, therefore we use this platform to give you a good start with learning `Web Development` and having a way to showcase your learning.
+
+### What you have done so far
+
+There are 5 parts in the [Responsive Web Design certification](https://www.freecodecamp.org/learn/2022/responsive-web-design/). Each part contains a few sections and a certification project at the end of each part.
+You have already finished at least 2 sections from the first part as part of the application assignment:
+
+- [Learn HTML by Building a Cat Photo App](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/)
+
+- [Learn Basic CSS by Building a Cafe Menu](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/)
+
+### What you have to do before the first Sunday session
+
+You should finish the first part and the certification project that goes with it:
+
+- [Learn CSS Colors by Building a Set of Colored Markers](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers)
+
+- [Learn HTML Forms by Building a Registration Form](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form)
+
+- [Certification Project - Survey Form](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form)
+
+This will familiarise you with `CSS` colors and building `Forms` with `HTML` and `CSS`, which are both essential parts of basic Web Development knowledge.
+
+You should also complete 2 more sections from the second part:
+
+- [Learn the CSS Box Model by Building a Rothko Painting](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-the-css-box-model-by-building-a-rothko-painting)
+- [Learn CSS Flexbox by Building a Photo Gallery](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery)
+
+Learning the CSS Box Model and Flexbox will give you very good foundational knowledge to deal with any styling or layout challenge.
+
+## JavaScript
+
+Complete these steps in the freeCodeCamp [JavaScript Algorithms and Data Structures certification](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/):
+
+- [Comment Your JavaScript Code](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code)
+- [Declare JavaScript Variables](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables)
+- [Storing Values with the Assignment Operator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)
+- [Assigning the Value of One Variable to Another](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another)
+- [Initializing Variables with the Assignment Operator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator)
+- [Declare String Variables](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables)
+- [Understanding Uninitialized Variables](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables)
+- [Understanding Case Sensitivity in Variables](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables)
+- [Explore Differences Between the var and let Keywords](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords)
+- [Declare a Read-Only Variable with the const Keyword](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword)
+- [Add Two Numbers with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript)
+- [Subtract One Number from Another with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript)
+- [Multiply Two Numbers with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript)
+- [Divide One Number by Another with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript)
+- [Increment a Number with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript)
+- [Decrement a Number with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript)
+- [Create Decimal Numbers with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript)
+- [Multiply Two Decimals with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript)
+- [Divide One Decimal by Another with JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript)
+- [Finding a Remainder in JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript)
+- [Compound Assignment With Augmented Addition](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition)
+- [Compound Assignment With Augmented Subtraction](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction)
+- [Compound Assignment With Augmented Multiplication](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication)
+- [Compound Assignment With Augmented Division](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division)
+
+If you like the `freeCodeCamp` format, you should definitely continue beyond what we ask of you and attain the various relevant certifications - especially by finishing off the **Responsive Web Design** and **Javascript Algorithms and Data Structures** certifications!
+
+### Submitting your preparation
+
+Before the first Sunday session, you must have completed all the steps listed above. You then need to make your freeCodeCamp profile public - [Video here to show you how to do this](https://www.loom.com/share/019547eab49e4e198fd2d24f6cb27d3c) - and post a link to your profile in your class Slack channel. If you do not do this before the first Sunday session, you will not be able to continue with the course.
+
+### What if?
+
+- If you have completed all these parts already, just continue further with the certifications. You are here to learn after all and you are entering a journey of self-teaching!
+
+- If you have not completed the steps listed above from the `Responsive Web Design` ceritification and the `JavaScript Algorithms and Data Structures` certification by the time of the first Sunday session, you will not be able to continue with the course.
+
+- Stuck or need help? Please use your class Slack channel to ask for help from your fellow students. Asking for help, explaining the problems you have, and sharing your own knowledge with your fellow students are all very important to succeed in HackYourFuture, so start practicing right now!

legacy/html-and-css/README.md

@@ -1,3 +1,15 @@
-# html-and-css
+# HTML-CSS
 
-TODO
+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).
+
+| Week | Topic                                                                                                       | Preparation                         | Lesson Plan                                      | Homework                 |
+| ---- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------ | ------------------------ |
+| 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) |
+
+## Learning goals
+
+- Round-up the [Pre-course](/Pre-course/readme.md) materials
+- Talk about any possible questions regarding the concepts learned so far
+- Briefly introduce Figma
+- Spend a lot of time with hands-on coding, figuring out the [exercise](/The-one-and-only-week1/readme.md)
+- Learn to work efficiently with your teammates

legacy/html-and-css/The-one-and-only-week1/README.md

@@ -0,0 +1,10 @@
+# Order form exercise
+
+Use the `Session-exercise-template` to get started!
+
+Design:
+<https://www.figma.com/file/VwksDkp1vSPhpfa62LWIAz/HTML%2FCSS-session1?type=design&node-id=0-1&mode=design&t=seawrJIXVyPoIt9L-0>
+
+![Desktop design](Session-exercise-template/images/order-desktop.png)
+
+![Mobile design](Session-exercise-template/images/order-mobile.png)

legacy/html-and-css/The-one-and-only-week1/Session-exercise-template/cards.png

@@ -0,0 +1,4 @@
+/* var(--gradient) */
+/* :root {
+  --gradient: your gradient color here;
+} */

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

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="order.css" />
+    <title>PAYMENT <span>FORM</span></title>
+  </head>
+
+  <body>
+    <header>
+      <div id="order-summary"></div>
+    </header>
+
+    <form>
+      <div>
+        <h2 id="">Payment Method</h2>
+      </div>
+
+      <div id="">
+        <h2 id="">Card Info</h2>
+        <div id="">
+          <div>
+            <label for="card-number">Card number</label><br />
+            <input
+              type="text"
+              id=""
+              placeholder="1234 1234 1234 1234"
+              name="card-number"
+              required
+            />
+          </div>
+
+          <div>
+            <label for="exp-date">Expiry date</label><br />
+            <input
+              type="text"
+              id=""
+              placeholder="MM / YY"
+              name="exp-date"
+              required
+            />
+          </div>
+
+          <div>
+            <label for="sec-code">Security code</label><br />
+            <input
+              type="text"
+              id=""
+              placeholder="CVV"
+              name="sec-code"
+              required
+            />
+          </div>
+        </div>
+      </div>
+
+      <input type="submit" id="buy-now" value="Buy now" />
+      <p id="">Need Help?</p>
+    </form>
+  </body>
+</html>

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

@@ -0,0 +1,47 @@
+# How to submit the first homework
+
+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.
+
+`1.` go to your homework repository`*` on github and to the branches section:
+
+![screenshot](images/image.png)
+
+`2.` find the "New branch" button and create a new branch, that follows the naming convention:
+`html-css/yourname`
+
+- ❌ html/css/maria
+- ❌ hmtl-css/maria
+- ❌ html-css-homework
+- ❌ html/maria
+- ❌ htmlcss/maria
+- ✅ html-css/maria
+
+`3.` go to the branch. It appears in the branch overview right after creation:
+
+![screenshot](./images/image-1.png)
+
+Or, if you are not there for some reason, go back to the repository overview and find your new branch in the drop-down:
+
+![screenshot](./images/image-2.png)
+
+To verify that you have switched to the branch, it should appear selected:
+
+![screenshot](./images/image-3.png)
+
+`4.` go to the html-css folder and upload your homework:
+
+![screenshot](./images/image-4.png)
+
+`5.` write a commit message and press "Commit changes":
+
+![screenshot](./images/image-5.png)
+
+`6.` go to "Pull requests" in the repository bar, and create a new pull request to the main branch <- from your branch:
+
+![screenshot](./images/image-6.png)
+
+`7.` that is it! You should see your pull request listed in the "Pull requests" tab.
+
+`8.` post a link to your homework Pull Request in your class channel.
+
+`*` 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.