What to Learn First

#beginners #html #css #tutorial

Getting Started

So you want to learn how to code websites but are unsure where to start? Well, CodePen is a fantastic site/tool to use to help you learn your way around the basic site scripting languages.

HTML

Essentially HTML (Hypertext Markup Language) is the bare bones of a website. This is as basic as it gets.
If you are just starting to code I suggest learning HTML first before any other scripting language as this will assist you in understanding how websites are formatted.

<!DOCTYPE html>
<html>
<head></head>
<body>
<title></title>
<header></header>
<p></p>
</body>
</html>

Above is a simple html page, of course if you were to open a page with that exact code, the page would be blank. To briefly explain how html works, there are tags for all that is html. Even an html tag to tell the site that you are using the language html. The next is the head tag which is where you can link other scripts to other documents that you want to integrate into your html code. This will come later on so no need to worry about that. The title tag is simply the words on the tab at the top of the page. header is a bootstrap container. A prime example of this is on News websites, they use a header to introduce the name of the article. p is simply a paragraph section. Lastly, body is essentially the parent of p. Remember that all of these tags need to be closed using the same tag but with a / before the word or letter. Example: </html>

CSS

Cascading Style Sheets other known as CSS is what makes a website visually appealing. Usually this involved shapes, fonts and animations (keyframes). Below is a prime example of what can be done with just CSS.

See the Pen Profile Layout on load by Conner (@cluzier) on CodePen.

If you look at the example above, CSS is basically the meat of a webpage. A simple way to start out is by understand how to implement it in your html. This can be done by going to your <head> and inserting where the .css document is.

link rel="stylesheet" href="style.css">

Once your style sheet or whatever you choose to call your .css file is linked to your html page you can start adding code to your .css file. Make sure that you have elements in your .html file that you want to edit such as a paragraph <p> or a <div>. Here is a simple portion of code that will show what a div's css code would look like.

.div {
  margin: 0 auto;
  position: relative;
  background: #202B33;
  height: 200px;
  width: 200px;
}

This would link to this portion of your html code

<div class="div">
</div>

Conclusion

Whilst this information may be a lot at once, if you grab anything from this it would be to start with learning HTML. Once you're comfortable with that move onto CSS. There are endless tutorials on https://stackoverflow.com if you're confused or stuck. Just stick to it!