Common Beginner Mistakes with HTML

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 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 image tag
• No HTTP on your URLs in the href attributes

Time is very valuable regardless of what you do. To make the most of your time, everyone tries to do a task as 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 as efficiently and effectively as possible since many things 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 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 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. The 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 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 a 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 starting your coding journey, shortening your code might seem overwhelming for you. That is ok. Skillcrush suggests skipping this for now and focusing 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 concisely.

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 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 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 and 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 to 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 on your code. A one-line comment would be like this example here.

/* This is a one-line comment. */

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? */

Comments are versatile and can be used everywhere in 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 to make your code easy to read so you can find things easily.