This is a mind map of the way I see the diffrent parts of web developpement, this is not by any means complete, my only goal through this map is to simplify the scary jargon used by web developpers.
To each exercice on the following list its level of difficulty, please implement a minimum of two chosen according to your skill level.
You will need a code editor, use any editor you feel confortable with, however I recommend Visual Studio Code.
You might also want to use Git,I strongly recommend you do so.
You will be introduced to basic HTML and CSS through the following exercice.
GOAL : Make a tribute page for a known historical person of your liking.
TRIBUTE PAGE EXAMPLE OF FREECODECAMP.COM
You will be introduced to basic CSS positioning through the following exercice.
GOAL : Make a beautiful new tab page for your browser, one that is similar of that of Momentum Chrome extension
PS : To get a better feel of the page please go ahead and install Momentum extension
In this exercice you will have to combine various HTML and CSS tricks to implement a "production-ready" website
GOAL : Make a template of a general pupose landing page.
EXAMPLE OF A GENERAL PURPOSE WEBSITE FROM THEMEFOREST
PS : You don't have to implement all the features of the example.
This is an advance CSS exercice, if you are confident of your CSS skills I really encourage you to give it a shot.
GOAL : Remake one of the various css themes available on CSS Zen Garden.
- FreeCodeCamp : Learn to code for free
- Mozila Developers Network web tutorials
- Github statistics of 2017
- Web Design in 4 minutes
- How CSS Selectors Work
- CSS Position
- Centering in CSS: A Complete Guide
- Complete Guide to Flexbox
- CSS illustrated and animated properties
- SPA vs MPA
- SQL vs NoSQL
- More Detailed Web Developer Roadmap
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent