To get started, it’s important to distinguish the difference between these three languages and the role they play on a web page.
The structure – HTML
HTML or Hypertext Markup Language is a markup language that transforms plain text into code that a web browser can understand. The role of a markup language is to tell the browser what content is loading into different areas of the page. For example. if you markup your paragraph text with a <p> tag, then the browser knows to treat all the paragraphs a certain way. If you markup text with am ordered list tag or <ol>, then the browser treats the content much differently.
A great analogy for a web page is to think of the page like the human body. The HTML is the body itself and tells the browser what structure is in place and what to expect. The HTML describes and defines the content in a way that browsers and devices can clearly understand.
Like any language, the amount of terms and tags to learn is vast. While the language is generally intuitive, there are certainly some caveats you have to know to use the language properly. To get started with the foundations of web design with HTML & CSS, check out Digital Workshop’s HTML/CSS class that can be attended live from anywhere.
Once you have the structure in place for your page, it’s time to style it with CSS.
The style – CSS
CSS or Cascading Style Sheets provides the style to the page. Everything in style code from the text color to the position of elements on a page can be controlled via CSS. By separating HTML (structure) from CSS (style), we are able to clearly define the styles for the entire site, be as efficient and consistent as possible with the look and feel of the site, and get creative with how to style specific elements when needed.
Again, comparing to the human body, the CSS code would be like the clothes you wear, the color of your eyes and hair, and the accessories you add.
On a modern web page, the CSS is often the trickiest piece of the site to get right. If you need a specific look to an element of the page, you need to override existing styles and “cascade” the styles correctly so all browsers understand what you want.
Also, modern CSS now includes style effects like shadows, opacity, animation, and more. This adds a whole new level of fun to designing a site that stays completely in code and keeps the load time of your site down. CSS is fun and is a part of creating a great user experience for your web pages.
Adding it all together
All three languages make up a set of tools used by Frontend Web Developers today. To get started with a full range of frontend web development training, check out our Frontend Web Development Bootcamp. In these classes, you will work closely with an instructor and mentor to master the languages you need to get started designing today.