Frontend Track
HTML
TIP
At this stage, don't worry about making your website pretty yet,learn the basics and how to write Semantic HTML
- Projects Todo
- Build 5 Web pages
- Link these 5 Web pages for a User to navigate easily from one web page to the other
- Include Images in all of the Web pages
- Publish it to Github using Git
CSS
TIP
Learn the Basics, the structure, Grids & Flexbox, Media Queries and Responsiveness
- Projects Todo
- Style each of the 5 Web pages
- Let each of the 5 webpages have it's own external CSS
- Make a Gallery website responsive using Media Queries
- Make a Gallery website responsive using Grids & Flexbox
- Update your Github with the updated project and new projects
JavaScript
TIP
Learn the Syntax, basic constructs and concepts. Learn how to manipulate the DOM , make AJAX request, ES6+ and modular programming. You may choose to learn Jquery
Resources:
Projects Todo
- Add interactivity to the 5 Web pages such as; animations
- Populate your Content Dynamically which makes an AJAX request to a JSON or text file
- Build a Simple Calculator Application
- Build a timer Countdown
Project - Part 1
TIP
At this stage you have learnt quite enough to practice and build awesome stuff.
You may choose to build stuff on your own and share with other people or the community you belong to for feedback.
You may also look for an Open source Project on Github, clone and redesign the Interface, help them with documentation or comment on their code and Submit a Pull Request.
- Projects Todo
- Build 5 Websites
- Build an Online Portfolio website for yourself
- Build a Currency Converter Appplication
- Contribute to the Open Source Community
- Be part of a Developer Community and put your work out there.
Package Managers
TIP
Package Managers helps you bring external libraries and plugins into your project. Package Managers takes away the hassle of you adding or updating packages. You may choose to learn either NPM or Yarn
- Projects Todo
- Install dependency management into your previous projects
- Include some external library into your project
- Create a login form with validation from an external validation library
CSS Preprocessors
TIP
CSS Preprocessors let you add functionality to your existing CSS and let you do things that CSS can't. You may choose to learn either Sass or PostCss or even Less or Stylus. It's recommended you learn Sass.
- Projects Todo
- Include CSS Preprocessors in your previous projects
CSS Frameworks
TIP
You really don't need to learn this but it's good to know it as it will help you with rapid prototyping and building MVPs. You may choose to learn Bootstrap, Foundation, Semantic-UI or even Bulma
- Projects Todo
- Redesign all projects using any CSS Framework of your choice
CSS Architecture
TIP
This allows you to structure your CSS and makes it easy to maintain. You may choose to learn BEM which is recommended
Task Runners
TIP
Tools that helps you in building and management. You may choose to learn Task Runners like NPM Script or Gulp
Module loader/Bundler
TIP
Tools that helps you in bundling. You may choose to learn Webpack which is easy to learn as compared to Rollup
Linters
TIP
Linter's help you write Clean and readable code. You may choose to practice with ESLint (Recommended) or JSlint
Build Stuff
TIP
At this stage, you have learnt a lot of Javascript and CSS therefore, build something amazing with all what you have learnt.
- Projects Todo
- Build an Application which uses everything you have learnt so far. Example: A Javascript Library
Pick a Javascript Framework or Library
TIP
At this stage, you have learnt a lot of Javascript therefore, it will be good to know your way around some frameworks or libraries and their state managers. You may choose to learn VueJs and Vuex or ReactJs and Redux.
NB Do not buy into the hype, compare them and understand
Resources:
Projects Todo
- Build an Application with any Javascript Framework of your choice
Testing
TIP
Testing assesses the quality of a product. There are a lot of tools for testing. However, before you learn any testing tool, it is advisable to understand testing and it's importance. Some of the testing tools are; Karma, Jest, Mocha etc.
- Resources:
Progressive Web Apps
TIP
Enhance your web application by delivering an applike experience to it's users.Learn about Service Workers and how to make Web Applications Progressive.
Static Typing
TIP
Static typed languages are those in which type checking is done at compile time.
Server Side Rendering
TIP
This is a technique which invloves employing scripts on a web server to produce a response customised for each client's request to the website. Here, you may learn Server Side Rendering in whatever Framework you choose to learn. Example: NextJs or NuxtJs.
Functional Programming
TIP
Functional programming (FP) is a decorative programming paradigm,which menas programming is done with expressions or declarations instead of statements.