# Welcome When you sign up for HackYourFuture (HYF) Denmark, you have the opportunity to join our 8 month program. It is split into two parts: a foundation course and a specialism course. In Foundation, you get a chance to practice the fundamentals of web development before you get the chance to specialise down a specific path to suit your skills and interests in the world of tech. This repository contains all of our courses, modules, guides and other learning resources that we use throughout our learning program. ## What does the program look like? We provide an environment for self-directed learning of the fundamentals of web development. We are not a school, we are a learning community, supported by a network of skilled mentors from the tech industry. HackYourFuture requires 30 hours of independent study per week, of which 4 hours are on-site sessions on Sundays. You are responsible for your own learning, delivering your assignments on time and showing up to the sessions well prepared. Together, we will discover state-of-the-art tools and frameworks, industry best-practices, and experience working collaboratively in a modern development team. ![Program Overview](https://1850235804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv5mADMeH7axh0TSGyUQy%2Fuploads%2Fgit-blob-694a9db715d765b54bc0478f0da2cb4acf681b2e%2Fprogram-overview.png?alt=media) ### Key Themes 1. **Web Design** - Build beautiful, well formatted web pages that work responsively across all devices using HTML and CSS. 2. **Web App Development** - Build fabulous functionality across the frontend and backend using the most popular web development programming language, JavaScript. 3. **Databases** - Design databases and query data using SQL across various technologies such as SQLite, MySQL and PostgreSQL. 4. **Team Collaboration** - Collaborate on projects using Git in a modern team environment based on Agile principles and Scrum practices. 5. **Generative AI** - Level up your learning with AI, practice effective prompting techniques and build AI-powered projects. 6. **Career Training** - Develop your personal brand to showcase on GitHub, LinkedIn and your CV, along with industry specific interview training. ## Getting started You'll find lots of content in this repo, but as a starting point head to the [Courses](/course-content/courses) page to take a look through the modules we teach. If you are, or interested in, volunteering, check out our [Mentor Guide](https://mentor.hackyourfuture.dk/) for further guidance on becoming a successful mentor in our learning community. ## Further info and questions Feel free to check out our website [hackyourfuture.dk](https://hackyourfuture.dk) for further information about what we do and how we can help you. If you have any questions, you can find our contact details on there, too. ## Contributing We are open source! Every volunteer is welcome to contribute with new ideas and fixes. If you're interested in becoming a contributor, please visit [Contributing](https://github.com/HackYourFuture-CPH/program/tree/main/contributing/README.md). *The HackYourFuture Program is subject to CC BY NC SA copyright. This means you can freely use our materials, but just make sure to give us credit for it and don't use it commercially, as it is the intellectual property of our volunteers.* [![Creative Commons License](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png)](https://creativecommons.org/licenses/by-nc-sa/4.0/) *This work is licensed under a* [*Creative Commons Attribution 4.0 International License*](http://creativecommons.org/licenses/by-nc-sa/4.0/)*.* # Courses Overview Our program is split into multiple phases from the pre-course, foundation and later the specialism courses which offer multiple paths to progress through. It's important to note that this documentation lists all of the courses that we have developed. We do not always run every course for every team listed below. To see which courses are active and open for applications, see our website for up to date information [hackyourfuture.dk](https://hackyourfuture.dk). ## [Pre-Course](/course-content/pre-course) ## [Foundation](/course-content/foundation) ## [Frontend](/course-content/frontend) ## [Backend](/course-content/backend) ## [Cloud & AI](https://github.com/HackYourFuture-CPH/program/tree/main/courses/cloud\&ai/README.md) # Pre-Course The Pre-Course is a collection of tasks that you should complete before joining HackYourFuture. ## Modules ### [Pre-Assigmment](/course-content/pre-course/pre-assignment) ### [Self Study](/course-content/pre-course/self-study) # Pre-Assignment Here you can find a short list of resources to try out and get a small head-start for the test assignment. ## HTML and CSS Intro If you don't know where to start, you can try some of these free online tutorials: * [freeCodeCamp](https://www.freecodecamp.org/) * [SCRIMBA](https://scrimba.com/g/ghtml) * [sololearn](https://sololearn.com/) (mobile-friendly) These are just suggestions - there are lots of other free online courses available online and it all depends on your personal preference. ## JavaScript Intro A big part of our 7 month program is based on the programming language JavaScript. Try to have a first look at what JavaScript is with some of these free online tutorials: * [freeCodeCamp](https://www.freecodecamp.org/) * [FrontendMasters](https://frontendmasters.com/courses/web-development-v2/) * [codecademy](https://www.codecademy.com/learn/introduction-to-javascript) You can find lots more resources to learn from in the [FrontendMasters "Learn JavaScript" list](https://frontendmasters.com/books/front-end-handbook/2018/learning/javascript.html). ## Frontend Developer Handbook If you prefer theory and reading up before taking a plunge into the coding world - then we recommend having a look at the below handbook. Reading this text will explain you a lot about what it means to be a web-developer. We really recommend it. * [Front End Developer Handbook](https://frontendmasters.com/books/front-end-handbook/2019/) (yes, the 2019 version is still relevant and no newer versions exist). ## Frontend Developer Roadmap If you're curious about what technologies are relevant in the field of Frontend Development - take a look at [this roadmap](https://roadmap.sh/frontend). It's totally fine if you don't recognize over 90% of the words - but return to this map as you keep learning and slowly you might be able to see your own path. Don't worry if everything doesn't immediately make sense, that's what we can help with later. But do make sure that you understand the difference between HTML, CSS and JavaScript and what they are used for: [HTML, CSS, JavaScript Explained](https://youtu.be/gT0Lh1eYk78). # Self Study This module lists the steps you have to complete **BEFORE** the Foundation course 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. 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 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. You have already finished at least 2 sections from the first part during 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) * [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 familiarize 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 a 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 completing 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. Then you need to make your `freeCodeCamp` profile public - [Video on How to make your freeCodeCamp profile public](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. ## 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-learning! * If you have not completed the steps listed above from the `Responsive Web Design` certification 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 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 practising now! # Foundation Here you'll learn the fundamentals for how the web works, the basics of programming, and how to start shaping your CV as you develop your tech skills. ## Modules | Name | Weeks | | --------------------------------------------------------------------------------- | ----- | | [HTML & CSS](/course-content/foundation/html-and-css) | 1 | | [Git](/course-content/foundation/git) | 1 | | [Intro to Using AI](/course-content/foundation/intro-to-using-ai) | 1 | | [Intro to JavaScript](/course-content/foundation/intro-to-javascript) | 4 | | [Intro to Web Architecture](/course-content/foundation/intro-to-web-architecture) | 1 | | [Databases](/course-content/foundation/databases) | 1 | | [Intro to Backend](/course-content/foundation/intro-to-backend) | 1 | | [Intro to Frontend](/course-content/foundation/intro-to-frontend) | 1 | | [Career Training](/course-content/foundation/career-training) | 2 | | [Intro to Agile](/course-content/foundation/intro-to-agile) | 1 | | [Final project](/course-content/foundation/final-project) | 3 | Total: 17 weeks ## Learning Goals Overview ### [HTML & CSS](/course-content/foundation/html-and-css) * [ ] Setup VSCode * [ ] Round-up the [Pre-Course](/course-content/pre-course) materials on HTML and CSS * [ ] Spend a lot of time with hands-on coding practice * [ ] Learn to work efficiently with your team members * [ ] Briefly introduce Figma ### [Git](/course-content/foundation/git) * [ ] Understand what version control is * [ ] Understand what Git is used for * [ ] Know the difference between Git and GitHub * [ ] Successfully install and configure Git * [ ] Practice command line basics * [ ] Know how to create a repo, branches, commits and push to GitHub * [ ] Understand the usual flow for saving and sharing changes ### [Intro to Using AI](/course-content/foundation/intro-to-using-ai) * [ ] AI Literacy: * [ ] Describe how Large Language Models (LLMs) work at a basic level. * [ ] Explain what Generative AI (AI) is, what it's good at, and its limitations. * [ ] Identify appropriate and inappropriate uses of AI in the workplace. * [ ] Practice how you can use AI to help you learn effectively, rather than just providing answers. * [ ] Recognize common risks related to AI usage, such as bias, copyright, hallucinations, misinformation, and privacy concerns. * [ ] Reflect on how AI is changing work and skill expectations (and what we don't know yet!). * [ ] Prompting: * [ ] Apply simple prompting techniques to get useful outputs from GitHub Copilot. * [ ] Evaluate AI outputs critically for accuracy and relevance. * [ ] Integrate AI prompting alongside other learning resources such as documentation, tutorials, and mentors. * [ ] Prompt responsibly to support your learning, in line with HYF guidelines and expectations. ### [Intro to JavaScript](/course-content/foundation/intro-to-javascript) * [ ] Understand what JavaScript is and what it's used for * [ ] Use basic programming concepts such as variable definitions, types and operators * [ ] Practice reading and fixing errors * [ ] Use conditional logic to implement more advanced functionality * [ ] Write basic functions with parameters and arguments * [ ] Understand global vs local scope * [ ] Using objects and arrays to store, access and manipulate more complex data ### [Intro to Web Architecture](/course-content/foundation/intro-to-web-architecture) * [ ] Understand the key components of a web application * [ ] Know what happens when you enter a URL in a web browser * [ ] Be able to describe the difference between frontend and backend functionality * [ ] Describe the role of HTML, CSS and JavaScript * [ ] Understand what HTTP is and its methods * [ ] How APIs are provided and used ### [Databases](/course-content/foundation/databases) * [ ] Explain what a database is and why we use them * [ ] Understand basic relational data terminology: table, row, column, primary key, foreign key * [ ] Perform basic SQL operations: SELECT, INSERT, UPDATE, DELETE * [ ] Use simple filtering and sorting techniques * [ ] Understand simple database design & schemas ### [Intro to Backend](/course-content/foundation/intro-to-backend) * [ ] Introduction to Node.js * [ ] [What is node and why node?](https://www.youtube.com/watch?v=pU9Q6oiQNd0) * [ ] V8 vs the browser that runs js? * [ ] What can you build with Node.js? * Utilities * Web server * Much more * [ ] Building a simple webserver * [ ] Creating simple GET endpoints to return data, including from databases * [ ] Sending requests * [ ] What is Postman * [ ] Making GET, POST AND DELETE requests to APIs using Postman * [ ] Database interaction * [ ] What is CRUD (Create, Read, Update, Delete) * [ ] CRUD vs REST * [ ] Connecting to a database using JavaScript * [ ] Executing queries (i.e. CRUD) ### [Intro to Frontend](/course-content/foundation/intro-to-frontend) * [ ] Understand the browser environment * [ ] HTML vs CSS vs JS * [ ] Client vs server * [ ] Where is the script tag being loaded * [ ] How to use the DOM to implement dynamic functionality * [ ] What is it and what do developers use the DOM for? * [ ] DOM manipulation * [ ] Get elements * [ ] Insert elements * [ ] Element manipulation (style, innerHTML, text) * [ ] Window object * [ ] Document object * [ ] How to use Event Listeners to implement interactivity * [ ] Document onload * [ ] Click, submit, change, input - Focus on usage * [ ] Displaying external data * [ ] Fetch (No promise explanation! Focus on usage) ### [Intro to Agile](/course-content/foundation/intro-to-agile) * [ ] What is project management and why is it important * [ ] Understand the main principles and values of Agile * [ ] Understand the very basics of Scrum * [ ] Understand how to use a simple tool to manage tasks, backlog, a board, and a simple project workflow * [ ] Be able to apply basic prioritisation using MoSCoW * [ ] Feel equipped to apply basic task and project organisation in your next project (e.g. final project) ### [Career Training](/course-content/foundation/career-training) * [ ] Understand where to look for suitable jobs and internships * [ ] Understand what you should do in order to be an attractive candidate on the Danish job market * [ ] Learn how to identify and communicate your competencies * [ ] Understand what HYF can do to support you on your job hunt * [ ] Know how to assemble an effective CV and LinkedIn profile * [ ] Learn how to perform well in a screening interview ### [Foundation Project](/course-content/foundation/final-project) * [ ] Practice working in a team on the same project * [ ] Develop self-guided learning skills (i.e. finding answers to your own problems) * [ ] Practice building a project from a brief * [ ] Practice interpreting requirements and making assumptions * [ ] Developing your own additional requirements (i.e. adding your own flair to the project) * [ ] Practice breaking big problems down into smaller tasks * [ ] Managing your own tasks within a tight deadline * [ ] Understanding how and when to ask for help at the right time * [ ] Taking a project from idea to completion, including deploying it to the web # HTML & CSS During this module you will setup your development environment, review the concepts learned from the [Pre-Course](/course-content/pre-course) materials on HTML and CSS, and discuss the solution of the [order form task](/course-content/foundation/html-and-css/week1/preparation). | Week | Topic | Preparation | Session Plan | Assignment | | ---- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | 1. | IDE setup, rerun of HTML & CSS concepts with hands on exercises, quick Figma introduction, teamwork & peer-learning | [Preparation](/course-content/foundation/html-and-css/week1/preparation) | [Session Plan](/course-content/foundation/html-and-css/week1/session-plan) | [Assignment](/course-content/foundation/html-and-css/week1/assignment) | ## Learning goals * [ ] Setup VSCode * [ ] Round-up the [Pre-Course](/course-content/pre-course) materials on HTML and CSS * [ ] Spend a lot of time with hands-on coding practice * [ ] Learn to work efficiently with your team members * [ ] Briefly introduce Figma # Week 1 ## Contents * [Preparation](/course-content/foundation/html-and-css/week1/preparation) * [Session Plan](/course-content/foundation/html-and-css/week1/session-plan) (for mentors) * [Assignment](/course-content/foundation/html-and-css/week1/assignment) ## Session Learning Goals See [module learning goals](/course-content/foundation/html-and-css). # Preparation During the Pre-Course you've already gone through the basics of HTML, CSS, and JavaScript. Before you come to the first session, we would like you to put all this knowledge to practice by building a simple order form page. ## Order Form Task ### The Design You can find the design for the order form here: [Order Form Design](https://www.figma.com/file/VwksDkp1vSPhpfa62LWIAz/HTML%2FCSS-session1?type=design\&node-id=0-1\&mode=design\&t=seawrJIXVyPoIt9L-0) (Figma). You should build your solution to match this design. If you are new to Figma, watch this [10 min intro for developers](https://youtu.be/fZ-OU_7aBv4?feature=shared\&t=68) to get a head start. ### The Code We have provided some initial code and images for you here: [Code & Images](https://github.com/HackYourFuture-CPH/program/tree/main/courses/foundation/html-and-css/order-form-task). Feel free to use these as a starting point. Make sure that your code is: * Properly formatted and indented * Looking good on both desktop and mobile * Using CSS class selectors instead of IDs or tags ([Why you should avoid using IDs in CSS](https://medium.com/@clairecodes/reasons-not-to-use-ids-in-css-a42204fb0d97)) * Having no unused CSS properties (avoid using the copy code function in Figma) * Using correct and semantic HTML ([MDN Web Docs - Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)) ### Submitting the task Please submit the task using [CodePen](https://codepen.io), and share the link in your team's Slack channel before the session. ### Installing VSCode Before you come to the session, please also download and install [Visual Studio Code](https://code.visualstudio.com/). You will learn more about how to use the tool in the session. You are welcome to already use VSCode to build this task, if you like, but you still need to submit it via CodePen at the end. # Session Plan ## Session outline * Introduction by everyone - you as Session Lead, the Session Assistant(s), the Trainees * Integrated Development Environments (IDE) and Visual Studio as the standard out there * Mix of HTML concepts intertwined with VS Code settings as "format on save" and "auto safe on focus change" * Lots of session exercises * Emphasize use of autocomplete and copy/paste * Teach through raising questions and demonstrating how to search for the answers online * Focus on how to read documentation, MDN - W3Schools, Stack Overflow ## Visual Studio Code You can either demonstrate the following tips all at once or integrate them throughout the session as appropriate. Remember, the primary focus of this session is HTML and CSS; the VS Code tips are intended to support and accelerate your workflow with these technologies. * Demonstrate the basics * Switching between light and dark themes * Open and close different panels (Explorer, Search, Extensions, Terminal, Editor Layout) * How to load/drag folders and projects in * How to create files * Recommend extensions (no need to explain all upon install) * Prettier - Code formatter * Live Server * Code Spell Checker * Important User Settings * Auto save on focus change * Prettier on focus change * Extra for the curious * Select multiple instances of a string on file `CMD + D` * Select and edit multiple lines `Option + Shift` * Demonstrate how to add dummy copy through `Lorem10` where the number is equal to the number of words ## HTML What does it stand for? Emphasize that it's not a programming language. What role does it play in Web Development? * Explain the document structure - head, body; what goes in the head, what in body (meta tags, styles, scripts) * Demonstrate the advanced HTML document autocomplete command with `! + Tab` * Block vs Inline elements * Attributes (image tags, forms) * Demonstrate the importance of predictable indentation, nesting, and formatting * Demonstrate Emmet (Zen coding) * Example `ul>li*6>a` * Tables * Forms (mention `