8. Your First Serious Website

By now you should be ready to begin development on your first serious looking website! You’re going to make a simple Portfolio website to showcase yourself online, because this is one of the most important works to make, in my opinion, if you’re seriously considering programming as a profession.

You will continuously improve it and this is the correct time to begin understanding a fundamental concept of each and every website:

Work on a website is never “done”. You can always improve, upgrade, optimize and update a website. So even before you have your first webpage online, I want you to start grasping this concept to save yourself a lot of frustration.

Another tip: Perfection is a myth. It doesn’t exist. You will burn yourself out trying to achieve it, when in reality you had a really good project done already some time ago.

How does that relate to websites and programming? Neither you or anyone else will ever have a perfect website, so i’d suggest starting out with a “production” mindset instead of a “perfection” mindset, for the same reason – to save frustration and keep the learning and development experience as pleasant as possible.

Starting Out


As previously, create a new folder somewhere on your computer and name it whatever you want, i’d suggest naming it “Portfolio”, so it’s organized.

Then right click anywhere in the empty folder and choose “Open with Code”.

Then create the “index.html” file.

Then create a new folder called “css”, as the name implies this folder will hold your css files.

Then create a file in the “css” folder called styles.css (short for stylesheet).

Your Visual Studio Code window should look like this:

Now, we’re ready to begin writing the actual code!

Tip: To make starting out any HTML based project easier and faster, Visual Studio Code has a handy snippet: “html:5”. Just write it out like so:

and press “Enter” and you should have a good starting point for an HTML5 file.

Articles about what are “Emmet Abbreviations” and what does the “5” in “HTML5” mean are coming soon, but currently are not that important. Just note that Visual Studio Code has a lot of handy features, to help you develop better and faster. We will also get into the exact features in later posts. For now I wish to keep it simple and digestible, and definitely avoid causing frustration. All in due time.

Let’s quickly look at what this starting point means exactly.

<!DOCTYPE html>

On Line 1, you see a standard definition for the document type. This means that the HTML file is to be treated as an HTML5 file. In short, the newest version of HTML, that has the newest features.

<html lang="en">

On Line 2, you see the language definition for this file, in order to comply to the global standards you must specify this.

<head>

On Line 3, you see the opening tag for the head tag, you’ve seen this before, nothing new.

<meta charset="UTF-8">

Line 4 has a meta tag, that defines the character set for the document. If your content will have special characters such as “ā”, “ü” and the like, you need to have it set as “UTF-8”, it is also the most recommended charset, because there are types that present security flaws, so until someone explicitly tells you to not use it, which i’ve never heard happen, use “UTF-8”.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Line 5 is related to responsive design, it’s when the layout of your website dynamically changes to better represent the content on devices of various screen sizes. Like going to a more vertical layout, when a website is viewed from a phone, since phone screens are generally held vertically and computer screens are usually horizontal. It’s pure magic and it’s epic. It’s also too early for that, so once again, we’re going to implement it later on.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

Line 6 let’s older versions of Internet Explorer know that your webpage should be displayed in the highest possible quality, because there are cases where it doesn’t do that.

<title>Document</title>

Line 7 set’s the title that you see on top of the browser window, where you see the tab of your webpage:

Lines 8 – 12 is nothing new to you by now.

Semantic Code


All code you write should be semantic, as Mozilla states:

“In programming, Semantics refers to the meaning of a piece of code — for example “what effect does running that line of JavaScript have?”, or “what purpose or role does that HTML element have” (rather than “what does it look like?”.) “

What does that mean for writing HTML?

In my opinion, Mozilla explains it best:

“HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of CSS.

Some of the benefits from writing semantic markup are as follows:

  • Search engines will consider its contents as important keywords to influence the page’s search rankings (see SEO)
  • Screen readers can use it as a signpost to help visually impaired users navigate a page
  • Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes
  • Suggests to the developer the type of data that will be populated
  • Semantic naming mirrors proper custom element/component naming”

How to Write Semantic Html?


Mainly, we have been splitting our website structure into <div> elements, it states a division, but not the point of the element. Sure it divides the layout atleast into 2 pieces, but why? That’s where the semantic elements come in. The semantic HTML5 elements act just like divs do, they create the structure of the page, but instead of labeling everything a generic division, they provide labels that are more easier to understand and not just for other people but computers aswell. Let’s take a look at the main ones:

  • <header>
  • <footer>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <main>

Let’s go through all of them.

<header></header>

Not to be confused with <head>. The header element usually contains everything at the top of the webpage. Example by Mozilla.

<footer></footer>

Is usually located at the very bottom of the page. Example by Mozilla.

<nav></nav>

Usually only contains the navigation elements of the page, like links to other internal or external pages. Example by Mozilla.

<section></section>

Defines a section (duh) where everything is related in some way. Like a section in a magazine. Example by Mozilla.

<article></article>

Resembles a collection of information, for example a blog post about how your development journey began. Example by Mozilla.

<aside></aside>

Provides the content that is appropriate to set aside from the main information, for example a list of terms, advertisement or a highlight. Example by Mozilla.

<main></main>

Contains the main collection of content on the page. Example by Mozilla.

That was propably a lot of info to take in, but don’t stress it. You’re well on your way to create something epic even if its just a simple website that will never be public. If you follow along the next posts, it definitely will be something worth showing to the public. It is very important to grasp these basics that might seem very boring right now.

“When do I get to the COOL part?!” was a question I asked constantly when I was starting out. You’re almost there.

The boring basics are super important, because one of the cases where development is super frustrating is when you learn something, then you find out that it is a bad way of doing things, so you have to re-learn how to do it.

In my opinion it is better to spend way more time with the basics, to get coding practices as good as possible from the start to make the long run more enjoyable, than to rush things and burn out.

You will get to the fancy graphics, hover events, color changing, animation, responsive design, slideshows, integrations and everything else you want done in due time. Besides, the basics rarely change and are mostly universal across all of the programming world. The flashy stuff comes and goes, and is easier to implement than you might think. Getting the right mindset and being consistent, and patient is the hardest part of programming, atleast that’s what i’ve come to know thus far.

You patience will pay off, trust me on this one.

7. CSS Deep Dive

This is it. You made it thus far. Your website is still ugly. You know so much by now, but your website looks like garbage. When is the COOL part of web development?

This is it. It’s right now.

Do not Repeat Yourself


Firstly let’s highlight important principles to save tons of headache in the future.

First one is the D.R.Y. principle, the Do not Repeat Yourself principle. It is the most important one in any code anywhere. Period.

What does it mean? It means that the code you write for a specific thing, should be written only once. Let’s take for example the inline styles we did previously. Remember how tedious it would be to make all of the edits just for one simple change? Noone does it like that, neither should you. That’s why we learned about CSS Classes, write their properties once in the .css file and then apply them anywhere you need to, so that when something needs to be changed, you do it only in one place, the .css file.

You can’t even imagine the amount of headaches caused by developers not taking this principle into account all around the world daily, get it right from the start. Don’t repeat yourself. It’s much better to learn how to do this right from the start, even if it takes longer. Don’t be that “ill just copy paste everything everywhere, going to optimize it some time later” person.

Cascading


Using CSS you have to always remember about the hierarchy:

  1. important
  2. inline
  3. id
  4. class
  5. element

This is how you can layer css styles on elements. Let’s take a quick look:

index.html
<div style="color: red;">Some text.</div>

This is inline formatting, as you see, it’s done in the .html file. Do not do this, EVER. Not even when you’re alone, just NO. Except this one time to see how the CSS hierarchy works, then it’s fine.

Previously we also looked at how to use classes, so while our index.html stays the same, add a class to the div element, so your index.html looks like this:

index.html
<div class="myClass" style="color: red;">Some text.</div>

Now add a style.css with this code:

style.css
.myClass {
    color: green;
}

Nothing happens. Why? Because of the hierarchy, the inline style has more priority, delete the inline style and the text turns green. As you see in the numbered list I wrote previously, class is under “inline”. Put the inline style back, let’s take a look at the “id”.

What is an “id”?

An id is very similiar to a class, but it is written a bit differently and as you know by now it is “stronger” than a class and inline styles. How do you write it? First add it to a html element, like so:

<div id="myId" class="myClass">Some text.</div>

Then just add the selector and property in the .css file, like so:

#myId {
    color: yellow;   
}

First thing you notice, is the “#” instead of the “.” like when declaring a CSS class. The other thing that sets a CSS “id” apart from a CSS “class” is that there can only be one unique “id” per .html file. It is used to target just that 1 element specifically. It is not recommended to use this for CSS. It doesn’t give you much convenience even if you would. The important part here is to understand, that an “id” is stronger than a class.

What is the “element” in the hierarchy?

It is a way to target with CSS, without adding anything in the html itself. We currently have a div element in the .html file, so easily we can target it in css like this:

div {
    color: red;
}

No dots, no hashtags, just write the element name as seen in the opening and closing tags in the .html file. The downside? It’s weaker than everything mentioned so far and the other thing is that this will make all of our text in the document in red color. Try it out, add another div to your element without any CSS classes or ids. It will be colored in red. This is useful to set a base style for everything on a page, to add more specific things with more specific CSS selectors later.

What is the “important” in the hierarchy?

It’s another way to enforce hierarchy. It is good to use this rarely, best case scenario – to never use it. Nevertheless, you will come across it sooner or later in code written by other people, so it’s best to know what it is all about.

Simply put, “important” is when you REALLY need to say – Screw the hierarchy, I want it like this, right now. It stands above anything in the hierarchy. Because of this, it is a very amateurish way to do things. 99% of the time it is a hack if you need to use this selector. How do you use it?

Once again, you don’t need to add anything in the .html file, because this is something that is added only in the .css file. Like so:

div {
    color: red !important;
}

You add it “on top” of a property and not the selector or the element itself. If your html element looks like this:

<div id="myId" class="myClass">Some text.</div>

And if your .css file looks like this:

.myClass {
    color: red;
}

#myId {
    color: green;   
}

div {
    color: blue !important;
}

Then you will notice that despite the blue color being defined in the weakest CSS selector, the element one, it still is the one that produces a result, because it has this “!important” tag.

“Is there anything stronger than an “important” tag?”

No, unless its an another “important” tag. If you add this after the end of the .css file:

div {
    color: yellow !important;
}

You will see that only the last selector of the same priority will produce any result. This is what is called – the cascade. The browser reads the .css file from top to bottom, so selectors can be overwritten by equally “strong” or “specific” selectors lower in the .css file.

Comments


Commenting is a very good practice of leaving explanations next to your code, marked by special syntax. This ensures that the code is not read by the browser. Some people live by “code should be so self-explanatory, comments shouldn’t be needed”, to which I personally disagree, but nevertheless it is ultimately useful to know about commenting.

HTML Comments

To write a HTML comment, all you have to know is the special syntax. It looks like this:

<!-- This is a comment -->
<div id="myId" class="myClass">Some text.</div>

Fairly simple, to start an HTML comment write the opening tag “<!–” then the comment text, then close it with a “–>”. 

Tip: There is a keyboard shortcut in Visual Studio Code to add a comment, so you don’t have to type the arrows every time. Just press CTRL + K, then still while holding CTRL, press C. So just CLTR + K then C. You’re welcome!

CSS Comments

To write a CSS comment, you can do it in the same way, just with different opening and closing tags:

/* This is a comment */
div {
    color: yellow !important;
}

Okay, we didn’t make your webpage beautiful. These concepts will last you forever, so it’s important to learn this from the start. We will get to it in the next post. Stay tuned!