Programming jobs are currently growing at two times the rate of other jobs. These numbers indicate that the future of our world might depend heavily on code.
Which is exactly why you’re looking to get into coding. And you’ve chosen to start by building your own website.
Unfortunately, you don’t know where to start. You have some idea of what you want your site to look like, but you’re not sure how to translate this vision into code.
But don’t panic. Code Buddy is here to teach you how to code a website like a pro. Keep reading to find out how to create the website of your dreams.
What Are HTML and CSS?
Before we get into the more complex parts of coding a website, we must discuss HTML and CSS. They’re instrumental to creating any website, which means you won’t get far without understanding them.
That said, let’s take a look at these coding language’s roles in creating a website.
Understanding HTML’s Role in Coding a Website
HTML is the key to creating a basic website. You could code a website without knowing CSS, but HTML isn’t optional.
Because it creates the most meaningful elements of your site. All of the words, images, and navigation bars are the product of HTML code.
HTML’s primary function is to create the meat of your site. Anything you want people to know when they visit your site will be coded in HTML.
Understanding CSS’s Role in Coding a Website
As we said before, you could technically create a website without knowing CSS. Unlike HTML, CSS isn’t responsible for the informational elements you see on a web page.
But here’s the deal:
CSS makes those pages look more appealing. Without CSS, web pages would look so bland that no one bothered to read them.
The best way to understand CSS’s role is to think of the language’s function as creating what you want people to see. Perhaps, though, this definition is too broad. Because not everything that you can see on a web page is a product of CSS.
So let’s be a little more specific:
CSS is responsible for altering the elements that you put onto a web page. So, for example, an image that you put onto a page using HTML could be altered by CSS.
Some Common Terms to Know
Maybe the difference between HTML and CSS will become clearer once we’ve covered some common terms.
Having said that, let’s take a look at some need-to-know terms:
Elements: Think of an element as any piece of content you add to a web page. Any paragraphs you write, images you include, or data tables you throw in are elements.
Tags: Are you familiar with the less-than and greater-than brackets developers use while coding in HTML? Those brackets, which come in pairs, are called “tags,” and they signify the addition of a new element.
Let’s say, for instance, that you wanted to add a new image to a web page.
You would type the letters “img” in between a less-than bracket and greater-than bracket. You would then close your new tag by typing the same thing and adding a forward slash before the letters “img.”
For more information on HTML tags, you can check out this resource on HTML tags.
Selectors: As we said before, you can use CSS to manipulate the way your website’s elements look. In order to do so, you must use CSS selectors. These selectors tell the computer which elements you’re manipulating.
Imagine, for example, that you want every image on your web page to have round corners. You would have to use the “img” selector to accomplish this task.
Properties: Once you’ve selected an element to manipulate, you can start assigning properties to those elements. If you want to change a paragraph’s font, for instance, you can adjust the “font” property.
There are hundreds of other properties you can play around with, so don’t be afraid to explore the wide variety of properties HTML has to offer.
Setting Up Your HTML Document
Once you’ve acquainted yourself with those basic terms, you can start setting up your HTML document. There are four necessary components to every HTML document:
- The document type (!DOCTYPE HTML)
- The tags which signify the beginning of the document (html)
- The document’s head element (head)
- The document’s body element (body)
Notice that we’ve written some words in parentheses. Those words are the formal declarations you should use inside of your tags to declare each component.
After you declare each of these components, you can go back and start filling them in with elements.
Structuring Your Website
The structure you choose for you website depends on your personal tastes. But let’s go over a standard layout of one type of web page: a blog entry. Blog entries usually follow this structure:
- A Title (h1)
- An Introduction (p)
- A Subtopic (h2)
- Explanatory Content (p)
- Another Subtopic (h2)
- More Explanatory Content (p)
Of course, this structure assumes that you don’t add any additional sections to your web page. If you add additional sections, you’ll have to use “div” tags.
These tags divide the web page into sections. They’re commonly used to create side bars and widgets since you can add content to these divided sections as well.
How to Reference Your CSS File
You usually write your HTML code in one file and write the CSS code in another. As a result, you’ll have to reference your CSS file within your HTML file.
And by “reference,” we mean that you’ll have to instruct the computer to read from the CSS file in order to apply the file’s commands to your HTML file.
In order to reference the CSS file, you must write a special line of code within the head element of the HTML file. This line of code, which is surrounded by tags, should read:
link rel=”stylesheet” href=”file.css”
Note that the file name “file.css” is just a generic name. You have the option to name your CSS file anything you want. Just make sure you replace the generic name with the actual file name.
Want to Learn More About How to Code a Website?
You’re off to a great start, but there’s much more to learn about how to code a website. Maybe you’ll want to, for instance, power up your website by learning PHP.
Which isn’t as intimidating as it sounds. PHP is, after all, considered one of the easiest programming languages to learn.
In any case, don’t be afraid to dive in. Coding is great fun and allows you to put amazing awesome projects.
And if you ever get stuck, just take a look around our blog. We’ll tell you everything you ever need to know about coding.