So you have decided to learn web development.
Great! But once you start looking around for tutorials, guides, and other resources, it's easy to get overwhelmed. Web development incorporates a lot of different technologies that all work together to create the internet as we know it today. Understanding how they work together is no small task, especially when you are at the beginning of your web development journey. Which ones should you learn first? What do they do? What does it all mean???
Unicorn Utterances is here to help. Let's start at the beginning.
HTML stands for HyperText Markup Language, and the latest release is HTML5. HTML is the foundation of the modern internet. Every website you visit or web application you use is built on a structure created by an HTML document. A great way to visualize what HTML does is to think of a building under construction. All buildings have a frame, whether steel or wood, that creates the basic structure of the building from the foundation to the roof. This structure dictates the size and shape of the building. No matter what the building looks like when it is finished or the purpose it serves, everything will be built around that steel structure.
So, HTML gives a website its structure. But how does it do that?
At its most basic level, HTML builds the structure of a webpage by using something called "elements" which are normally invisible to the casual website visitor. But even if you can't see them, you can usually guess where they are. That’s because elements are used to divide a web page into logical sections. When you see a navigation bar, a title, paragraphs of text, or a footer, you can be sure there is at least one HTML element associated with it.
HTML also serves as the foundation for web accessibility for people with disabilities. Screen readers allow people who are blind or have low vision to use the internet in a primarily audio format. They work by reading the HTML directly and are programmed to follow its structure and pick up on information included in the element tags. Practicing good web accessibility standards is important for a modern web developer and makes websites that are easier to use for everyone.
CSS, or Cascading Style Sheets, is what web developers use to control the look and feel of the websites they create.
Let's think back to our building construction analogy for a moment. We have our steel frame (HTML), but what will the building look like when it is finished? Will the facade be brick, wood siding, or cut stone? Should it be painted? If so, what color? These are the kinds of questions that web developers use CSS to answer.
CSS can be used to control virtually every visual aspect of a website. Take a look at the site you are reading right now. Everything on it is controlled (or "styled" as the lingo goes) by CSS. The background color, the color of the text, the size of the text, where images or videos appear on the page, the location of the navigation bar, and even some animations are set by CSS.
In modern web development, CSS is written in a separate document called a "stylesheet" that is referenced in the HTML document with a link element. The stylesheet contains a list of HTML elements, identified by various "selectors", that the developer wants to style. Each element may contain any number of properties and property values that set up how that element will be presented to the user in the web browser. These properties have a specific mapping to various aspects of how the page is styled. For example,
font-size dictates the size of the font of the text on the page. Exactly what appears on the screen can be a little tricky for a beginner, and I encourage you to read the excellent tutorial in Mozilla’s documentation. For now, just know that CSS rules can inherit property values from each other and can even override each other in certain circumstances.
CSS is a big topic, and you will very likely be learning more about it as long as you do web development. There are pre-made frameworks, preprocessors, and lots of other CSS-related goodies out there to dive into as you learn your new craft. The important thing at the outset is to learn the basics well so that you know what to expect as you write your own CSS stylesheets.
You can also read more about how your browser understands and utilizes HTML and CSS in order to display content and handle user interaction under-the-hood on another post on the site.
Finally, you're always able to join our Discord if you have any questions or comments while you're learning. All are welcome!