Coding is fun!
Learning to code can be a lot of fun, though at times, it can be frustrating as well. If you think your English teacher was harsh for misplaced punctuation, misplaced codes can cause havoc on your webpage or even keep it from displaying at all.

Construction of webpages have two types of coding: HTML for the structure of the page and CSS for the styling. It's important to keep these two types of coding as separate as possible. Interactivity of a page can be added with additional programming.

HTML Coding
HTML coding helps structure the webpage in a manner that makes it meaningful and increases accessibility and search engine optimization.

Text Structure
HTML specifies the type of text by surrounding the text with the proper codes. Some of the most common types of text include

paragraphs
headings (6 levels)
lists
ordered lists (numbered)
unordered lists (bulleted)
description or definition lists
blockquotes

Layout structure
HTML also has codes to specify groupings of elements into layout structures, such as divisions, headers, footers, articles and more. 

Other Structural Elements
HTML can incorporate media such as images, video and audio.

CSS Coding
CSS adds visual appeal to a web page. CSS can change the look of text, determine placement of layout structures, and much more.

Normally CSS is stored in a separate file which is linked to the HTML document. This makes updating the look of a website and easy job of changing one file and uploading it to the server, which will change the look of all HTML pages which are linked to that CSS file. 

Creating Websites
Generally when creating websites, the code is completed in a particular order

HTML coding
CSS coding
Any additional programming

Terminology

Website Usability

The ease in which a web site can be used.

Website Accessibility 

Usability with the added emphasis of making a website easy to use for everyone including people who have different abilities

Website Structure

Marking elements within a page for the type of elements such as paragraphs, headings, lists, block quotes, divisions, media, but does not the layout and visual design. Accomplished with HTML

Website Styling

Applying visual design to the structure of a site such as colors, layout, size, spacing. Accomplished with CSS