Best Resources for HTML Beginners

A basic understanding of HTML – this simple request is appearing on many job postings for careers that require very different skillsets. Whether it be the customary HTML developer or graphic designer or digital marketer, an established HTML foundation is expected in many different jobs.

This expanding career pool is great for individuals who are experienced with HTML, but may leave the non-HTMLers concerned. For new users, HTML is literally a brand new language. How is someone with no HTML experience supposed to just learn a new language? You stumble across blogs like this – that’s how!

My name is Steve and I am a Marketing Associate at CoreSolutions Software. I started as a co-op student when I was at Fanshawe College. At that point, I had little HTML experience. And by little, I mean ZERO HTML experience. As I learned throughout my co-op, the digital marketing aspect (web design, content marketing, website updates) were a very important part of my daily tasks. Of course, I have returned to my old stomping ground and I have also worked with a local web design company over the past year. Though I have only been doing this for a year, I wanted to share with everyone some great places that helped me learn the basics of HTML, as well as where to find CSS help and some professional ways to use your freshly developed HTML skills. Cheers, I hope this blog serves as a great resource that helps you with your HTML skills.

The HTML Basics

First off, understanding how to view the code of existing web pages is important. To do this, you will want to right-click anywhere on a webpage and click “view page source” or to look at a specific item (i.e. text, image or link) on a webpage right-click on the item and choose “inspect element”. This will allow you to see what other developers and designers have done. What you will see at first may scare you – don’t be scared. The code in these HTML documents are structured using tags. Example of tags include <p> tags, <h1> tags and <div> tags. All of these tags have different functions and someone with a basic HTML foundation should understand most of them. A great resource I used to learn HTML was Web Monkey’s HTML Cheatsheet.

Another great resource to help you scope through the basics is W3 Schools. W3 Schools shows you not only what the code itself looks like, but will show you what the code creates and also allows you to try it yourself. I find myself searching through W3 Schools whenever I am stuck. And trust me, so will you. Bookmark it!

There are also interactive tutorials like the one on Codecademy that are very informative for more hands-on learners.

HTML Code Validation Resources

Validation is like the no-fun police of the HTML world. Like any language there are rules. And rules need to be followed. The enforcement of these rules for HTML is validation. A validator ensures that coding quality is good and the best standards and practices are being upheld. Though sometimes tedious, as a HTML beginner, it is good to have an understanding of what is and what is not compliant.

A great resource for validating your HTML code is the W3C’s Markup Validation Service. Do your best to try to fix as many of these validation problems as possible.

Adding some CSS Flair

During your research thus far you have more than likely stumbled upon the use of CSS within HTML. That is good because they are basically like two peas in a pod. If HTML is the structure and walls of a building, then CSS is the wallpaper, furniture and gardens. CSS is what you will use to beautify your webpage.

If you have no idea what CSS is, I suggest you read W3 Schools Introduction to CSS.

Here is a link to another Codecademy Interactive Tutorial on CSS.

This CSS Cheatsheet presented by Over API will also be very helpful.

For copy-and-pastable CSS code, visit CSS Tricks.

Another resource for CSS beginners is Review Box’s Introduction to Cascading Style Sheets tutorials. These tutorials give a great breakdown on how to get your CSS started. Enjoy!

HTML and CSS Templates

Once you have your basic understanding of both HTML and CSS you can start building a webpage. Or you could use an awesome template that already has structure. Using your new-found HTML and CSS skills, you can personalize the text to make it your own and use CSS to change fonts and styles to make your website better represent yourself or your brand.

Some good templates can be found at:

• Zurb Foundations
• Free CSS
• Open Designs 9
• And there are many more!

Some More Helpful HTML Tools

Looking for free stock images for your website? Try Pixabay.

Looking for free icons? Try Flat Icon.

Looking for more validation checkers (broken links, mobile-friendly, etc.)? Try W3C Developer Tools.

Looking to find the differences between two chunks of code? Try Diff Checker.

CSS Button Generator

Websites will usually need buttons that link to other pages and these buttons can be designed using CSS as well. Whether it be size, colour, or font styles, using CSS can help you personalize your buttons. A great resource for customizing your buttons is Review Box’s CSS3 Button Generator. Give it a try and let us know what you think!

Conclusion

Though this blog just scratches the surface of the wonders of HTML, I hope it has at least given you some tools to further your learning. Personally I had no idea about HTML when I began working at CoreSolutions Software, but over time and with some support I have begun to understand not just what HTML is, but how to use it for functionality and designing of websites.

If you have any questions for us be sure to leave it in the comment section below and if you have any other great HTML resources that you would like to share – be sure to comment. It will definitely help any new HTMLers.

If you enjoy our Web Blogs, be sure to subscribe to our Core Web Newsletter!

And as always, Thanks for Reading!

Steve Malott