CodeNewbie Community

loading...

Common Beginner Mistakes with HTML

Sarah Bartley
Front-end web developer | Moderator for Elphas Can Code | Creator of Disney Codes Challenge
・4 min read

To help you review everything you have been learning, Skillcrush shares a list of common beginner mistakes newbies might make as they work with HTML the first time. These mistakes cover different topics from previous HTML lessons. Skillcrush believes being aware of these mistakes will help prevent you from making these in your own code. Some of these mistakes include:

  • Block elements inside inline elements
  • Forgetting to close HTML tags
  • Putting HTML tags inside other HTML tags where they don't belong
  • Forgetting to close a self-closing HTML tag
  • Forgetting to put an ALT attribute in your img tag
  • No http on your URLs in the href attributes

Time is very valuable regardless of what you do. In order to make the most of your time, everyone tries to do a task quickly and correctly as possible so they don't have to redo every task.

This is very important for developers regardless if they are newbies or senior developers at Google. Developers want to make use of their time efficiently and effectively as possible since there are many things that need to be done to make a website ready for the web.

HTML Best Practices

Skillcrush lists best practices or actions Skillcrush students can take with their CSS in order to manage their time effectively so they can avoid problems in the future. These are things developers can do, avoid, and never do. I recommend looking over these lists as you double check your own code so you can fix some of these mistakes as you go. Let's get started by looking at the things you should do.

1. Code needs to be nice, neat, and tidy.

You learned about this during HTML, but it still applies to CSS. Organization is a must for easy to read code and is nicer to look at. It might sound hard to accomplish, but it is easier than you think. The ways you can organize your code are:

  • Indent CSS properties
  • Create space between each code block
  • Utilize uniform, descriptive naming conventions
  • Alphabetizing your CSS properties in each code block

2. Make sure your code is short and easy to understand.

People love anything that is short and easy to read. It is only natural for developers to love short and easy to read code. There are plenty of reasons why, but this is mostly due to processing time and how long it takes a website to load content. Lots of code means it will take lots of time to translate everything to the browser which won't make your users happy. Skillcrush has a few tips to help you shorten your code in way you as well as other developers can understand what you are trying to do.

  • Use classes for styles that repeat
  • Pick short names for classes and IDs
  • Combine code blocks and declarations if able to
  • Shorten declarations

If you are just starting your coding journey, shortening your code might seem overwhelming for you. That is ok. Skillcrush suggests skipping this for now and focus on understanding your code.

Ultimately that is the main goal for any developer. As you get more comfortable with coding, you can start focusing on shortening your code and concise.

3. Organize your CSS just like your HTML.

Computers are just like you and have a specific way they read information. When they see HTML, they will read the code from top to bottom. This is the same approach used to read CSS. Therefore, you should write your code in the same manner.

Skillcrush suggests starting with your global styles on a style sheet. These are styles applied to everywhere on a website. Next, you put the styles for how they appear on the page.

After global styles, I would have an area for all style changes for the header then the body. Inside the body styles, I might be a little bit more organized and style specific sections before I end with the footer styles.

4. Start using comments keep your code organized.

Be prepared to start using comments in your code. They are helpful for anyone reading your code since it lets them understand important ideas or sections. Comments don't appear in the browser so they won't affect any styles you have on your elements.

There are a couple of ways to comment in your code. A one-line comment would like this example here.

/* This is a one-line comment. */
Enter fullscreen mode Exit fullscreen mode

If you need to comment on lots of items, it would look like this one.

/* Hello world!
This is a comment with multiple lines.
See the difference? */
Enter fullscreen mode Exit fullscreen mode

Comments are versatile and can be used everywhere with lots of ways. You might see developers use comments to call out specific code for header, footer, and other important areas on your site. The goal is making your code easy to read so you can find things easily.

Discussion (1)

Collapse
andrewbaisden profile image
Andrew Baisden

Another great article!