We have prepared a list of some of the most common mistakes we have seen for about a decade that newbie web developers commit while building websites.
The purpose of writing this blog post is to tell new developers which kind of mistakes they commit and to educate them, and also save them from such common mistakes.
Every Master Was Once a Beginner
Even when you aren’t a novice, you may find the mistakes shown below are genuine but don’t forget, genuineness is a concern of experience.
There was a time when all of the people with experience definitely faced a few of these mistakes, too.
And if you are a new starter, we hope this blog post will save you a bit of time and embarrassment in the future.
Let’s get started!
Mistake #1: Inserting Spaces in File Names
You can save your HTML file as “my cool page.html,” but those gaps between words are a mistake as web addresses or URLs don’t include spaces.
However, if you wish to have spaces between the words in your file names, you can use a hyphen my-cool-page.html or an underscore like my_cool_page.html.
Being a beginner, you likely aren’t very tensed about SEO, but Google has noted they opted for hyphens in file names over underscores.
Mistake #2: Ignoring Case Sensitivity
If you use the Windows system for the development environment, you might not see a problem when you anomalously use uppercase and lowercase letters. This is another common mistake new devs commit while building a website.
Let’s suppose you named a CSS folder as “Css” and named its sub-file as “Main.css.”
But in your code, you actually link to it like shown below:
<link rel=”stylesheet” href=”css/main.css”>
If you are working on your project, it’s not a problem. But if you load the same project to a web server, you will see that no CSS is implemented.
Several web servers comprise a few versions of Unix or Linux outfitted instead of Windows. If you have ever heard about the LAMP stack, you should know that Linux is the L in LAMP.
The LAMP-operated systems are case-sensitive.
Mistake #3: Not Understanding File Routes
Beginners who don’t know the process of linking files within various directories usually dump all their files in the main directory to access them easily. This is again a mistake that puts you onto an unorganized file tree. Newbies are required to learn how to link HTML and CSS files.
In the instance below, we are going to set the background image for a website’s homepage in our main.css file. This file is in the CSS directory. Now, we are going to link it to an image in the img directory like this:
Both of these folders or directories are in the main directory. Hence, we have to go up and out of the root CSS directory and thereafter down into the img directory. You can go up one directory by using two dots: “..” Then, we go to the img directory to link to the moon.png file.
If we are required to go up two directories, then the file path would begin like this: “../../”
Mistake #4: Renaming Default Page
Giving a name to your default page other than “index” is a mistake. URL search for an index file. When you’re functioning with HTML, you must include an index.html file.
This HTML file will boot by default without displaying the file name at the end of the web servers.
This is the reason why you can visit your preferred dot com or other web address without even seeing “/index.html” after their “.com.” The index file boots by default.
Your preferred website may include more than only HTML, but this concept carries over to other languages such as React (index.js), PHP (index.php), and some others.
As you keep learning, you will see a few developers pick other file names when using other technologies. However, as a beginner, you need to stick with the index.
Mistake #5: Not Taking a Break
Beginners generally used to pour over their project for several hours and still can’t spot the error.
Generally, the issue is a missing semicolon, a misspelled variable or tag, or other minor syntax error. It happens to everyone. After looking at code for hours, our eyesight gets blurred, our brain starts fizzling, and what would have been convenient to watch with fresh eyes becomes difficult. It happens because of continuous work, so don’t feel bad. Just get up and take a quick walk or get yourself a cup of coffee. Or just take a quick nap.
But this mistake is not just limited to beginners. It can happen to anyone.
After taking some rest, come back to the code so that you could find that error you couldn’t find with a tired mind.