If you have read my previous blog about "Why You Should Learn Web Development in 2021" or if you have been hearing a lot about Web Development, You probably already realized the upsides of learning Web Development. You must be asking yourself, "What's Next? How do I get started?" If yes, Then you are at the right place.
In this blog, I will be sharing resources that will help you learn Front-End Web Development in 100 Hours or less. I will be starting off with most basic things, so the only pre-requisites for this plan is having a laptop or a PC and knowing how to use it.
I will be following an order of things you should learn first before you move on to next.
You will need an editor to write code!
Download Git, You will learn more about it towards the end of this blog.
1. Internet
Time Needed: 5 Hours.
You probably already know what the internet is if you were able to find this blog but you need to understand some basic terms like "Browser", "HTTP", "Client" and "Server". This will help you understand what exactly are you learning and how it exactly works.
You are only required to have a very basic knowledge of the Internet's working to move on, So I would suggest watching Youtube Videos about "How the Internet Works". I recommend watching the following video by DevTips.
2. HTML
Time Needed: 25 Hours.
HTML or Hyper Text Markup Language is the standard markup language for creating Web pages. Almost every web page you find online has an HTML code behind it. It is the first thing you need to learn as a Front-End Developer.
This should help you understand How HTML works, How the browser uses HTML to create a Web Page, What are different kinds of things you can do with HTML and How to create your first HTML page.
FreeCodeCamp is a website that I recommend to everyone who is learning anything related to Software Engineering. It has a very comprehensive and beginner-friendly guide for everything. Here, you should expect to learn more about different elements in HTML, When and Where to use them.
2.3 Practicing HTML
By now you should have a good understanding of HTML, How it's used and How you can create web pages using it. Now it's time for you to apply your learning. The more you practice the better you get. You should be able to create an about page of yourself by now. Make sure you use as many elements as you can. Below are more resources that will help you learn more and solve your doubts if any.
- HTML - W3Schools
- Learn Html
3. CSS
Time Needed: 30 Hours.
CSS or Cascading Style Sheet is a style sheet language that describes how HTML elements are to be displayed on a screen. It contains properties like Positioning of elements, Colours, Borders, Sizes of elements and everything else that has to do with styling of a web page.
Here is an example of how Apple's website looks with and without CSS
Interesting, right? Below are the resources that I recommend for learning CSS
This should help you understand the concept of CSS, How it works, How to style elements, How to power your HTML page with CSS and more.
This will provide you with a better understanding of the properties of CSS and how and when to use them. After this, you will be able to Style your web pages with some sick designs.
3.3 Practising CSS
By now you are probably able to create a Web Page using HTML and style it using CSS. Let me tell you something interesting.
With what you have learnt so far (HTML and CSS) you can create some unbelievable websites and components. You can design your entire portfolio with just HTML and CSS. If you keep practising you will be able to score freelancing clients and even get some frontend jobs without learning anything else!
Here is an example of just how much you can do with only HTML and CSS
What you see here is not a painting or a picture, It's actually a web component. This work was done by @cyanharlow using only CSS and HTML! Now, you don't need to be able to do a fraction of this to get what you want. This is just for you to understand the power of HTML and CSS.
For practice, try to style your About Page that you created while you were learning HTML. Below are some useful resources for learning more and inspiration.
- CodePen
- CSS - W3Schools
- CSS Tricks
4. JavaScript
Time Needed: 35 Hours.
JavaScript is the most used programming language on the internet, Every big website you see uses JavaScript for frontend in some form. Facebook, Amazon, Google, Everyone uses JavaScript for frontend and everyone agrees that it's not possible to learn entire JavaScript (Even it's creator admits he doesn't know all of it), So how much do you really need to learn? For now, Just enough to create simple components like Navbars, Dropdowns, Sidebars, etc. In future, you will probably learn one of the Frontend frameworks of JavaScript like ReactJs or VueJs but for now, only focus on learning the basics of JavaScript. However, I will mention that every minute you spend learning JavaScript will be useful to you in future.
This should get you started on basics of any programming language and how JavaScript is utilised in web pages. You will also come across a bunch of new things like Data Structures, Loops and Conditional statements but don't get demotivated if you don't understand them right away, be willing to spend some extra time on them.
ECMAScript 6 is a version of JavaScript that is understood by the browsers. It contains some additional features that extend JavaScript.
This should provide you with more practical knowledge about JavaScript which should be enough for you to get started.
4.4 Practising JavaScript
There is really no substitute for practice, By now you should be able to create a Web Site using HTML and CSS and add dynamic components to it like Dropdowns, Sidebars etc. Try creating your own portfolio with multiple pages, a navbar with dropdown and contact form!
Other Resources that can help ease your learning
- JavaScript - W3Schools
- Learn Javascript
- Javascript - 30 Seconds of Code
5. Git
Time Needed: 5 Hours.
Git is a form of tracking changes to your code. Imagine you are working on a website. You code 2 pages. Then your friend comes along later and codes another 2 pages. Then you edit a page, and your friend edits a page. At the end of it, there are some issues, but it's hard to coordinate who edited what and when. So Git solves that by tracking all the changes that you or your friend made and keeps both of you updated with the latest version of the website that has been coded last. Git is useful when you have multiple people working on the same project. It is essential for a developer to know how to use Git because you will be almost always working in a team. Fortunately, Git is very easy to learn. Check out the following Resources to learn Git
So first thing, Signup for Github
This should make you understand more about Git.
This contains all the commands you will be using.
Practice Git
Push all the projects that you created so far to Github using Git.
Conclusion
You have been provided resources to learn
- How the Internet works
- HTML
- CSS
- JavaScript
- Git
If you finish these, it should be enough for you to kickstart your career as a Web Developer. Remember: Do Not Give Up, Be ready get out of your comfort zone and Never stop learning. If you have any questions, leave a comment.
Do consider following me on Twitter @abbasmdj where I post a lot of resources to learn Frontend, Backend, DevOps, Machine Learning and as well as Freelancing. Make sure you subscribe to my newsletter so you don't miss my blogs where I post comprehensive content for developers at all stages, Beginners to Experts.
