Pre-Course Set Up

courses/Pre-Course/README.md

@@ -1,6 +1,9 @@
 # Pre-course
 
-> [!IMPORTANT]
-> Work in progress. Proposed content defined [here](https://docs.google.com/document/d/151MLm-8WA6jSk0-9JhBTuG1xZ9Fo9HRLplJx6Bhps6A/edit?tab=t.0).
+The pre-course is a collection of modules that you should complete before joining HackYourFuture.
 
 ## Modules
+
+### [Technical Application](./Technical-Application)
+
+### [Self Study](./Self-Study)

courses/Foundation/HTML-CSS/Pre-course/README.md → courses/Pre-Course/Self-Study/README.md

@@ -1,10 +1,8 @@
-# Pre-course
+# Self study
 
-## Pre-course materials
+This module lists the steps you have to complete **BEFORE** the Foundation course starts.
 
-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 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.
 
@@ -14,10 +12,10 @@ You will also get a little introduction to `Javascript`, so that you can be more
 
 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
+### What you have completed already
 
 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:
+You have already finished at least 2 sections from the first part as part of the application process:
 
 - [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/)
 
@@ -73,14 +71,14 @@ Complete these steps in the freeCodeCamp [JavaScript Algorithms and Data Structu
 
 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
+## 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.
+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 team 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?
+## FAQ
 
 - 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!
+- Stuck or need help? Please use your team Slack channel to ask for help from your fellow trainees. Asking for help, explaining the problems you have, and sharing your own knowledge with your fellow trainees are all very important skills to succeed in HackYourFuture, so start practicing right now!

courses/Pre-Course/Technical-Application/README.md

@@ -0,0 +1,73 @@
+# Technical Application
+
+👋 Welcome!
+
+This module describes the application process for joining HackYourFuture Denmark, specifically the Foundation course. If you have been invited to take part in the Technical Application, please continue reading.
+
+The following pages will take you through the different stages of the application process, so please read and complete each section carefull.y
+
+The whole application process should take around 30 hours, and you have approximately 10 days to complete all parts. We strongly advise that you spread out the workload across the 10 days, and **don't leave it all until the last minute!**
+
+## 🥸 Requirements
+
+You will have 10 days to do the FreeCodeCamp courses and the technical assignment.
+
+In this time, you must:
+
+1. **Finish 2 courses** from the Responsive Web Design certification on freeCodeCamp
+1. **Alongside the courses** you complete the technical assignment in CodePen while progressing in the course.
+1. **Finish the technical assignment**, applying any touch ups required or extra features.
+1. **Record a project-overview video**.
+
+You can find more detailed instructions in the **🛠️ Technical task** section.
+
+When submitting the assignment, you will have to deliver the following:
+
+- Links to your GitHub and freeCodeCamp accounts
+- A screenshot of the completed courses in freeCodeCamp
+- A link to your CodePen for the Event Page assignment
+- Upload your project overview video
+
+All of this should take you about **30 hours**. Find your own pace in this process, but we recommend spreading the hours across the 10 days and not leaving it all until the last minute. ⏳ 🥵
+
+If you are not sure, we could recommend dividing your time like this:
+
+- 1 hour to read and understand the instructions
+- 2 hours each day for 10 days to work on the technical tasks
+- 8 extra hours to work on the technical task on days when you have more time, for example, on the weekend
+- 1 hour for preparing and making the project overview video
+
+⏱ You should organize your time however it fits your schedule best - the above is only a recommendation! Good time management is a crucial skill to succeed with this bootcamp. Keep in mind that the amount of hours required for this test assignment is similar to what the bootcamp requires _every week_.
+
+## ⏳ Deadline
+
+You should have received a deadline from your contact person at HYF.
+_Late submissions will not be considered_.
+
+## Submission checklist
+
+Check if you are ready and submit!
+
+- [ ] I have created a `GitHub` account
+- [ ] I have signed up to `freeCodeCamp` with my GitHub account
+- [ ] I have have signed up to `codepen` with my Github account
+- [ ] I have made my `freeCodeCamp` profile timeline public
+- [ ] I have completed the first 2 Courses in the `freeCodeCamp` `Responsive Web Design` Certification, and taken a screenshot of the finished courses
+- [ ] I have created the Event Page project in `codepen` and completed the tasks
+- [ ] I have made a project overview video
+
+Have you completed the list?
+👉 [CLICK HERE](https://forms.gle/u4xxb6XrJ1rBVeSV9) to go to the submission form. 🏁
+
+## 📫 After submission
+
+After submitting, please be patient and wait to hear from us while we review all the submissions. We will let you know the date to expect an answer from us by.
+
+Make sure to save `cph@hackyourfuture.dk` and `info@hackyourfuture.dk` in your contacts, so our emails don't end up in your spam folder.
+
+- ✅ If you make it to the next stage, you will receive an email from us with an invitation to a short online interview with two members from HackYourFuture.
+- ⛔️ If you do not make it to the interview stage, we will also let you know via email.
+
+Being a professional developer is a continuous learning process. While you are waiting for your test to be reviewed, we strongly suggest you continue with the Responsive Web Design certification on FreeCodeCamp to strengthen your skills.
+
+Your coding journey has already started by this point, and you now will have a basic understanding of HTML and CSS, maybe even a bit of JavaScript. We won't spend much time going into HTML and CSS so it would be a good idea to strengthen your skills and knowledge before joining.

courses/Pre-Course/Technical-Application/Technical-assignment.md

@@ -0,0 +1,7 @@
+# 🛠️ Technical assignment
+
+The technical assignment task consists of 3 parts:
+
+- 2 freeCodeCamp courses from the Responsive Web Design Certification: [freecodecamp-courses.md](freecodecamp-courses.md)
+- Project to be made in CodePen based on the contents learned in freeCodeCamp : [event-page-technical-task](event-page-technical-task)
+- A project overview video: [project-overview-video.md](project-overview-video.md)

courses/Pre-Course/Technical-Application/event-page-technical-task/README.md

@@ -0,0 +1,114 @@
+# ☕ Event Page Technical Task
+
+Create a simple, responsive landing page for a fictional event. The page should be designed using only HTML and CSS, showcasing a basic understanding of these technologies.
+
+## Objectives
+
+- Demonstrate knowledge of HTML5 semantic elements.
+- Showcase CSS styling and responsive design techniques.
+- Implement a mobile-first approach.
+
+## Requirements
+
+### HTML Structure
+
+- Use semantic HTML5 elements where appropriate (\<header>, \<nav>, \<main>, \<section>, \<footer>, etc.).
+
+Include the following sections on your page:
+
+- Header: Contains the event name and a navigation menu.
+- About Section: A section describing the event details (date, time, location, etc.).
+- Events Section: A prominent section with an image/banner and a brief description of the events.
+- Footer: Contains contact information, map and social media links.
+
+### CSS Styling
+
+- Use an external CSS file for styling.
+- Implement a responsive design using media queries.
+- Use CSS Flexbox or Grid for layout purposes.
+- Ensure the page is mobile-friendly (responsive design).
+
+## Set-Up
+
+1. **Create an Account on CodePen**:\
+   If you don't have a CodePen account, create one (ideally using your existing GitHub account).
+2. **Start a New Pen**:\
+   Begin a new "pen" on CodePen.
+
+   ![image12](../assets/image12.png)
+
+3. **HTML and CSS Setup:**
+
+   - Copy the HTML and CSS structure provided below into the HTML and CSS sections in CodePen.
+
+   ![image6](../assets/image6.png)
+
+4. **Learning Resources:**
+
+> [!INFO]
+> Be curious and google it! Search for articles, blog posts, documentation, youtube tutorials and alike to learn more and understand how to implement any of the steps.
+
+> [!INFO]
+> While doing this task, [inspect](https://blog.hubspot.com/website/how-to-inspect) the website to see what is happening with the elements and the styling. Refer to the [CSS Box Model](https://www.w3schools.com/css/css_boxmodel.asp) to understand which styling properties to change to make things look right.
+
+5. **Inspect and Debug:**\
+   While doing this task, inspect the website elements to understand the styling. Refer to the CSS Box Model to identify and adjust the necessary styling properties.
+
+## General Steps
+
+- [ ] **Responsive Units**: Ensure there are no large (>50) pixel values in your stylesheet. Apply responsive units instead. Study and try to apply responsive units. See the article about [responsive web design](https://medium.com/analytics-vidhya/responsive-web-design-choosing-the-right-unit-4cf2e7d72db7) and investigate _CSS units_.
+- [ ] **Layout with Flexbox**:
+  - Use CSS Flexbox to layout the entire page.
+  - Apply Flexbox properties to ensure elements are properly aligned and spaced.
+- [ ] **Semantic HTML**: Use semantic HTML5 elements where appropriate (e.g. \<header>, \<nav>, \<main>, \<section>, \<footer>)
+
+### Navigation bar
+
+Build a navigation bar and make it look like in the [event-page-design.md](event-page-design.md "mention").
+
+- [ ] Build a navigation bar that includes links to the various sections of the page.
+- [ ] Place the navigation bar at the top of the page.
+- [ ] Use the colors from the design.
+- [ ] Use the \<nav> semantic HTML tag for the navigation bar.
+- [ ] Use [CSS flexbox layout](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to position the elements in the navigation bar.
+- [ ] Make sure to add the logo to navigation bar.
+
+### About Details
+
+- [ ] Add an about section detailing the event (date, time, location, etc.).
+- [ ] Use semantic HTML tags and Flexbox for layout.
+
+### Events Section
+
+- [ ] Create a list of events with an image, icons and banner.
+- [ ] Include a brief description of the event.
+- [ ] Use CSS Flexbox for layout purposes.
+
+### Footer
+
+Build the footer to make it look like in the [event-page-design.md](event-page-design.md "mention").
+
+- [ ] Build the footer with sections (contact information, social media links, etc.).
+- [ ] Use Flexbox to style the layout.
+- [ ] Apply CSS pseudo-classes to change the color of footer list items on hover.
+- [ ] Embed Google Maps using an \<iframe>.
+
+## Mobile layout
+
+Apply _Media Query_ in your CSS file to achieve the mobile layout as seen in the [event-page-design.md](event-page-design.md "mention").
+
+- [ ] Notice how, if you apply flexbox and responsive units, your design will already be responsive for most elements! Investigate the [mobile view](https://blog.hubspot.com/website/how-to-inspect) in your browser and see what needs to be styled in order to match the mobile layout design.
+- [ ] For the footer, find a way to _remove flex in css for mobile size screen._
+
+## A sprinkle of Javascript
+
+You are now familiar with HTML and CSS and have been through quite a journey of learning. Good job! \
+Let's take a peak at the next building block of any proper website - [Javascript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript).
+
+- [ ] Remake the logo element in the navigation bar into a button, choose a logo which you like or represents something about you and style it so it looks good and fits in with the design.
+- [ ] Find a way to make the button functional so it _alerts some text_ on click. The text could be a fun fact about you!
+
+### :tada: You did it
+
+Go through all the steps once again and refer to the design images to make sure you did your best with this task. \
+Take some rest and, when you are ready, go on to make the [project-overview-video.md](../project-overview-video.md "mention").

courses/Pre-Course/Technical-Application/event-page-technical-task/event-page-design.md

@@ -0,0 +1,25 @@
+# Event Page Design
+
+Use Figma for Your Project Design
+
+**Access the Figma Design:**
+
+- Click on the Figma link provided: [Figma Design](https://www.figma.com/design/q0FzbL7oq2H4hnyJW6tVtb/HYF?node-id=1-3&t=oPag8iubHiF0qDVP-0).
+- Log in to your Figma account. If you don't have one, you can sign up for free.
+
+**Navigating the Design:**
+
+- Once logged in, you'll see the design file open in Figma.
+- The **design includes both desktop and mobile views**. Use the zoom controls or scroll to view different sections of the design.
+
+**Extracting Elements:**
+
+- **Inspect Mode**: Click on any element in the design to see its details. On the right-hand panel, you'll find the CSS properties, measurements, and other specifications needed to replicate the design.
+- **Export Assets**: If you need images or icons, click on the element and check the "Export" section in the right panel. Choose your preferred format (e.g., PNG, SVG) and click "Export" to download the asset.
+
+**Helpful Tips:**
+
+- Use the **grid and guides** in Figma to understand the layout structure.
+
+Link to the design: \
+[https://www.figma.com/design/q0FzbL7oq2H4hnyJW6tVtb/HYF?node-id=1-3\&t=oPag8iubHiF0qDVP-0](https://www.figma.com/design/q0FzbL7oq2H4hnyJW6tVtb/HYF?node-id=1-3&t=oPag8iubHiF0qDVP-0)

courses/Pre-Course/Technical-Application/event-page-technical-task/what-we-will-look-for.md

@@ -0,0 +1,14 @@
+# What we will look for
+
+This section describes what the evaluators of your assignment will look for.
+
+Check the list to make sure you have done your best work before submitting! 
+
+- [ ] Responsive CSS units are used; avoid large (>50) pixel values.
+- [ ] Semantic HTML elements are used appropriately (e.g., \<header>, \<nav>, \<main>, \<section>, \<footer>).
+- [ ] The layout styling of the navigation bar items, hero section, about section, and footer content is done using Flexbox or Grid.
+- [ ] There is hover styling on the footer list items.
+- [ ] A Google Map is embedded with an \<iframe> in the footer.
+- [ ] The footer stays at the bottom of the page and does not cover any content regardless of the screen size.
+- [ ] Media queries are applied to change the layout for mobile views, ensuring a responsive design.
+- [ ] The page looks like the mockup design in both desktop and mobile views.

courses/Pre-Course/Technical-Application/faq.md

@@ -0,0 +1,31 @@
+# ❓ FAQ
+
+This section covers some of the doubts you might have while completing the assignment.
+
+## Can I submit after the deadline?
+
+Late submissions will not be accepted. Remember there are multiple application rounds a year, so if this time does not work for you, you can try again.
+
+## What if I cannot finish the assignment on time?
+
+The scope of the assignment is carefully considered and the days until submission deadline should be enough to complete all the parts. This may seem difficult, but it is a reflection of the fast pace of HackYourFuture, if you get in. If you are not able to meet this deadline, you should ask yourself if you can keep up with 8 months of intense study that only gets progressively harder. Practice a bit more, find the best learning methods that fit you, and continue on your own, and once you feel ready, apply again!
+
+## How much time does the assignment take?
+
+The assignment and the additional parts should take you not more than 30 hours in total. If you are working, this still gives you 3 hours a day across the 10 days, and you can put more hours in on your days off.
+
+## How should the freeCodeCamp courses screenshot look like?
+
+The completed courses and your profile picture should be visible:
+
+![image16](./assets/image16.png)
+
+## How should I make the video?
+
+You can use a laptop camera, your phone, or any other way you prefer to make the video. You can make it yourself or have someone else hold the camera. It does not need to be a professional video ;)
+
+## Can I use online resources to help me with the technical task?
+
+Big yes! A really important part of learning web development is learning to search for the answers yourself on the internet. You are free to look for information using Google searches, ChatGPT, YouTube, etc. We encourage you to Google search words and concepts you do not understand, or to use ChatGPT to better understand concepts. Do not use ChatGPT to simply get an answer. AI generated answers will be flagged and we may ask you about it during an interview.
+
+It is important however to try to understand the concepts you are working with, and avoid copy and pasting. It takes time, but ultimately it will only make you a great developer!