Stage 1: HTML & CSS
This is the likely the start of your journey to learning how to code! At the end of this stage, you will be able to create a responsive multi-page website from scratch using HTML and CSS.
Concepts to Learn:
- HTML tags and attributes
- Common CSS properties to style typography and layouts
- CSS selector specificity
- Linking to external resources in <head> and in <body>
- Media queries
- How to debug CSS issues
So that you are able to:
- Use the appropriate HTML tags and CSS properties
- Add style sheets and custom fonts
- Add links and images
- Build responsive websites for different devices
- Look up documentation and learn what the different HTML Tags and CSS properties do
- Use the Chrome Inspector to debug CSS issues
Milestone:
- Create a responsive HTML and CSS website using a text editor without following a tutorial that walks through the entire process.
Stage 2: Interactive Website using HTML, CSS and JavaScript
Now it’s time to add some interactions to your websites with JavaScript. You will deepen your knowledge of HTML and CSS and how you can change the appearance of the website based on user behavior.
Concepts to Learn:
- DOM (Document Object Model)
- HTML form tags
- Event listeners – what they are and when to use them
- How to change HTML and CSS attributes with JavaScript
- How the browser loads and reads JavaScript files
- How to debug JavaScript issues
So that you are able to:
- Submit a form and display the data on the webpage
- Add event listeners and change the HTML document (e.g. add, move, change or delete elements)
- Change CSS properties with JavaScript / jQuery
- Select specific elements by finding it by the HTML tag, ID or class.
- Debug JavaScript errors in Chrome Inspector
Milestone:
- Created first interactive site without following a tutorial that walks them through the entire process
Stage 3: Your First Programming Language
Learning your first programming language is NOT the same as learning HTML and CSS. It’s normal to not get it. It’s a totally new way of thinking!
In this stage, you will learn how to start writing functions and solving problems!
Concepts to Learn:
- Data structures (e.g. arrays, objects)
- Built-in functions in your programming language
- Functions – how to write one and how they work
- Loops
- Conditional statements
- Object Oriented Programming – classes, objects and inheritance
So that you are able to:
- Break a simple problem down and solve it step by step
- Know what data types to use in various situations
- Construct classes and write your own functions
- Run different code depending on the condition
- Read and understand what other people’s code is doing
Milestone:
- Complete 10 Medium challenges on Edabit or 10 of the Intermediate algorithms on FreeCodeCamp.
Stage 4: Your First Framework
Time to learn the corresponding MVC (Model-View-Controller) framework for your language. This is where you get to combine your front-end knowledge with your programming knowledge!
Examples of MVC frameworks:
- Ruby => Ruby on Rails
- Python => Django
- PHP => Laravel
Concepts to Learn:
- Model-View-Controller architectural pattern
- The general file structure of your framework
- HTTP methods (get, post, update, delete) (aka RESTful design)
- How the records in the databases links up to the Models in the application and ultimately displayed in the user interface
- Built-in helper syntax to create files, run tests or migrations
So that you are able to:
- Install the framework and create a new application
- Use the command line to do common tasks like create a migration, a new model, controller or running tests
- Write database migrations and create a table in the database
- Create RESTful routes
- Create templates that display dynamic data from the database
- Create, Read, Update and Delete entries in the database
Milestone:
- Create a simple CRUD application on your own
Stage 5: Create a complex web application
This is a continuation of learning your first framework. Now you will go deeper into what you have learned from Stage 4 and create more complex applications.
Concepts to Learn:
- The different types of relationships two database tables can have with each other (e.g. one-to-one, one-to-many)
- User authentication
- Sessions and redirects
- Validations: Client-side and model validations
- Database queries
- Unit and integration tests
So that you are able to:
- Combine several different tables and models together and use the right relationships for them
- Implement user login
- Lock down access to certain records or parts of the application so only specific users can see them
- Validate information before saving to the database
- Find records using a variety of methods and conditions and optimize the queries
- Write unit and integration tests to make sure your code works properly
Milestone:
- Create a CRUD application with 4-6 tables that relate to each other. Your web application will have 2-3 main features.
Get Ready for Your Job Search!
Congratulations for making it here! It’s a huge achievement!
In our Reinvention framework, you’ve now progressed to the “Showcase” pillar.
You’ll need to create a portfolio and resume. If you’ve followed along the stages, you should have a few projects to put into your portfolio.
Check out the Job Search courses to get started!