Starting with HTML5 and CSS3

Disclaimer

I have gained the following insights while working through the Firehose Project's Bootcamp Prep Course and Khan Academy's Intro to HTML/CSS: Making Webpages.

Where to Program

Before you can start writing your HTML and CSS code you need to download an editor that you can write it onto. The two that I have worked with are: Sublime Text Editor 3 and Notepad ++, which are both free. However, there are many more resources that you can use to do online coding.

Basic HTML

Let's talk about what HTML is. In essence, the HTML code is used to store all of the content of your webpage. All of the text, images, hyperlinks and other elements are stored and sorted here.

Above is an example of some basic HTML code, the essence of any webpage, from inside Sublime Text. You will notice that each element is put on its own line and that the words in pink each appear twice; once between these symbols <> and once between these symbols </>. These words and symbols designate the start and end of a particular element. For example: <html> and </html> tell the computer that everything inside of those two keywords is HTML code so that the computer knows to read it as a webpage. This is why these keywords are at the very beginning and very end of the code.

Now look at the keyword head. This keyword creates a hidden subsection of the webpage that contains important elements that you don't want visitors to see. The meta section tells the webpage to use only western letters for writing. The title section gives your webpage a name that is seen in the tab at the top of a visitor's web-browser and in their history, this will also help people to search for your webpage. The body keyword creates the visible section of your webpage that visitors can see. Notice that all of the other elements are contained within the body section.

The h1 and h2 keywords are both creating titles or headers. The h1 keyword makes the main title of the page, so the words in it will, by default, be bigger thatn the subtitle text created by h2. These titular keywords actually go up to h6, with each one, by default, being slightly smaller than the one before it.

Finally, the p keyword creates the paragraphs of the webpage. This is where you will write the bulk of the text for your webpage, just like in the example. Each of these body keywords automatically create a gap above and below themselves, this means that if you want to create a new paragraph you could write it within a new p keyword.

Basic CSS

Now let's move on to CSS. In essence, the CSS code controls the appearance of all of the elements of your webpage. All of the text, images, hyperlinks and other elements can be resized, moved around, colored and layered among other things.

Above is an example of some basic CSS code, the styling of any webpage, from inside Sublime Text. All of the CSS elements are hidden inside the head section of the HTML, within the further sub-section, style. This is one place to put the CSS code, but you can also include it in a separate document that is called in the head subsection using a line of code like:

You may have noticed that the keywords: body, h1, h2 and p have reappeared. This is because CSS allows you to change the appearance of each of these elements separately using their keyword. For example; background-color is changing the colour of the entire webpage from the default white to yellow. Also, font-family is changing all of the text on the webpage to the sans-serif font.

All of the text in the h1 section is becoming underlined thanks to the text-decoration keyword. The text has also increased in size to 30 pixels* thanks to the font-size keyword. The font-weight keyword in h2 is making the text in this section bold. Meanwhile, the colour of the text in the p section has been changed to blue thanks to the color keyword. The letters rgb after the color keyword stand for red, green and blue. These are the colours that each pixel on a screen can generate. By changing the intensity of each of these colours, pixels can recreate a wide range of colours. The intensity of each color ranges from 0 to 255. For example rgb(0, 0, 0) makes black, rgb(255, 255, 255) makes white and rgb(66, 66, 244). You can get a better idea of what colors can be made in this way using a color picker.

Round up

Using each of the HTML and CSS elements outlined above and changing the various elements about should allow anyone to create their own basic webpage. Any webpages made in this way will currently only work on your own computer. In order to have it available to all people on the internet you will either have to use an in-browser coding editor like that used by Khan Academy or upload your file to a website host like getforge.com. Here is what my website currently looks like: