In this article, I’m going to explain the basics of web development by building a basic page and explaining it as I go.
There’re three coding “languages” that are used to assemble a web page. They are HTML, CSS, and JavaScript. To demonstrate each of them, we’re going to create a basic web page together. I encourage you to follow along. If you have any issues with the code throughout this, please email me and I’ll try to help.
HTML
Hyper Text Markup Language has been around since 1989 when the web first became realized.
It was initially created as a way to format data, to tell your browser which text should be a heading, which should be bolded, etc.. It still does that, yet it has gained more features over the years.
Let’s start our web page by creating a new folder in our desktop. Name it whatever you’d like, I’m naming mine Web Page Demo.
Inside the folder create a new text document and open it. We’re going to name it later.
Inside it copy and paste this line:
<h1>Hello World</h1>
Then, click File > Save as, click the “Save as type:” box and change it to “All Files.” Name the file “anythingyouwanthere.html” and press save. If all goes well, the icon should change.
Double-click the file and run it with Chrome or another browser. It will run your HTML file and output the result to a new tab.
Congratulations! You’ve coded a web page! Now let me explain what that cryptic line means.
The <h1> and </h1> are tags. HTML is built with them. The tags, combined with the content inside of them, “Hello World,” are an element. The </h1> tag is the ending tag. The h1 stands for Heading 1, the biggest default heading. If you swapped the “h1″s for “h2″s, you’d get a slightly smaller Hello World. This goes all the way down to h6, the smallest default heading.
All of HTML is built like this, with tags and content creating elements. Some other elements include the <p> tag, a paragraph, and the <hr> tag, which creates a horizontal divider between content like the one below, though yours won’t be purple.
To do that, we’d need to use CSS, which I’m covering in the next section.
CSS
CSS stands for Cascading Style Sheets and it’s used to style the content laid out by HTML. It gives us more control over the look of a page.
In the folder we were using before, create another empty text document and put these lines inside it:
h1 {
color: red;
}
Save the file like before, this time as styles.css. Open the original HTML file (right click > Open With > Notepad) and add this line to it:
<link rel=”stylesheet” href=”styles.css”>
Save everything and open the HTML file again, this time with a browser. Congratulations again, with those little lines of CSS, you made the h1 red!
The <link> tag in the HTML simply told your browser to look for a “styles.css” file in the same folder so it could use it.
The h1 in the CSS file told your browser to apply these “rules” to every h1 element. The “color: red;” set the color to red.
CSS can do more than set the color of text. It also controls the positioning of elements, sizes, and much more.
HTML lets us show content, CSS lets us control how it looks, and JavaScript lets us make the web page interactive.
JavaScript
Create one last file in the folder we’ve been using. Paste this text inside it and save it as “script.js” the same way as before.
var margin=0;
setInterval(function(){ margin+=20; document.querySelector(“h1″).style.marginLeft=String(margin+”px”); }, 1000);
Go back into the HTML file we’ve been using and add this line at the bottom:
<script src=”script.js”></script>
Just like with the CSS <link> tag, this tells the browser to look for a JavaScript file named “script.js.”
Finally, run the HTML file with your browser.
Success!
I’m not going to fully explain this code because it’s a bit more complex, but it’s essentially moving the h1 to the right a little bit more each second.
We’re done! Again, if you had any issues with getting the files to work, you can ask for help here.
Hopefully you enjoyed creating something, even something as small as this! If you think you might be interested in learning more, here’s a blog post I wrote on my blog at blog.noahrousell.com that shares some great resources.
Have a great day!