Where you should start
Never coded before? That's ok!
Start super simple, start with HTML5! Sure, many will tell you HTML or CSS are not coding langauges, and here there is some truth, but let's not play the semantics game. Writing out HTML will directly effect the DOM (Document Object Model) in otherwords it will change what you see in your browser. So although HTML, XML and CSS are not scripting langauges but rather markup languages, still they are simple to learn and good way to start (especiall for aspiring web developers) and understand some fundamentals before getting in too deep. This is pretty easy stuff so...
Let's Begin!
Super basic setup here, lets create a new file on your desktop and name it index.html in this folder lets put a few simple lines of code, so open this file in any text editor you want and add this in.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Feel free to copy and paste. Now save and double click on the file, or right click and choose to open in a browser (this will vary a bit depending on OS and how prefrences are set.) Do you see in big black lettering Hello World!, there you go, this is your first step in learning to code!
Let's explain
HTML (and XML) use the <> to surround code that gets interpreted by your browser on what to display. the first line tells your browser this is an HTML5 document. The second line tells it that it will be in English. Although it is not fully neccessary to declare a langauge it's good practice. Lines 3-7 are the head of the document, the / before head on the 7th line signals the end of the section while < head > on the 3rd line is the start. In between will not be displayed in your DOM but will instead contain metadata about your webpage. Line 4 is telling your browsed this document will be encoded in UTF-8 which nearly all websites will use this standard with few exceptions. Line 5 simply sets the width to scale to the screen size it's in, important to add especially as so much of todays web traffic are viewed on mobile devices. Line 6 is the title, this shows up on the tab you opened in your browser. Inside the head you often will find other contents such as links to style sheets or scripts, but save that for latter.
Now Line 8 is where the body starts, this is where we put what we want displayed to the DOM. the h1 tag surrounds some text we want displayed in large and bold font, this is the largest heading tag which go from one to six
h1
h2
h3
h4
h5
h6
These will mostly be used to display a heading to a larger section often that section would be wrapped in a paragraph tag like:
<h2>This is some hipster ipsum nonsense</h2>
<p>
Paleo pitchfork kitsch slow-carb, skateboard typewriter lyft vegan chillwave before they sold out. Lomo VHS swag, woke tattooed put a bird on it air plant helvetica. Blog distillery gastropub photo booth YOLO copper mug pinterest raclette 90's XOXO narwhal leggings cliche banjo. Franzen pug seitan heirloom shabby chic stumptown four loko. Kitsch bushwick shoreditch pop-up. Hashtag tattooed try-hard you probably haven't heard of them, vice gastropub pinterest meh kogi. Keytar cronut brunch, banh mi XOXO blog beard stumptown umami cred shoreditch tumblr.
</p>
Here you will notice a few things, one the h2 tag used has smaller font than the h1 from before. then the < p > opending and closing tags are on separate lines than it's content. This is OK, you want your code readable both to those looking at the product and those looking at the code, sometimes with larger chuncks of texts you want to break this down if the language you write in supports this. Also notice how it's one long horizontal scroll, is this what we want? or do we want the lines to wrap at specific break points? Maybe the screen width or a predifined width? All this is possible with just HTML but some history first...
HTML and how it began...
In the earl 1990's HTML came on the scene to as a way for web browsers to have readable text when sharing info between them... which it is still servering that purpose well today! But within a few years after it's development it started to take on extra roles, such as styling but with that we started getting bloat and less readable code. Enter CSS (cascading Styling Sheets) to take charge of styling in another file leaving HTML to be closer to pure markup again. Still yes, you can currently style elements directly in HTML, most cases you shouldn't. But here we go..
<p style="font-size: 20px; text-align: center; color: blue;">Some styled text here</p>
so if you copy the above line to your file, save it, refresh the browser you will see the "some styled text" in larger than usual font, center of the page horizontally, and colored blue. This is very basic stuff so imagine a full webpage getting cluttered with styling along the markup. With that I'll touch on CSS in an upcoming post!
As always... Happy Coding!
Share this post
David has been a life long student and teacher, always ready to help out!
