All Projects → HackYourFuture → Curriculum

HackYourFuture / Curriculum

Dive into our 7-month web development program covering HTML, CSS, Javascript, Node, and React!

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Curriculum

Curriculum
Overview of the different modules and learning goals of the program.
Stars: ✭ 40 (-91.17%)
Mutual labels:  cli, mongodb, expressjs, curriculum, backend, frontend
Bug Tracker Pern Ts
Bug Tracking app with project members support. Made with PERN stack + TypeScript.
Stars: ✭ 79 (-82.56%)
Mutual labels:  expressjs, backend, frontend
Node Javascript Ecommerce
Build ECommece Like Amazona Using Vanilla JS
Stars: ✭ 57 (-87.42%)
Mutual labels:  mongodb, backend, frontend
Mern Authentication
MERN stack authentication boilerplate: password reset, email verification, server sessions, redux, hooks and docker for dev and prod.
Stars: ✭ 129 (-71.52%)
Mutual labels:  mongodb, backend, frontend
Eshoponcontainersddd
Fork of dotnet-architecture/eShopOnContainers in full DDD/CQRS design using my own patterns
Stars: ✭ 126 (-72.19%)
Mutual labels:  backend, frontend, mobx
Dev Setup
macOS development environment setup: Easy-to-understand instructions with automated setup scripts for developer tools like Vim, Sublime Text, Bash, iTerm, Python data analysis, Spark, Hadoop MapReduce, AWS, Heroku, JavaScript web development, Android development, common data stores, and dev-based OS X defaults.
Stars: ✭ 5,590 (+1134%)
Mutual labels:  cli, mysql, mongodb
Spring Boot Mongodb Angular Todo App
A Sample App built using Spring Boot, Angular and MongoDB
Stars: ✭ 84 (-81.46%)
Mutual labels:  mongodb, backend, frontend
Gindex V4
A Vue Js Based G Index with Improved Dark Mode, Search and Video Player
Stars: ✭ 143 (-68.43%)
Mutual labels:  mongodb, backend, frontend
Stackoverflow Clone
Clone project of a famous Q/A website for developers which is stackoverflow built using MySQL-Express-React-Node 🌐
Stars: ✭ 182 (-59.82%)
Mutual labels:  mysql, backend, frontend
Bookmarks.dev
Bookmarks and Code Snippets Manager for Developers & Co
Stars: ✭ 218 (-51.88%)
Mutual labels:  mongodb, expressjs, frontend
Manage Fastapi
🚀 CLI tool for FastAPI. Generating new FastAPI projects & boilerplates made easy.
Stars: ✭ 163 (-64.02%)
Mutual labels:  cli, mysql, mongodb
Cli
✨ A powerful CLI for the Create Go App project. Create a new production-ready project with backend, frontend and deploy automation by running one CLI command!
Stars: ✭ 292 (-35.54%)
Mutual labels:  cli, backend, frontend
Awesome Cheatsheets
👩‍💻👨‍💻 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
Stars: ✭ 26,007 (+5641.06%)
Mutual labels:  backend, frontend
Dotnetguide
🦸【C#/.NET/.NET Core学习、工作、面试指南】概述:C#/.NET/.NET Core基础知识,学习资料、文章、书籍,社区组织,工具和常见的面试题总结。以及面试时需要注意的事项和优秀简历编写技巧,希望能和大家一起成长进步👊。【让现在的自己不再迷漫✨】
Stars: ✭ 308 (-32.01%)
Mutual labels:  mysql, mongodb
Beeva Best Practices
Best Practices and Style Guides in BEEVA
Stars: ✭ 335 (-26.05%)
Mutual labels:  backend, frontend
Koa Vue Notes Api
🤓 This is a simple SPA built using Koa as the backend, Vue as the first frontend, and React as the second frontend. Features MySQL integration, user authentication, CRUD note actions, and async/await.
Stars: ✭ 342 (-24.5%)
Mutual labels:  mysql, backend
Djreact
A simple introduction to integrating Django and React.
Stars: ✭ 317 (-30.02%)
Mutual labels:  backend, frontend
Superboot
随着技术日新月异,新技术新平台不断出现,对现如今的开发人员来说选择快速高效的框架进行项目开发,既能提高产出,又能节约时间。本框架无需开发即可实现服务注册、服务发现、负载均衡、服务网关、配置中心、API管理、分布式事务、支撑平台、集成框架、数据传输加密等功能,是学习SpringCloud整体业务模式的完整示例,并且可以直接用于生产环境
Stars: ✭ 341 (-24.72%)
Mutual labels:  mysql, mongodb
Open source bms
Open Source BMS 后台管理系统
Stars: ✭ 351 (-22.52%)
Mutual labels:  mysql, backend
Conf
Конспекты докладов IT-конференций
Stars: ✭ 365 (-19.43%)
Mutual labels:  backend, frontend

HackYourFuture Curriculum

Here you can find an overview of the HackYourFuture program. It gives insight in how our program is structured, organized, what you can expect from the modules that we teach and last but not least where we teach and where you can find support during the week. Below you can find an outline of the contents and learning goals per module. The headers of the different modules link to the actual repositories that both student and teacher will use to go through the material.

  • Are you a new mentor? Take a look here for some practical tips on how to get started!
  • Are you a new student? Be sure to get started with our Welcome Guide to see how to prepare for your first class and beyond!

Overview

The HackYourFuture curriculum consists of 8 modules, spread over 7 months. Each module has a duration of 3 weeks, with the exception of React (5 weeks) and Project (7 weeks).

In the following diagram you'll find the sequence of all the modules included:

Curriculum

Learning goals

If you follow the program you'll learn the following skills:

  • Ability to build a basic modern full-stack web application (using NodeJS, MySQL and React)
  • Get experience with working in teams using Agile principles
  • Knowing how to learn and self-teach new programming concepts
  • How to use third-party libraries/APIs
  • Have a basic understanding of what it means to work on digital products

Module #1 - HTML/CSS/GIT

HTML/CSS

Welcome to the wonderful world of web development! In this module you will learn the basic building blocks of the web: HTML and CSS. HTML gives us the power to add text, images and videos to a page. CSS gives us the power to organize these parts and make it look nice.

The products of HTML and CSS comprise a two-thirds of what is called frontend (the final third is client-side JavaScript, which you will learn about in later modules). What is frontend? It's another word for the presentational part of a piece of software. In terms of web development we're talking about "what you see" when you go to any website.

Think of it like this: if a webpage were a person, the HTML would be the skeleton and CSS the skin and clothing!

You'll also be learning GIT, software that will allow you to save your folders and files in case they accidentally get deleted or end up corrupt. It can do much more and you'll learn all about that starting from week 2!

In the following table you can find the module material, week-by-week:

Week Topic Reading Materials Homework Lesson Plan
0. Quick Start! W0 Reading - -
1. Command Line Interface basics, HTML/CSS syntax W1 Reading W1 Homework W1 Lesson Plan
2. Introduction to GIT, Responsive design W2 Reading W2 Homework W2 Lesson Plan
3. GIT branches, CSS frameworks, Working with the browser W3 Reading W3 Homework W3 Lesson Plan

Module goals

By the end of this module, students should have a familiarity with and basic understanding of the following:

  • Be able to write syntactically correct HTML and CSS
  • Understand what is meant by responsive web development
  • Practice navigating your computer using the command line interface (CLI)
  • Learn about GIT and its basic usage
  • Become familiar with Trello and GitHub as a way to submit your homework
  • Know your way around Visual Studio Code
  • Feel comfortable working with your browser's inspector

Module #2 - JavaScript

JavaScript

In this module you'll make a start into the wonderful world of programming. We will be using the programming language JavaScript to do so. You'll learn about the basic building blocks of programming: loops, functions, control flow and more. Consider these as the ABC's of programming, without them it's impossible to write working software!

Week Topic Reading Materials Homework
1. Variables, Variable Types, Operators, Objects, Arrays Reading W1 Homework W1
2. Loops, Control Flow, If/Else, Naming Conventions Reading W2 Homework W2
3. Functions, Scope, ModernJS. Reading W3 Homework W3
4. Higher Order Functions, Array functions, Closures Reading W4 Homework W4

Module goals

By the end of this module, students should have a familiarity with and basic understanding of the following:

  • Have an idea of what computer programming is
  • Know the basic building blocks of JavaScript
  • Correctly write and use variables, functions and loops
  • Understand the control flow
  • Think like a programmer

Module #3 - Browsers

Browsers

In Browsers you'll learn all about how to use JavaScript within the browser. First, you'll learn about how HTML is structured within your browser: we call this the Document Object Model (DOM). Once you've gotten the hang of that we'll apply JavaScript to it, in order to manipulate the elements and make our pages more interactive. We call this DOM manipulation and it's one of the most interesting things about JavaScript! We will finish off with a group project to already combine everything you have learned into your first web application. Besides the technical part, you'll improve your 'softskills' as well in the Presentation module. This is a two weeks program that will get you out of your comfort zone. Check the Read.me file for a more detailed explanation and overview.

Week Topic Reading Materials Homework
1. Document-Object Model (DOM), DOM manipulation, Presentation Module week 1 Reading W1 Homework W1
2. Presentation Module week 2, Group project week 1! Reading W2 Homework W2
3. Group project week 2 + Tech interview Reading W3 No individual homework

Module goals for Browsers

In order to successfully complete this module you will need to master the following:

  • Understand what the Document Object Model (DOM) is
  • Use the basics of DOM Manipulation
  • Gain awareness of the inner workings of JavaScript

Module #4 - Using API's

JavaScript3

A big part of being a programmer means moving data from one place to another. It also means working with other people's software. In this module you'll be learning about one of the core things of what makes a web developer: working with APIs! On top of that you'll also learn how to think differently about how you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done differently. In the end you will also build a full project by yourself that takes data from publicly available API's to create a web application with substance!

Week Topic Reading Materials Homework
1. Synchronous vs asynchronous, Callbacks, Promises, The Event Loop Reading W1 Homework W1
2. Application Programming Interface (API), Fetch, Async/await Reading W2 Homework W2
3. Individual project + Tech interview Project

Module goals for Using API's

In order to successfully complete this module you will need to master the following:

  • Differentiate between synchronous and asynchronous operations
  • Learn what an Application Programming Interface (API) is
  • Connect with different public APIs
  • Build a Single Page Application (SPA)
  • Work with pre-existing code

Module #5 - Node.js

Node.js

Any software application consists of at least 2 parts: a frontend, which is what the user sees and interacts with, and a backend. This module will expose you to the wonderful world of backend development, where you learn all about where your data goes once you've pressed that submit button. You'll be writing web servers and learn how to send users the right feedback.

Week Topic Readings Homework Lesson Plan
1. Client-server model, HTTP & Express Readings W1 Homework W1 Lesson Plan W1
2. REST, CRUD & API Readings W2 Homework W2 Lesson Plan W2
3. Templating engines, API calls Readings W3 Homework W3 Lesson Plan W3

Module goals for Node.js

In this module you will get familiar with the world of backend development. By the end of it you have learned:

  • What is meant by the term backend
  • The client-server model
  • What HTTP and REST mean
  • How to create your own web servers with Node.js, using Express.js
  • What a templating engine is.
  • How to use the Node Package Manager (NPM).
  • How to use Express.js to make a RESTful API
  • How to build a small full-stack application

Module #6 - Databases

Databases

In this module you'll learn all about a fundamental part of any software application: how to (safely) store data, so that it can be used on-demand. You'll learn how to structure and group data so your apps know where to find and store the correct data.

Week Topic Readings Homework Lesson Plan
1. What's a database, Entities, Data structures, Structured Query Language (SQL) Readings W1 Homework W1 Lesson Plan W1
2. Identifiers, Relationships, Domain Modeling, Advanced SQL commands Readings W2 Homework W2 Lesson Plan W2
3. Normalization, Transactions, SQL Injection, NoSQL (with MongoDB) Readings W3 Homework W3 Lesson Plan W3

Module goals

In this module you will get familiar with the complexity of storing data. By the end of it you have learned:

  • What the meaning is of a database entity
  • How to work with Structured Query Language (SQL)
  • Learn all about the relational model
  • Recognize the basic setup of a database
  • Know about MySQL as an example of a relational database system
  • Learn about NoSQL databases, with an emphasis on MongoDB

Module #7 - React

React.js

In these 5 weeks we will go back to the frontend and learn how to make faster, more modern user interfaces. You'll become more familiar with a frontend technology called React.js, a JavaScript library written and maintained by Facebook.

It is mainly used to create dynamic user interfaces, changing the data a user sees depending on their input.

In this module you'll learn about how to think about webpages in a radically different way: instead of making seperate pages, you'll be making components of pages. Instead of hardcoded content, you'll make structures that can hold different data.

Week Topics Reading Materials Homework Lesson Plans
1. What is React, JSX, Props, Deploy a static site Readings W1 Homework W1 Lesson Plan W1
2. State I, Hooks I, API calls, Forms Readings W2 Homework W2 Lesson Plan W2
3. State II, Hooks II, Third party components Readings W3 Homework W3 Lesson Plan W3
4. Context, Client-side routing Readings W4 Homework W4 Lesson Plan W4
5. Test Details - -

Module goals

By the end of this module, students should have a familiarity with and basic understanding of the following:

  • Understand the React way of thinking about user interfaces
  • Know the importance and place of state and how to pass it down
  • Be able to work with different lifecycle hooks
  • Distinguish between class-based versus function-based components
  • Recognize the utility of modularization
  • Putting emphasis on writing reusable code (components)
  • How to handle client-side routing

Module #8 - Project

Project

In the upcoming 7 weeks you'll be immersed into the web developer life. By the end of it you will have created a full-stack web application and published it to the internet.

Everything you have learned so far will be combined and put into practice. Added to that you'll learn some more cutting-edge technologies that will prepare you for a great start in a modern software company. We will start out with the basics and incrementally add more complexity. This way you'll learn how all the pieces of a RESTful API fit together, thereby gaining a deeper understanding of where the backend stops and frontend starts.

Along with practicing your programming skills you will also be working on your communication skills. This is just as important, because you need to be able to communicate your ideas and efforts in an easy-to-understand manner.

Week # Topic
1. Introducing Project, Build the backend
2. Build the frontend
3. Bring everything together
4. Presentation, Discuss Features
5. Group: Working on features I
6. Group: Working on features II
7. Final Presentation

Module goals:

By the end of this module, students should have a familiarity with and basic understanding of the following:

Technical skills:

  • How to build a complete full-stack application
  • Understanding how each part of an application relates to each other
  • What it means to work on a feature
  • How to work with GIT in a team setting
  • How to write readable code

Communication skills:

  • How to communicate effectively with team members
  • Keeping track of your project's progress
  • Knowing if you understand what's asked of you
  • How to communicate with non-developers about what you're doing
  • Learning how to be solutions-oriented
  • How to work in a Agile setting

Graduation! What's next?

The final stage is graduation! If you've reached this point you can officially call yourself a junior web developer. Be proud of yourself!

At this stage the next step is finding a job. HackYourFuture will assist you, but the responsibility is still on you.

We'll work on finding you an internship/job in any of the companies we have within our network. Your job is to keep your skills sharp, both technically as non-technically. Next to that, be sure to check the following repos:

You can click on any the following addons to keep improving your skills:

Postgrad QA Training

Last but not least, If you want to improve your English and Presentation skills, please contact the team and we will make the proper arrangements. Same if you want to join a Fellowship group!

Final words

Learning how to write software is a challenging endeavour. However, with the right material and structure it is very doable.

This curriculum is our effort to make your ambition possible. You are free to use it for your own benefit.

If there's anything inside that you might think could be better, don't hesitate to tell us and/or make pull request!

Good luck with your journey and happy coding!

The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. Our curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it:)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].