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.
Latest comments (61)
Very great and to-the-point article! I take some notes for future-use. References are great too. Thank you Miss!
Amazing article! I need to learn more CSS and stop using bootstrap so much.
😊
This is a very good suggestion.
In accordance with what I think.
Note for Dev.to.
what is the substitute for alphabet "` "so as not to conflict in dev.to's markdown ?.
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!
Thanks a lot. It's really helpful
Thanks Emma! I just started a web dev project at work and having only some experience for android dev, I'm sure this will be very helpful!
Hi, great post!
I am actually following a course with the Wild code school (French school).
I realize we are making some mistakes you list, But we are learning everything about JS and React in only 5 months.
Unfortunately, it's hard to avoid a few mistakes in that time.
I will improve my learning all along my career I assume.
Thank you for your advise.
RE: cover_image
Is that your phone?
Nope it's from Unsplash
F
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.
I think the advice is good. I like the shout out to Kyle Simpson! His free books oon GitHub are amazing resources!
Great write-up on the order and fundamental recommendations. I remember when I first started diving into JS, and I would inspect minified files, totally getting lost in anonymous and reduced variables, etc. Later realizing the same thing could be achieved in an understandable way, by just naming everything in a readable way (non reduced).
Excellent post!
But, I feel this is not just for new web developer, even Experienced developer are still sticking with Frameworks to carry out their development without knowing much of fundamentals (thats how I was a year back).
This 6 covers exactly almost everything!
I do all of these things on client projects. Particularly putting everything in one file all mashed together, I'm the real deal.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.