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! 

6. Getting started with CSS

What is CSS?


CSS is an abbreviation of “Cascading Style Sheets”. CSS is used to add beauty to the content, that is in HTML. So let’s break down the name itself:

Sheets – Means that it is a file, that holds only CSS code. Nothing else. Just a sheet of CSS.

Style – We’ve already dealt with Style previously. It is how HTML content is displayed. The layout, the sizes, colors and etc.

Cascading – A confusing word at first, but it only means that something is moving forward. Imagine a river, flowing forward from one end to the other, the same applies for CSS files. The stuff you write at the very top of the file can be changed further down. We will look at how it works later.

Inline styles are bad


Writing styles in HTML is bad. Very bad.

“So why did you tell me to do it man?”

Because in the start you get practical, you get it working, later you optimize it. This is how most of stuff is learned and I find it fitting for my series aswell. This also helps to show how important is optimized code. Never write styles in HTML.

The “Why”?


Imagine you have 25 web pages in your website. 5 pages in 5 languages, for example. All of them have inline styles.

Now imagine you want to make the first word of every paragraph in bold. You would have to make atleast 25 changes. Instead of that tedious work, you can do it only once. With the power of CSS.

The “How”?


Create a new file, call it “styles.css” (short for for style sheet), the same way you created “index.html”. Notice, how the icon changed, since we’re about to work in a different programming language.

So far we have added code, that immediately becomes visible in your browser. It is time we now  start learning about code, that works “behind the scenes”.

Separation of concerns


Separation of Concerns is a principle, that even though you can mix and match different languages in one file, you avoid it. Because it makes it messy and very troublesome to maintain. In the beginning, what we did, we wrote CSS inside an “.html” file. (Yes, you already are writing in two languages! Awesome! You now have the rights to treat yourself.)

This, as already stated, will be annoying to maintain, even if it’s a simple change.

Delete all of the inline style tags and their properties. Your code should now look like this:

<html>

<div>
    <div>
        <h1>My Blog</h1>
        <p>My first blog template, learning how HTML layouts work!</p>
    </div>

    <div>
        <h2>About HTML Blog layout</h2>
        <p>September 2, 2018 by Me</p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.
            Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in
            risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet
            laoreet magna elementum.

            Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac.
            Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet
            tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat
            malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum
            vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
        </p>
    </div>

    <div>
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

        <h3>Archives</h3>
        <ul>
            <li>September 2018</li>
            <li>August 2018</li>
            <li>July 2018</li>
            <li>June 2018</li>
            <li>May 2018</li>
        </ul>
    </div>
</div>

</html>

As you see, HTML should only hold content. Not tell it, how it should look. 

“But how can I make it pretty again?”

You will write the same properties, but this time in the .css file you just created.

“But how will the .html file see the .css file? Is it automatic?”

No, you will tell the .html file to look at .css file and read what’s inside, by linking it in what is called the “head” of the document.

Where is your <head> at?


What is the “head”? Where is it and why do you need it? Add this between the opening html tag and the first element:

<head>

</head>

So now it should be like this:

<html>

<head>
    
</head>

<div>
    <div>
        <h1>My Blog</h1>
        <p>My first blog template, learning how HTML layouts work!</p>
    </div>

    <div>
        <h2>About HTML Blog layout</h2>
        <p>September 2, 2018 by Me</p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.
            Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in
            risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet
            laoreet magna elementum.

            Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac.
            Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet
            tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat
            malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum
            vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
        </p>
    </div>

    <div>
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

        <h3>Archives</h3>
        <ul>
            <li>September 2018</li>
            <li>August 2018</li>
            <li>July 2018</li>
            <li>June 2018</li>
            <li>May 2018</li>
        </ul>
    </div>
</div>

</html>

The <head> element takes care of all the code that is not visible, also called “rendered” on the page itself. It takes care of linking documents together, for example linking your current webpage to a CSS file, or a Cascading Style Sheet, that will determine how your website looks visually.

So how do you link a cascading stylesheet in your HTML?


What you want to create, is a link.

“Wait what? I made a few in a previous blog post.”

Yep, same linking, but with a different element. Add this directly into the <head> of your document:

<link rel="stylesheet" href="styles.css">

Let’s break it down:

rel=”stylesheet”

This is how you define the relationship of the both files, you specify that the file this link links to is to be treated as a stylesheet.

href=”styles.css”

This is the actual path to the file. Since it is in the same folder as the index.html, then just the name and extension will be enough. Let’s be even more professional and create a new folder in this folder, called “css” and throw that .css file in. After that, change the link appropriately, to this:

<link rel="stylesheet" href="css/styles.css">

Writing CSS


“Previously we wrote CSS in an opening HTML tag, how do we write it if there is no tag??”

We will make use of something called CSS classes. We will do all of the style definitions only in .css files from now on.

What are CSS classes?


CSS classes are written in both files. In the .html file you will mark an html element with a class. In the .css file you will explain, how the class looks. The value is that you can add the class to any elements you like and just change the code in the .css file to see the changes get applied to all of the elements at once. This is the power of CSS classes. Let’s check it out!

Within your .html file, change it so it looks like this:

<html>

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

<div class="page-wrapper">
    <div>
        <h1>My Blog</h1>
        <p>My first blog template, learning how HTML layouts work!</p>
    </div>

    <div>
        <h2>About HTML Blog layout</h2>
        <p>September 2, 2018 by Me</p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.
            Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in
            risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet
            laoreet magna elementum.

            Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac.
            Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet
            tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat
            malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum
            vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
        </p>
    </div>

    <div>
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

        <h3>Archives</h3>
        <ul>
            <li>September 2018</li>
            <li>August 2018</li>
            <li>July 2018</li>
            <li>June 2018</li>
            <li>May 2018</li>
        </ul>
    </div>
</div>

</html>

As you’ve noticed i’ve added the following to our most outer div tag, that contains all of the page elements within it and named “page-wrapper”, because it wraps around all of our page content. Cool! It’s that easy! Now let’s go to the .css file and add this:

.page-wrapper {
    margin-left: 25%;
}

This is literally the only text in your .css file. It is really self-explanatory, you just have to get used to the syntax. One thing that deserves your attention, is that class declarations in .css files start with a dot (“.”) and hold the properties withing squiggly brackets (“{ }”).

Let’s add a few more:

<html>

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

<div class="page-wrapper">
    <div>
        <h1>My Blog</h1>
        <p>My first blog template, learning how HTML layouts work!</p>
    </div>

    <div class="post-wrapper">
        <h2>About HTML Blog layout</h2>
        <p>September 2, 2018 by Me</p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.
            Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in
            risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet
            laoreet magna elementum.

            Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac.
            Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet
            tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat
            malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum
            vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
        </p>
    </div>

    <div class="sidebar-wrapper">
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

        <h3>Archives</h3>
        <ul>
            <li>September 2018</li>
            <li>August 2018</li>
            <li>July 2018</li>
            <li>June 2018</li>
            <li>May 2018</li>
        </ul>
    </div>
</div>

</html>

Add the following to your css file:

.post-wrapper {
    width: 40%; 
    display: inline-block;
}

.sidebar-wrapper {
    width: 20%; 
    display: inline-block;
}

So your .css file now looks like this:

.page-wrapper {
    margin-left: 25%;
}

.post-wrapper {
    width: 40%; 
    display: inline-block;
}

.sidebar-wrapper {
    width: 20%; 
    display: inline-block;
}

Open your page and it should look just like before. But now your .html file is clean and tidy and no matter how many pages the classes will be added to, you will only make CSS changes in the .css file.

5. Getting Started With Visual Studio Code

It’s time to upgrade your toolkit. Next posts will involve using multiple files at the same time, so it is time to learn your first powerful tool of development.

Please welcome Visual Studio Code, made by Microsoft. Available on all platforms.

Is notepad not good enough?


No, while it can be used, it doesn’t provide all of the features that makes you efficient. Imagine building a skyscraper with only a hammer, saw and a screwdriver. You need serious tools. It’s time to stop playin’.

Starting work with Visual Studio Code


It’s very simple. Download it, install it and run it. One thing worth mentioning is that during the installation process, make sure to select the following checkboxes:

The first one is, of course, optional. The 2nd and 3rd will allow you to very easily open any folder or file with the right mouse button click, it will look like so:

The 3rd will allow you to automatically open any code-related file with Visual Studio Code instantly. The 4th one, judging by the official documentation, will allow you to launch Visual Studio Code from the CLI, if you do not know what that is, don’t worry. It probably does other things aswell and it doesn’t hurt to add it to PATH, again, if you do not know what that means, don’t worry.

Running Visual Studio Code for the first time


If everything went successfuly then this is what you should see. Let’s break down the layout.

Outlined in green you see the sidebar, this is where you will organize your project, choose files for editing, and much, much more. Currently, the file editing part is the important one.

Outlined in red is the main work area, this is where you will write code. Don’t go too much into detail about what’s in the newest “1.27” update just yet, it will be really confusing for starters. The main thing you should focus on is that there are tabs at the very top, just like you would see in any web browser nowadays. 

Outlined in blue is the bottom bar, you will see information change here as you work on a project, nothing super important when you’re starting out, just so you know there won’t be any important buttons there for now.

So the sidebar and the main work area are the main places you will focus on.

Bring in the code


Let’s take a look what the check boxes we checked during the installation actually do for us. Close the currently open Visual Studio Code window for now. Go anywhere in your computer and create a new folder, name it whatever you want and open it. Then right click anywhere in the folder.

What you see is called the context menu, within it you see “Open with Code”, clicking this will automatically launch Visual Studio Code with this folder that you have just clicked the button in.

You can confirm this by looking in the side bar, you will see the name of the folder, just under the “Open Editors” sub-menu. Open Editors is the same as the tabs that are currently open in the main work area. You can close the “Welcome” tab, so you see the above screen.

Ready to upgrade your coding experience?


Now let’s create our web page again, this time through Visual Studio Code. In the sidebar, right-click and select “New File” as in the image below. 

Then just write “index.html”. The editor automatically sets the extension and after pressing “Enter” you should see this:

Now let’s go back to the previous post and take all of the code we wrote at the end of it. If you’re lazy, don’t worry, I got you, here is the code:

<html>

<div style="margin-left: 25%;">
<div>
<h1>My Blog</h1>
<p>My first blog template, learning how HTML layouts work!</p>
</div>

<div style="width: 40%; display: inline-block;">
<h2>About HTML Blog layout</h2>
<p>September 2, 2018 by Me</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus. Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet laoreet magna elementum.

Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac. Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
</p>
</div>

<div style="width: 20%; display: inline-block;">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

<h3>Archives</h3>
<ul>
<li>September 2018</li>
<li>August 2018</li>
<li>July 2018</li>
<li>June 2018</li>
<li>May 2018</li>
</ul>
</div>
</div>

</html>

Paste it in, press CTRL + S to save and it should look like this:

What you immediately notice, is that the code get’s colored in different colors, this enhances readability by allowing you to instantly understand what is where.

Let’s do something epic


As you see, all of our code is aligned to the left side. It is readable, but could be much better. Select all of your code and press this combination: CTRL + K and immediately after that CTRL + F and you will see that the code get’s instantly formatted, placing all of the elements that are inside others in a much more recognizable position.

Take note about this set of buttons that are not immediately visible, but when you hover your mouse between the line number and the code itself, little [-] boxes appear.

These boxes, when clicked, will collapse the whole element and hide it’s child elements inside it. This allows you to efficiently control the structure of your elements and to make sure, that no closing tags are forgotten.

Much more manageable and much easier to cut & paste elements to restructure the whole thing. 

There you have it, save your web page and view it in the browser to make sure everything went well and I hope this gave you an insight on how to use this powerful, cross-platform tool brought to you by the wonderful people at Microsoft.

4. HTML: Layout and Style

In the previous post we looked at the different elements that are most commonly used in websites. Let’s talk about layout. Obviously, after the content itself, the way it is presented is the second most important thing about a website. How easy is it to find stuff, is there always a way back and similiar problems must be tackled when creating a website.

How to move things around?


If you’re wondering if it will need another HTML tag – yes, this time its called a <div>. That stands for “division“. The simplest way to understand how a div works, is to imagine that it’s a box. A box that holds any HTML elements you put into it, like this:

<div>
<h1>A title</h1>
</div>

Currently, the code wont make the title look different, you have only created the division. Instructing the division element to change the layout is very simple. You’re going to use what is called an attribute of the div element. You might have noticed that the title has the word “Style” in it. Now we’re going to use it. It is the name of the attribute of div elements.

Let’s take a look:

<div style="text-align: center">
<h1>A title</h1>
</div>

Simple enough, right? So you went into the opening tag of the division element, said that – “I want to set the style of this element to align the text it contains in the center!”. When you take a look at the web page in your browser, your text is centered! Epic! You’re well on your way to create beautiful designs.

How is a style applied?


Let’s analyze what you just wrote, it has 3 pieces:

The Attribute

style=""

The “style” attribute can be changed for all HTML elements. It defines the style of the element with what is known as a CSS style. We will talk about CSS in the oncoming posts. For now, just know that CSS is what changes the look of things on a web page, while HTML is the content itself. 

The Property

text-align:

This part is which declares what exactly is it we want to change. In this example, the alignment of text. Pretty straightforward.

The Value

center

Also self-explanatory, the value we want to change the default one from. In our case, the default “text-align” for all elements is “text-align: left”, so we changed it to “center”. You might aswell change it to “right” and have all of the text inside the div that we made previously align to the right side of the webpage.

How to arrange a webpage layout?


Just centering text is not enough, so let’s dig in further. Divs are a good way to split your webpage into boxes and to apply styles on all elements inside it. 

Let’s create a similiar blog type layout, to the one below:

The first thing you should start with when designing a web page, is to arrange everything in boxes. In this example I see 3 big ones:

Each of these boxes or divs, can be split even further, like for example, the sidebar has an “About” and an “Archives” box.

Let’s make it happen


Let’s start with a new HTML file:

<html>

</html> 

Now let’s add all of the content:

<html>

<h1>My Blog</h1>
<p>My first blog template, learning how HTML layouts work!</p>

<h2>About HTML Blog layout</h2>
<p>September 2, 2018 by Me</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus. Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet laoreet magna elementum.

Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac. Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
</p>

<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

<h3>Archives</h3>
<ul>
<li>September 2018</li>
<li>August 2018</li>
<li>July 2018</li>
<li>June 2018</li>
<li>May 2018</li>
</ul>

</html> 

Now when you refresh the web page, you might start to see how everything will go into its place soon enough. Time to make some divs! We need 3 of them:

<html>

<div>
<h1>My Blog</h1>
<p>My first blog template, learning how HTML layouts work!</p>
</div>

<div>
<h2>About HTML Blog layout</h2>
<p>September 2, 2018 by Me</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus. Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet laoreet magna elementum.

Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac. Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
</p>
</div>

<div>
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

<h3>Archives</h3>
<ul>
<li>September 2018</li>
<li>August 2018</li>
<li>July 2018</li>
<li>June 2018</li>
<li>May 2018</li>
</ul>
</div>

</html> 

As mentioned previously, just adding div tags wont change anything, so let’s add attributes. Since the example web page layout is nicely centered, let’s add a div around everything that we have currently, by the way, this is also called “wrapping” – when you “wrap” something in, for example div tags. 

So now you should have 4 divs in total, like so:

<html>

<div>
<div>
<h1>My Blog</h1>
<p>My first blog template, learning how HTML layouts work!</p>
</div>

<div>
<h2>About HTML Blog layout</h2>
<p>September 2, 2018 by Me</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus. Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet laoreet magna elementum.

Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac. Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
</p>
</div>

<div>
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

<h3>Archives</h3>
<ul>
<li>September 2018</li>
<li>August 2018</li>
<li>July 2018</li>
<li>June 2018</li>
<li>May 2018</li>
</ul>
</div>
</div>

</html> 

Let’s start off by adding the following attribute to the very first div tag, the one that has all of the elements inside it:

<div style="margin-left: 25%;"> 

So now you should have the following code:

<html>

<div style="margin-left: 25%;">
<div>
<h1>My Blog</h1>
<p>My first blog template, learning how HTML layouts work!</p>
</div>

<div>
<h2>About HTML Blog layout</h2>
<p>September 2, 2018 by Me</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus. Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet laoreet magna elementum.

Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac. Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
</p>
</div>

<div>
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

<h3>Archives</h3>
<ul>
<li>September 2018</li>
<li>August 2018</li>
<li>July 2018</li>
<li>June 2018</li>
<li>May 2018</li>
</ul>
</div>
</div>

</html> 

The code we just added, moves all of our html elements 25% from the left side of the page.

By default, divs are taking up all of the horizontal space, that’s why they are stacked on top of one another in our web page currently.

So lets change that. Add this to the lower two divs:

<div style="width: 40%; display: inline-block;"> 

Change the width of the last div to be 20%, so that it doesn’t take up too much space and closer resembles the layout we looked at in the beginning. So now your code should look like this:

<html>

<div style="margin-left: 25%;">
<div>
<h1>My Blog</h1>
<p>My first blog template, learning how HTML layouts work!</p>
</div>

<div style="width: 40%; display: inline-block;">
<h2>About HTML Blog layout</h2>
<p>September 2, 2018 by Me</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus. Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet laoreet magna elementum.

Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac. Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
</p>
</div>

<div style="width: 20%; display: inline-block;">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

<h3>Archives</h3>
<ul>
<li>September 2018</li>
<li>August 2018</li>
<li>July 2018</li>
<li>June 2018</li>
<li>May 2018</li>
</ul>
</div>
</div>

</html> 

Nice! Looking good! Now let’s analyze what we’ve just added:

width: 40%; 

Simply tells the element how wide it should be.

display: inline-block; 

This tells the element to instead of taking all of the horizontal space on the page, it should allow other elements to be in-line with it, the “block” means that it still should be treated as a box element.

If you remove the “-block” part, everything will return to being as it was, because since you took the box behavior away, everything now is in the same box, thus the structure is lost.

3. HTML: A Detailed Look

In the previous post we looked at how easy it is to actually create a webpage. Of course, not the most informational, content-rich or beautiful webpage, but one that is yours. By now you probably have a lot of questions. No worries, we will go through them one by one.

First and most importantly:

What is HTML?


HTML or Hyper Text Markup Language serves as the backbone that holds all of the content of any webpage. Literally all of them.

“Even giants like Facebook, Google, Amazon?”

Yes. They weren’t developed the way you are developing right now, but the technology to display content is the same.

Is there an <h2>?


Yes, not only <h2> but it goes all the way to <h6>. Let’s try it out and see for ourselves! In the same .html file you created when reading last post, just copy and paste the <h1> heading 5 more times, so you have 6 in total, then just change the numbering as follows:

<h1>Web Development: Day 1</h1>
<h2>Web Development: Day 1</h2>
<h3>Web Development: Day 1</h3>
<h4>Web Development: Day 1</h4>
<h5>Web Development: Day 1</h5>
<h6>Web Development: Day 1</h6>

How many elements are out there?

A lot. We’re going to go through the most important and commonly used ones in this post.

Lists


Most webpages list stuff. Be it the latest news, tops, e-shop items, pictures, you name it! So let’s list some stuff ourselves! Let’s begin with the unordered list, what does that mean? It means that the individual items are provided in no specific order.

For example, you could create a shopping list for groceries. To write a list, you have to start with the opening and closing tags:

<ul>
</ul>

(for unordered list)

Next up, lists contain list items. Each list item also has opening and closing tags:

<ul>
<li></li>
</ul>

That’s it! Now all you have to do is create as many list items and fill the area between the tags with groceries, like so:

<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>

The result should look like this in the browser:

Ordered lists are made the same way, just edit the list tags themselves from <ul> to <ol> (for ordered list), like so:

<ol>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ol>

The result should look like this in the browser:

Links


What would the internet be without links? Obviously websites link to one another and they have links for other pages and even link to positions in the same page aswell! Let’s create a link right now. Just as with most HTML elements, links need opening and closing tags aswell. They are written like so:

<a></a>

“What does “a” stand for?”

It stands for “anchor”, don’t ask me why. We just roll with it. If you add a link element like above to your webpage and refresh the browser, nothing has appeared. Why?

It’s because a link element has multiple parts:

  • The link text
  • The link target
  • Additional elements

So let’s add the link text first:

<a>My first link!</a>

“Okay, the text appeared, but I can’t click it?”

Yes, because we’re still missing the link target. The link target is where you will be sent to after you click the link. Choose the full address to your favorite website, or just use “https://www.google.com/” and add it as a link target like so:

<a href="https://www.google.com/">My first link!</a>

Yay! It became active and is now clickable! How about the other additional link elements? Most important ones are the “target” and “title” elements, let’s add them:

<a href="https://www.google.com" target="_blank" title="Sends you to Google search!">My first link!</a>

As you see, the elements can be added within the tag, just by adding them before the “>” character.

The target element specifies what relation your page and the linked webpage have, in our case, we simply specify to open the link in a new (blank) tab.

The title element provides any additional information for when a user puts their cursor over the link but doesn’t click it yet, try it!

Tip:

Before clicking on a link, always check where it leads by looking at the lower left corner of the browser. Links, especially in e-mails might be dangerous, so compare the links whether they have the same starting part as the website you intend to go to, for example, if you receive a link that says it will go to Facebook, hover over it with your cursor and double-check whether the link really starts with “https://www.facebook.com/”. Nowadays you can easily put yourself in danger by clicking the wrong link.

Images


Ah yes, what would the internet be without cat pictures, memes and the sorts. Adding an image to your website is very easy. There are also multiple ways to do it, but I will show you the easiest for now. Let’s add an image:

<img src="https://s3-eu-west-1.amazonaws.com/onin.london/assets/macexplorer.com-puppy-dog-26.jpg">

“src” means “source”, where is the image located. You can change this part to whatever you like, just take note that the link should end with an image extension, like “.jpg” as in our case or for example: “.jpeg”, “.bmp”, “.gif” and others. 

You can get the link of any image on the internet by right clicking it and choosing “Copy image address” for Chrome.

You can also add images from your computer, just go to the folder where the image is located and copy the path from the address bar, add the image file name and extension, for example, like this:

Note, that the img element does not have a closing tag.

Summary


By now you should already feel comfortable using HTML elements. We gained a bit of knowledge about the most commonly used elements on the internet and tried them out for ourselves! Good job!

2. Good ol’ HTML

Ah, the good ol’ HTML. Open notepad, right now. We have your first website to build.  Write the following:

<html> 

Now save it somewhere with the name “index.html”. Don’t close notepad, just save the file.

What you just wrote is an html tag. This is an html opening tag, which means whe need a closing tag aswell. Press “Enter” once to create an empty line, then write:

</html>

So now you should have it like this:

<html>

</html> 

Great! Now you have defined the start and end of your website page! Wasnt that scary now was it?

Lets see how it looks!

  1. Save the file.
  2. Open your favorite browser.
  3. Drag the file into the browser.
  4. Press “Enter”.

If all you see now is blank white nothingness, you have succeeded! You are now looking at your first webpage!

“Its the most boring website I have ever seen, there is nothing in it?”

Correct, now lets make it look like a website. We will turn it into a diary page, so what we will need is:

  • A title.
  • Some text on how it went.
  • Information on when did we write it.

Fair enough, lets start with the title. Write the following, just under your opening html tag:

<h1> 

“What in the world is an h1?”

It stands for “heading 1”, in other words “a big title”. As you may have noticed, this seems similiar to the html opening tag. Its actually a “heading 1” opening tag! In the same way, it needs a closing tag. So lets write one literally just after the opening one, like this:

<h1></h1> 

Now comes the fun part, you can start creating content! Think of a good title about learning html today or just write: “Hello word!”, in between the opening and closing “heading 1” tags, like this:

<h1>Hello world!</h1>

Now your whole document should look like this:

<html>

<h1>Hello World!</h1>

</html> 

Great! Now you should be able to see your website.

  • Save the file.
  • Go back to the browser.
  • Pressing “F5” also known as – refresh. (Because it loads in all of the freshest data for the website. Sometimes pressing this helps if you see weird things happen on a website.)

Great! What youre seeing now is your very first website evolving into something that you will look back on with a wide smile.

Lets add more!!

Paragraphs are the main text containers in html. So lets create one. Write opening and closing paragraph tags, just under the title, like this:

<p></p> 

Easy enough! Now I would strongly suggest to write down descriptions for all html elements you used up to this point without scrolling the blog post up. This will help you remember better. Just look at the code and write up what you remember and then compare to what I wrote previously.

Once youre done, I will tell you about how to separate sections of a paragraph, so its easier to read.

Whenever you wish to break the text into the next line, just write:

<br> 

This one is special, because it doesnt need a closing one, it simply doesnt exist. The reason is because a line break doesnt have anything in it, also the common practice is to just add these elements (but only in between <p> and </p> tags) as much as needed.

For example, if you want to create an empty line between two paragraph lines, just write out two <br> tags.

Here is an example of a final document:


<html>

<h1>Hello world!</h1>

<p>

Today I started learning HTML. I found it pretty easy.

<br>First you have to write opening tags for stuff, then you write stuff, then you write closing tags.
<br>Not all elements have closing tags.
<br>I can also write titles now and move paragraph lines away one from another.

<br>
<br>

August 4th, 2018.

</p>

</html> 

Final Document Result (as seen in the browser):


Great! You’re very own first HTML document! It’s not the most beautiful or the most informative, but it’s a very important one, because it’s where it all started! Carry on now to the next post, where we take a more detailed look at HTML.

1. Programming: An Introduction

What is programming?


Let’s get right to it – programming. What is it? What does it take and what does it mean to be a programmer?

Merriam-Webster defines it as “the process of preparing an instructional program for a device (such as a computer)“. How on earth do you even get around to preparing an “instructional program for a device”? You write it. You write code. Just like you would write a poem, with a specific way of writing words, using punctuation and structure.

“Wait you don’t write out “01110010 01100001 01101110 01100100 01101111 01101101 00100000 01101111 01101110 01100101 01110011 00100000 01100001 01101110 01100100 00100000 01111010 01100101 01110010 01101111 01100101 01110011 00101100 00100000 01101100 01101111 01101100″ to the computer?”

You can do it if you really want to (you probably don’t), nowadays you write words in English. Then the computer takes it from there, it does at one point translate your code into ones and zeroes (binary code) because computers at their most deepest level are just electricity switches, where “1” means electricity can go a particular way and “0” means it can’t.

“So you want to tell me, programmers are wizards that bend electricity to their will?” 

Yep. Ain’t that cool? Let me tell you a few things that programming is not.

How to be a programmer?


I want to completely destroy the following stereotypes right here and now:

“You have to be a professional in mathematics in order to program.”

The most popular stereotype I’ve heard and it’s one of the most false ones. No. Your skill at mathematics does not affect when you can learn programming. I don’t even know where this came from, but think about it – computers are infinitely better at math than humans. Humans are infinitely better at solving tasks creatively. Computers cannot do anything without instructions. Of course, if you plan on joining the industry in a sector that’s specialized in mathematics, like companies that create massive reports or otherwise do a lot of number crunching, then of course you will need to know math.

Knowing math is useful in any life situation, but it definitely is not necessary to learn programming. If you will need it, you can learn it along the way (in case you want to do it right this moment, khanacademy.org is an amazing learning platform that has a lot of material on math for free, they’ve turned learning math into a game).

“You have to attend university to learn programming.”

Yes and no. Yes, because universities are ok when you do not know what you want and someone is ready to pay for your uncertainty. No, because most universities do not cover real life situations in programming. Students are not instructed to solve real life problems in real life situations, instead they are fed a bit from everything in hopes that something will stick, spreading their knowledge far and wide, and not supplying them with enough of practicality.

 I, personally, would suggest to learn off of the internet (like you are doing now, good job!) and when you have something to show, join an internship, a bootcamp, a meetup, jump into the real life programming environment and have professionals around you as soon as possible. Only people with real life experience will lead you into the right direction. I self-learned myself into joining an internship, then I was hired full-time. You can do it too!

“You have to be real good with computers to learn programming.”

I find this one pretty true, because obviously you have to know the machine you’re going to be writing poems for, but it’s not fully true. In reality the minimum of what you need to start is:

  • A computer connected to the internet.
  • Understanding of the English language (there are learning materials in other languages, but English has the most).
  • Willingness to learn.
  • Notepad.

That is all. In order to start learning programming, this is the minimum requirement list. With so much information on the internet about pretty much anything, the information you want to learn about computers is most likely just one Google search away. Even if you are not professional with computers as to how they work inside, you will learn this on the job.

“We’re going to write in notepad???”

Yes, we are going to start off with notepad.

How to be a good programmer?


In order to actually succeed as a programmer, you actually need 3 traits:

  • Patience
  • Eye for detail
  • Being communicable

Patience

In reality, you will get stuck a lot, especially in the beginning. I will give tips on how to get stuck less frequently and when you do, how to get back on track faster. It is inevitable, that you will have situations where everything “should work”, but doesn’t. You might be stuck on problems for days or even weeks. That is the reality of being a programmer. It is not because you’re bad, it is because there are a lot of moving parts to take care of and mainly – you are going to work with code others have written.

Eye for detail

You think a misplaced comma is a programmer joke? It isn’t. One small mistake hidden somewhere can, in fact, crash a system. There are tools and techniques that help you with finding problems like this, but it is also inevitable. In programming “myProgram” and “MyProgram” may have two entirely different meanings. Everything has to be precise for the program to run smoothly.

Being communicable

“What? But I thought i’m going to give instructions to the computer, not humans!?”

Of course, but you will work alongside other humans, you will be taught by other humans and you will participate in code reviews with other humans, where other humans will look at your code, then at you, then at your code again. Then they will ask questions as to why do you think your code is the way it is. It is very important to be able to speak your thoughts clearly, to explain why you think your code will work the way you intend it to. It is also very important to ask questions when you are stuck. Do not even imagine that sitting and staring at your screen will magically solve the problem. You are a problem solver, so solve it. If you can’t, you can ask for input from your colleagues or the internet.

One fun exercise is to have a toy on your desk and you ask it the questions you have. You might come up with an answer while vocalizing your problem. It is called “Rubber duck debugging“, because the origin of this is when someone explained the problem to a rubber duck and came up with an answer to their problem.

As Wikipedia states: “Many programmers have had the experience of explaining a problem to someone else, possibly even to someone who knows nothing about programming, and then hitting upon the solution in the process of explaining the problem.”

I myself have written questions to colleagues, only before hitting “Enter” I realize, that the answer is hidden in the question itself.

How to start learning programming?


Do You Want To Know What It Is Laurence Fishburne GIF - Find & Share on GIPHY

You’ve gotten this far. You have shown interest. I believe it is time for you to venture down this rabbit hole and see where it leads you, start with the Good ol’ HTML.

Hello Internet!

It’s me – Arthur and this is ground zero. The beginning of an exhilarating journey, which I hope will bring value and in the best case scenario – inspiration.

What am I on about?


Quite simply – I want to create enough content, to bring anyone and I mean anyone from 0 knowledge in programming, to becoming employable. Given that you have the interest and the willingness to allow me to guide you through the journey of tackling the most sought after profession of our time.

Why am I doing this?


Because just like you, I started off somewhere without anyone I knew that could guide me through the beginning, which in all honesty is the hardest part (just like in everything). I have to admit that at the time when I started, I had quite a lot of experience with computers and the internet in general. I had practically no clue about programming though.

What content can you expect?


I went out to search and research on what is what, where to start, which path to take, which language and so on, and so on. This is what I will serve to you on a silver platter, in laymans terms and hopefully in a format, that you will find comfortable to learn from. As of today, I am starting to produce the series in which we will tackle (but not limited to) the topics below:

  • What is programming?
  • Popular myth destruction.
  • The basics.
  • Your first webpage!
  • Your first beautiful webpage!
  • Your portfolio webpage!
  • Free learning materials.
  • Video tutorials.
  • Tools.
  • Mini-projects.
  • Sources where to learn more from.
  • How do professionals do it?

So as you see, theory intertwined with practical projects. If you want to learn from dry theory and tons of terminology that doesn’t make any sense, you will not find that format here. I will attempt to break down the concepts into actually consumable material and refrain from fancy-pansy vocabulary as much as possible.

Wait – you said “for free”, what is in it for you?


I went from 0 to employable by self-learning everything. From material available online for free. Quite honestly, becoming employable in this industry is what saved my life in a way. That’s why I have personal attachment to the subject. That is exactly why I will go the extra mile and offer all of it for free, because it’s how I received it and it is how I will pay back to the community.

I believe everyone regardless of their origin, financial situation, life situation or whatever else, should have the possibility to learn programming nowadays. This is the future and it is coming fast. I wish to provide value and a chance for anyone, who maybe has only the willingness to learn should have the chance to learn. (back when I started, 29$ for a course was unaffordable for me)

So where will this content be located?


Right here, on my website. It will definitely change alot during the next months, but everything will be front and center, so you cannot miss it. Bookmark my page and/or subscribe to my newsletter to be notified of the latest news.


The internet helped me when I most needed it, now it’s time to return the favor. 


Best regards,

Arthur