DEV Community

Cover image for 6 Mistakes You Might Be Making As A New Web Developer & How To Avoid Them

6 Mistakes You Might Be Making As A New Web Developer & How To Avoid Them

Emma Bostian ✨ on February 25, 2019

Learning web development is intimidating. There are so many resources and tutorials that it can quickly seem overwhelming. It’s often diffic...
Collapse
 
hamatti profile image
Juha-Matti Santala

Great post!

I do disagree with this however

But one of the biggest mistakes most beginner developers make is jumping straight into learning these tools without a strong understanding of JavaScript.

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 this weirdness 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.

Collapse
 
wendykkelly profile image
Wendy Kelly

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.

Collapse
 
ptrdo profile image
Peter Sylwester

The concept of this may be much easier to grasp when using fundamental JavaScript. A complex construction can mask the scope (to which this refers), and frameworks compound this with 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.

Collapse
 
hamatti profile image
Juha-Matti Santala

What I mean with my this example is that just reading through the explanation of how this works 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.

Collapse
 
where_i_stuck profile image
Raounak Sharma

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.

Collapse
 
emmabostian profile image
Emma Bostian ✨ • Edited

I meant to update this. I copied this over from Medium and forgot to change this part. Agreed.

Collapse
 
ryansmith profile image
Ryan Smith

In addition to semantic HTML being more accessible, I also think it is easier to read and update.

<!doctype html>
<html>
<head>
  <title>...</title>
</head>
<body>
  <header>
    <nav>
      ...
    </nav>
  </header>

  <h1>...</h1>

  <section>
    <h2>...</h2>
    <article>...</article>
  </section>

  <aside>
    ...
  </aside>

  <footer>
    ...
  </footer>
</body>
</html>

vs.

<!doctype html>
<html>
<head>
  <title>...</title>
</head>
<body>
  <div>
    <div>
      ...
    </div>
  </div>

  <div>...</div>

  <div>
    <div>...</div>
    <div>...</div>
  </div>

  <div>
    ...
  </div>

  <div>
    ...
  </div>
</body>
</html>

As classes and IDs are added, the div example becomes a mess very quickly.

Collapse
 
ptrdo profile image
Peter Sylwester

Another advantage of semantic HTML is that CSS selectors make a lot more sense. For instance, article section h2 is 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!

Collapse
 
mvasigh profile image
Mehdi Vasigh

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.

Collapse
 
ryansmith profile image
Ryan Smith

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.

Collapse
 
dkamer profile image
David Joseph Kamer

CSS classes should be descriptive, so that even when a div is appropriately used, it's self documenting.

Collapse
 
ryansmith profile image
Ryan Smith

Agreed!

Collapse
 
rhymes profile image
rhymes

Many employers may even see jQuery as an impediment to a candidate, because it can show a lack of understanding of core JavaScript concepts.

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 :)

But one of the biggest mistakes most beginner developers make is jumping straight into learning these tools without a strong understanding of JavaScript

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 is a UI framework for building websites.

Bootstrap's gotta go :D They've recently removed the jQuery dependency but stil...

Good pointers Emma!

Collapse
 
dkamer profile image
David Joseph Kamer

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

Collapse
 
rhymes profile image
rhymes

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 ;-)

Thread Thread
 
dkamer profile image
David Joseph Kamer

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...

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
emmabostian profile image
Emma Bostian ✨

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.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
jameesy profile image
Jamees Bedford

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.

Collapse
 
chrisrhymes profile image
C.S. Rhymes

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.

Collapse
 
m1guelpf profile image
Miguel Piedrafita

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:

{% blogcast 326 %}
Collapse
 
emmabostian profile image
Emma Bostian ✨

Aw thank you!

Collapse
 
nilomiranda profile image
Danilo Miranda

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

Collapse
 
saraalfred profile image
Sara Alfred

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.

Collapse
 
kovah profile image
Kevin Woblick • Edited

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.

Collapse
 
hamatti profile image
Juha-Matti Santala • Edited

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.

Collapse
 
sk8terboi87 profile image
Aravindan

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!

Collapse
 
delacombo profile image
Jasond_Official

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).

Collapse
 
frcharry profile image
Fabio Ricardo Charry

Thank you, Emma, here in Colombia there is a huge demand for FullStack developers, employers request for different skills and a ton of experience on specific frameworks for different languages. What can you suggest for people like me that are trying to move into WebDev without experience, and with that kind of requirements?

Collapse
 
gabrielecimato profile image
Gabriele Cimato • Edited

I'll try to give you an answer. First thing is to get your hands dirty, build something even if it's just a replica of a famous web app. Work on fundamentals, this means that your JavaScript knowledge should be as strong as possible.

Build a small app and a small API to support it. It's the best way to learn and get familiar with common problems.

Most of all don't be intimidated by the fact they they require ton of experience. Apply anyway if you have a solid understanding of a tech stack! If they ask for 3 years of experience in JavaScript and you only have 1.. Apply apply apply! I interview people frequently and job postings are mostly recommendations, if you can prove that you're capable a company might hire you anyway...I would!

Collapse
 
frcharry profile image
Fabio Ricardo Charry

Thank you, Gabriele, for your reply, I appreciate it.

Thread Thread
 
gabrielecimato profile image
Gabriele Cimato

Absolutely! If you have more questions don't hesitate!

Collapse
 
vip3rousmango profile image
Al Romano

One thing I would like to add for "Not Learning Responsive Design" is understanding the difference between Adaptaive Design, Responsive design and hybrid approaches and the pros/cons of each method. I can't count the number of times people have said their design is "responsive" but they developed adaptive, device specific designs calling it "responsive".

Collapse
 
ptrdo profile image
Peter Sylwester

All good points. I might add that it is very unlikely for a junior developer to be given the chance to “start from scratch,” so they will likely need to adapt to many decisions that have already been made—including jQuery, frameworks, or whatever. This means being good at learning, and knowing how to learn fast! What to google? Who to trust? Are there groups or networks to get involved in? Often, teaching others is the best way to learn yourself, so learning networks go both ways. These are important things to appreciate too.

But I am SO glad to hear younger developers advocate for the basics. It can not be emphasized enough how important this is. An understanding of basics is never a waste of time, but rather a huge time savings that pays-off again and again. Even while learning a framework, take the time to try the same thing without.

Collapse
 
drawcard profile image
Drawcard • Edited

Bootstrap, jQuery and other frameworks aren't necessarily bad things - in fact it was through using jQuery for years that I ended up getting deeper into Javascript, eventually learning how to write vanilla code to create slideshows, animations etc. and supplanting the need for jQuery.

jQuery is still used in reputable systems like WordPress, and you can compile your own version to strip out all the functions you don't need, so it's less heavy (as you can with Bootstrap).

The thing that does suck about Bootstrap is you get locked into a mentality of adding tons of classes to divs, expecting a certain result to happen. You often end up with a rabbit warren of nested divs & spans, loaded with heaps of non semantic class names, that make it a headache to debug and maintain. (Atomic frameworks are even worse...) And never substitute Sass for learning and writing good quality CSS - Sass is great and all but if you can't compile, you can't publish.

Besides all that, I view these frameworks and tools as starting points for new devs to get their head around core concepts, and then push forward into deeper understanding when the time is right.

Collapse
 
darwinini profile image
R. Darwin Garcia

Thank you for sharing Emma! Much appreciated. Do agree with a comment to balance out the beginning Journey with building things. It helps to keep the learning process more engaging by seeing the rewards of a product.

Collapse
 
luteces profile image
Lutece McDuck

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.

Collapse
 
marcode_ely profile image
Marcos Aguilera Ely

Thanks a lot. It's really helpful

Collapse
 
alaztetik profile image
Alaz Tetik • Edited

Very great and to-the-point article! I take some notes for future-use. References are great too. Thank you Miss!

Collapse
 
jacksonelfers profile image
Jackson Elfers

I do all of these things on client projects. Particularly putting everything in one file all mashed together, I'm the real deal.

Collapse
 
qm3ster profile image
Mihail Malo

RE: cover_image
Is that your phone?

Collapse
 
emmabostian profile image
Emma Bostian ✨

Nope it's from Unsplash

Collapse
 
qm3ster profile image
Mihail Malo • Edited

F

Collapse
 
tshimsthedoor profile image
Tresor Tshimanga

😊

Collapse
 
carlosalfarodev profile image
Carlos Alfaro

Amazing article! I need to learn more CSS and stop using bootstrap so much.

Collapse
 
dirkncl profile image
Dirk Levinus Nicolaas

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 ?.

Collapse
 
httpjunkie profile image
Eric Bishard

I think the advice is good. I like the shout out to Kyle Simpson! His free books oon GitHub are amazing resources!

Collapse
 
dansyuqri profile image
Muhammad Syuqri

Really good read! Thanks Emma for sharing. I have been making some of these mistakes and it is good to know before it's too late!

Collapse
 
vergeev profile image
Pavel Vergeev

This article inspired me to re-learn the basics. Thank you for your work!

Collapse
 
jaimetrejo profile image
Jaime Trejo

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!

Collapse
 
benjiboy13 profile image
Benjamin Gil Flores

Excelent post Emma, thanks for sharing those free Js books!