How I would learn FrontEnd Web development without Experience | Reedited 2024
How to reach intermediate level the easiest way. For the advanced level I can create another video
1. Patience, practice and learn from the best! Some people might be better at HTML5, others at CSS3, and others at JavaScript. Find a quite place where you are most productive
2. Start to study the core parts(fundamentals) of HTML5, CSS3, JavaScript and the DOM
3. How to work with Developer Tool from Google Chrome(best by far). This allows you to see(inspect) the HTML, CSS, and JavaScript. This tool will be your best friend! I mainly use the following tabs: Elements, Console, Source, and sometimes the Network tab
4. The platforms on which I would start learning and practicing are: for Videos courses www.pluralsight.com(2-4 hours per day) For practicing: www.codecademy.com(2 hours per day). After some progress, you can switch more time to codecademy.com because is more about writing code. Pricing: On Codecademy the ideal courses for beginners are free! After you can pay $29.99 per month for all courses and on completion you will get a certificate. On Pluralsight, the access for all video courses is $22,50 - $45 per month. Both platforms have content organized for beginners, intermediaries, and advanced
5. If you want to understand something more in detail, you can look for examples and explanations on: www.w3schools.com, developer.mozilla.org(MDN). Typically if you search for something regarding FrontEnd Web development these sites appear first
6. Find a comfortable position while spending time on your computer. I use a MacBook and prefer to stay in bed for a more comfortable option. When I used to spend hours and hours on a chair my back started to hurt and I couldn't focus
7. After you are familiar with the basics, you can "Inspect" Web pages that you like and see how are they using HTML and CSS
8. Learn the basics of making basic requests to APIs and the basics of HTTP
9. You can have a look the official specifications for: HTML5 - html.spec.whatwg.org, DOM - dom.spec.whatwg.org, and CSS3 - www.w3.org/Style/CSS/specs.en.html
10. For the code editor, I recommend VS Code. You can install Microsoft's(GitHub) Copilot for AI assistance. I have a video about the extensions that I use with VS Code
11. If you get errors or don't understand what is wrong you can Google what you get and most likely you will find it on stackoverflow.com. There you can ask your questions and see a lot of answers
12. Certain times you can check some public code on GitHub of important players in the software industry and see how they write and organize code
13. Recently, you can use chatGPT, Google Bard, and Microsoft's Chat AI in Edge browser for some help and inspiration but at the moment you can't rely on it. You will need to verify the result. With Microsoft Chat on Edge, you can navigate to certain pages with documentation and ask some general questions
14. For fun and motivation, you can follow Web development accounts on social media and you can watch some YouTube videos