In this blog post series, we will build a concrete roadmap to help you get started understanding the basics of programming. More importantly, we’ll help you figure out if coding is something you really want to do!
Like many of our blog posts, this is just one opinion and one way of going about things. We believe it’s most rewarding to be able to build things that you can see in the browser and easily share with others, so the first place to start with that is by learning some HTML and CSS. You’d be surprised how much you can get done with just a little bit of markup and styling on the page!
Getting Started with HTML
Before you start writing any code, be sure to install a text editor. We highly recommend Sublime Text or Visual Studio Code.
Once you’ve installed your editor it’s time to learn some basic HTML. HTML is how we display text, links, buttons and much more on a web page. It consists of elements or tags, which can be placed inside or next to each other to form markup on the page.
Below is a small example of what that looks like. If you’d like to follow along, you can create a file in your text editor called index.html (the name does not matter, as long as you have the .html extension) and enter the following code inside:
<html> <body> <h1>Hello World!</h1> <p>Let's learn some HTML</p> </body> </html>
In the HTML above, we’re placing a heading tag with the text “Hello World!” and then a paragraph tag with some additional text inside. Notice how each element has both an opening and closing tag. HTML elements that contain text inside will have closing tags, but some elements don’t need them, like a line-break <br />.
It’s not hard to get started building some simple HTML pages, and you should explore elements such as anchors (for creating hyperlinks), buttons, forms /inputs (for collecting data), and images.
If you’re looking to get started, check out Rithm School’s HTML Fundamentals Course or some more in-depth documentation on Mozilla Developer Network (a fantastic resource for all things web dev).
Getting Started With CSS
Now that you’ve written some basic HTML, it’s time to make things look nicer! To change our font sizes, modify the text or background color, position elements on the page, and much more, we’ll have to use Cascading Style Sheets (CSS)!
It’s pretty easy to get started with CSS, but as you learn more about how to build complex layouts, it can get tricky! No need to worry about that for now; we’re going to start with some simple CSS.
Let’s start by looking at how CSS works. To get started, we’re going to define three essential terms:
- Selectors let us select an element to style (e.g. ‘h1’)
- Properties describe how we can style things (e.g. ‘color’)
- Property values are the actual details for the property (e.g. ‘red’)
That might sound confusing so let’s see how it works! Imagine we have the following HTML.
<html> <body> <h1>Hello World!</h1> <p>Let's learn some HTML</p> </body> </html>
To get started with some CSS, we can simply add a <style> tag above where the <body> begins. We’re going to select all the of <h1> elements on the page, and add a property of color with a property value of red. Notice the curly braces, colon and semicolon – these are all essential for proper syntax.
<html> <style> h1 { color: red; } </style> <body> <h1>Hello World!</h1> <p>Let's learn some HTML</p> </body> </html>
What we’ve done here is selected all of the <h1> elements and have given them a color of red. Add this to your index.html file and see what happens!
If you’re looking to get started, check out our CSS fundamentals course or some more in depth documentation on Mozilla Developer Network.
In the next section we’ll discuss how to dive deeper into CSS and master layout and essential concepts like the box model.
Stay tuned – and as always, be sure to ask us questions if you get stuck!
