4 Things to Keep in Mind While Learning Web Development as an Absolute Beginner
#2 Strengthen the foundations before jumping into frameworks and libraries.
If you’ve decided to learn Web Development or have started with it already, congrats, you’re on the path to becoming one of the most sought-after professionals in the industry.
Every beginner starts their journey in web development by learning frontend, backend, and some tools which are important to build a web project. However, apart from knowing what to learn, it is important to know how to increase the return on the time you’ve invested in learning a skill.
So, before you move ahead towards becoming a web developer, here are a few things you must keep in mind to increase the effectiveness and efficiency of your learning process.
1. Utilize Quality Online Resources for Free instead of Paying for a Course
When you first decide to start learning a skill, it is tempting to enroll yourself in a course that promises to teach it to you from scratch in a month. However, in most cases, you can easily access much better online resources for free, given you invest some time into proper research of the same.
One of the best parts about the online software development community is that it believes in giving back to the community. Some great Youtube channels and blogs online provide excellent tutorials and project ideas on Web Development, all while costing nothing from your pocket.
This is why learning such skills has now become more accessible than ever, no matter what financial background you come for.
Some of the best online resources for Web Development are:
- w3Schools: If you want to learn Web Development, you should definitely refer to w3schools as a beginner. While the tutorials may be outdated, it is a good resource to get a detailed Web Development Roadmap of what to learn and when to learn. It is also particularly useful if you want to learn a particular feature in-depth and try it out in the Code Editor alongside.
- Traversy Media: My personal favorite, this channel not only has effective tutorials but also provides you with detailed projects that allow you to learn with a hands-on approach. The content is well-curated and well explained. A good video to check out is their yearly Practical Guide to Web Development.
- Programming with Mosh: Another one of my favorites, this Youtube channel has dedicated playlists for front-end as well as backend development covering everything right from the basic to the advanced stuff. The videos are succinct and provide you with nothing but value.
- CodewithHarry: From cheat sheets, tutorials, to projects and industry insights, this channel provides you with everything that you need for a headstart in development. One of the best parts is that it also offers tutorials in Hindi, which is of added benefit to someone who feels more comfortable in a bilingual medium.
2. Strengthen the Foundations Before Jumping into Frameworks and Libraries
A mistake that a lot of people make while learning web development is skipping over the basic stuff like HTML, CSS, and Vanilla Javascript and jumping straight into the fancier stuff we call frameworks. This later costs them since proper utilization and understanding of those frameworks can only come once you know what lies underneath.
It is very important to strengthen your HTML/CSS and Javascript foundations before you decide to take up a framework. Here’s why:
- While frameworks are busy keeping us away from our roots, the HTML5, CSS3, Vanilla JS combo has grown so powerful that it’s mind-boggling how much catching-up we have to do.
- Frameworks raging through the industry can change in a blink. This is when people with strong fundamentals will prove to be irreplaceable assets!
- Every framework has its own set of limitations (no one’s perfect). And, if you want to design a webpage out of the imagination of these framework developers, you have to rely on your own strength to create from scratch!
3. Avoid Tutorial Hell by Learning through Mini-Projects
One thing you must keep in mind is the difference between strengthening concepts and mastering them. It is very important to have strong foundations and a clear understanding, but not so much to have mastered HTML, CSS, Vanilla JS to the point that you try to learn the entire syntax.
You only need to know how stuff works to the extent that when you vision to do something with your web page, you’re able to Google and figure how to do that. (Remember, Googling is now officially a skill!)
This is the best way to learn development — by making mini projects and learning more about features and properties through the process. Since you yourself look up most of the stuff while actually implementing it, you’re more likely to understand it better and retain it.
Mini projects are the best way to implement and hone your development skills when you’re just starting out and learning new things every day. Due to their limited domain, you can focus on a specific area and play around with different things in regards to just that.
For example, while learning the grid display, watch a video or two to get a basic idea of how it works. But when it comes to the different features and properties, learn by doing. Make a simple photo gallery page and play around with different layouts.
4. Make Sure to Follow Best Practices & Write Clean, Maintainable Code
When you just start to learn a new skill, it is possible to oversee the best practices when it comes to writing your source code, since your prime focus might be to just make things work.
However, it is very important to pick up the best coding practices right from the start and inculcate them into your development habits. This not only makes you a better developer but also avoids the frustration that comes when you revisit your files to find poorly written and ill-formatted code.
Some Best Practices to follow while writing your source files are:
- Ident and comment out your code properly.
- Don't mix layout with styling. Strictly limit your HTML files to the layout and content of your page, and use CSS for the styling.
- Use descriptive class and id names, and follow a pattern. For eg, class names for buttons of different sizes could be — btn, btn-s, btn-md, btn-lg, btn-xl, as opposed to arbitrary names such as demo1, button, largebtn.
- Place your Javascript files at the bottom instead of within the <head> tag. The problem with the latter is that it would load your javascript files first and consequently, your content will be loaded after. By placing Javascript files at the bottom of your documents, you’ll ensure that JS files will be loaded only when the content has been properly displayed.
- Use HTML Semantically, meaning using tags with meaning. Instead of an endless list of <divs>, use semantic tags such as <article>, <nav>, <footer> etc. This gives meaning to your page and helps with SEO and accessibility.
- Always use a CSS Reset. Because by default, browsers don’t apply the same default styling to HTML elements, a CSS reset will ensure that all elements have no particular style so you can define your own without the risk of many cross-browser rendering issues.
- Test while building to avoid cross-browser compatibility issues. Cross-browser issues are a major problem for front-end developers, especially due to Internet Explorer. If you test your files on Firefox/IE/Chrome while you’re writing them, cross-browser rendering problems will be much easier to fix.
Additional Readings:
