Learning web development is intimidating. There are so many resources and tutorials that it can quickly seem overwhelming. It’s often difficult for beginners to web development to learn the best practices and technologies to focus on. So we’re going to examine six common mistakes that beginners make and how they can be avoided.
By learning how to avoid these six mistakes, you’ll be on the road to impressing potential employers and getting your first job.
Relying On jQuery
jQuery is a JavaScript library which creates a layer of abstraction for DOM manipulation, event handling, animations, and more.
Many developers begin their journey into front-end start with the misconception that jQuery is an easier version of JavaScript. What most fail to realize is that jQuery not be a replacement for JavaScript, and relying on it can have severe implications on your ability to thrive as a front-end developer.
Many employers may even see jQuery as an impediment to a candidate, because it can show a lack of understanding of core JavaScript concepts. Thus, if you choose to learn jQuery, you must not use it as a crutch for adding behavior to your web applications.
Recommendation: Learn JavaScript like the back of your hand. Kyle Simpson has a ton of great (and free) online books for learning the ins-and-outs of JavaScript.
Relying On JavaScript Frameworks & Libraries
React, Vue, Angular, and more! These are some of the hot frameworks and libraries in the JavaScript community right now.
While knowledge of, and ability to work with, popular JavaScript frameworks and libraries are marketable skills to have, you must also have a good knowledge of JavaScript. If you fail to learn the foundations of JavaScript, you never truly learn what the features of these frameworks are doing under-the-hood. Some people learn best by starting with the basics and working their way up to the frameworks. Others learn best by delving into the framework or library and picking up the basics as they go along. Whichever method works for you, go for it! Just don't forget that knowledge of JavaScript is imperative to becoming a successful web developer.
Recommendation: Build a strong foundation of JavaScript. will allow you to ace technical interview questions. If you understand JavaScript to the core, you will have no problem working within a framework or library.
If you’re unsure how to begin learning JavaScript, check out my previous blog post on how to get started.
Relying On Bootstrap
Bootstrap is a UI framework for building websites. Many developers starting out view Bootstrap as an easy way to style a web application, and while it can be useful in specific circumstances, it should not replace your knowledge of CSS and responsive web design.
Including Bootstrap in small web applications can have performance implications. It’s much easier on load-time to write the CSS code yourself. Employers would much rather see your knowledge of CSS than any UI framework.
Recommendation: Learn CSS Flexbox and Grid for a responsive layout, learn fundamentals of CSS and once you master that, learn Sass. If you have trouble designing your app, head over to dribbble for some design inspiration, or check out the templates on Wix or Squarespace.
Not Modularizing Your Code
It’s extremely important to ensure your code is modular; do not put it all into one HTML file. Not only is it bad practice to have HTML, CSS, and JavaScript into one file, it’s messy and difficult to test.
Recommendation: Break your JavaScript into an external file. This allows you to separate functionality from your view. Once you feel comfortable with JavaScript, I recommend learning about native web components.
It will greatly enhance your project architecture and make it easier to write unit tests. You can additionally consider a JavaScript framework or library like React or Vue. Both of these make it very easy to implement modular components.
Not Using Semantic HTML
One thing I often see when reviewing candidates’ portfolios and projects is the over-use of <div> and <span>. You should always be using semantic HTML5 elements. Why? Because it’s accessible.
Recommendation: Really get to know the semantic elements you have available to you. Learn how to create a markup hierarchy. Additionally, learning about web accessibility is a great skill and can impress potential employers.
Not Learning Responsive Design
If you’re beginning your web development journey, responsive design skills are a must. The majority of web surfing is done on mobile devices and tablets, thus our sites must be able to respond to different screen sizes.
Recommendation: Take a course or two on responsive design. Learn how to use media queries to style your application differently. Learning Flexbox and CSS Grid will also be very useful. You might even want to take a mobile-first approach.
I hope these tips have helped clarify some common misconceptions. Just remember that we all started somewhere, and it will get easier over time.
Top comments (61)
Great post!
I do disagree with this however
There are different approaches to learning. I started from a very theoretical point of view and wanted to have good base understanding before moving forward. I ended up not building a lot of things because there was always so much to learn.
My suggestion for any beginner developer or junior is just to build things. Don't worry about tools, don't worry about making things perfect. Just build things. When you do, you'll learn about all sorts of things related to software development. It also makes it easier to understand the core things of Javascript because you have something to relate that knowledge to.
I tried to understand the
thisweirdness in Javascript for a long time. Finally after I had a lot of experience with building things without fully understanding it and encountering the issues first hand, it was much easier to understand how it works.So I would say that both approaches are fine for a beginner developer, it all depends on what's the best way for you to learn.
As someone who has been diligently learning and building for a year, I so appreciate your calling out the "this weirdness"
It's not just me, then?
I keep reading /practicing hoping it will make perfect sense soon.
From now on, I am going to move toward acceptance.
The concept of
thismay be much easier to grasp when using fundamental JavaScript. A complex construction can mask the scope (to whichthisrefers), and frameworks compoundthiswith layers of abstraction that can be difficult for a novice to unravel. It's true that different people learn in different ways, but any one person can learn in different ways too—if one way isn't working, perhaps it's time to try another.What I mean with my
thisexample is that just reading through the explanation of howthisworks is not gonna stick or have that much of a meaning until I have used it a lot and maybe encountered a few issues. That's why I learn by doing and then coming back to the material to learn: it gives me something real to attach my new knowledge with and not just theoretical textbook knowledge.I also kind of agree with you. It gives a sense of accomplishment when you build something, which eventually motivates you to do more and more.
And I am a great believer that, in this way beginners first write the bad code, and this is the only way to make them understand why some practices are called as bad practices. And by struggling themselves they get to know why some ways of writing code can help them.
I meant to update this. I copied this over from Medium and forgot to change this part. Agreed.
In addition to semantic HTML being more accessible, I also think it is easier to read and update.
vs.
As classes and IDs are added, the div example becomes a mess very quickly.
Another advantage of semantic HTML is that CSS selectors make a lot more sense. For instance,
article section h2is both legible and abstract-enough to specifically style every heading of every section within an article—leaving all other headings alone, and without requiring a single ID or class!How often do you actually target elements in CSS using tag name though? With a content heavy website or a blog I can see that, but as soon as your application gets more complex you're going to want to use class names anyway to keep your CSS flat and stay out of specificity hell.
That is a great point as well. Having those semantic names instead of having a vague class name definitely helps the CSS readability as well.
CSS classes should be descriptive, so that even when a div is appropriately used, it's self documenting.
Agreed!
It's interesting how the sentiment shifted in just a few years but the web is so much better now than when it needed jQuery. The fact that jQuery is not developed anymore because it's feature complete it's a testament to that.
Good thing we're not too attached to technologies :)
This is part marketing, part human nature I guess. We're attracted by shiny things and by hype. In addition job offers use keywords to simplify for understandable reasons
Bootstrap's gotta go :D They've recently removed the jQuery dependency but stil...
Good pointers Emma!
Bootstrap is not a bad thing. Many employers are looking for bootstrap knowledge, and a portfolio often looks incomplete w/o something like bootstrap in it. I'm more refering to react-bootstrap though
Didn't say it's bad, I've used it for years!
I'm not particularly attached to it though, I think it has already seen its heyday and due to advancements in CSS it is less needed.
Sites using Bootstrap, be it the original version or the Vue/ReactJS declined versions, all suffer from the same thing: they really look like Bootstrap websites :D
Like when you visits someone's place and you both have the same furniture because you both shop at IKEA ;-)
haha, very true, but a lot of startups or smaller companies want to look like everyone else. There is a certain amount of professionalism in looking similar the competition. I'm not saying I like it personally, but many businesses want to look "professional" and so they stick with something that adds a "standard" to their website...
Divs are useful for laying out container elements. Any functional component with a respective semantic element should not be in a div. And if a component is wrapped in a div, it needs an aria label or labelledby attribute.
Great article.
One thing I always mention to people though is to never ignore the things you talk about! It's all too common for new developers to try and avoid JQuery and Bootstrap all together, but you are going to likely come across one of them at some point working on legacy code bases.
Maybe sometimes it’s ok to rely on jQuery and a framework as it gives the new developer a sense of accomplishment and they can learn what is possible and then take the time to learn how to do it for themselves in JavaScript.
I turned this article into audio using Blogcast!
If you want, you can add this👆 player to your article by adding the following code to the top:
Aw thank you!
I love this article, specially when you mention relying on JavaScript frameworks. I did this myself when I was starting to learn web development and it almost destroyed my experience.
I started with react right off the bat and at that beginning it was really hard to grasp its concepts. For example I thought that filter and map were a react thing
So I ditched out from react and started focusing on pure JavaScript and while learning it a lot of things from react started becoming clearer for me
I am new to this web development field and Jquery plays an important part but I am not able to pick it well and many of the aspects related to Jquery are well explained by you. Kindly tel me any tutorials related to jquery. Thanks for sharing such a great bag of knowledge.
Excellent writeup and good advise for newbies.
One thing I would like to add: the mistake of not keeping things simple.
Using React or any other JS framework for a simple website may be too much.
Using a huge icon library to display three icons may be too much.
Using a huge CSS framework for 5 elements and some basic layout may be too much.
Yet people build huge stacks and add so much bloat to the simplest websites.
If you can reduce the number of dependencies, whatever they are, do it.
If you can reduce the number of elements/modules on your site without striping off important information, do it.
Keep things simple wherever you can and where it makes sense, because things are just complicated and complex enough.
For a junior building a portfolio project for example, I wouldn't worry about too much using tools that are an overkill. Many of my personal projects use React or Vue even if they could be simple static sites with vanilla JS. Why? Because it allows me to experiment and learn since my side projects rarely grow big enough to warrant the use of these tools.
In "real life" apps, I totally agree.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.