KYLE'S WORLD
KYLE'S WORLD
Why Should You Make a Website?
So, you wanna make a website...
Personal websites are fun, unique, and a great creative exploration of self expression. Since it's your own website, you can build anything you can imagine, which I think is pretty neat.
I truly think anyone can make a website, so I encourage you to give it a try if you're the least bit interested (and if you do, please share it with me)! Even if you aren't a fan of traditional coding, web development has a very different and distinctive feel to it that I think anyone can enjoy. Web development is very accessible, you can make your website as simple or complicated as you like, and there is no bound on creativity.
This guide will try to go over all the basics concepts for coding your own website completely from scratch. This was originally written for my siblings and is intended for those who have no experience coding. It would be impossible to cover everything you need to know in one guide. So, if you really want to learn web development, you should use other resources out there in addition to this guide and learn more someone more qualified than me. Most of all, you will learn far more from experimenting and messing around coding a website on your own. So, my goal is to try and give you the basic knowledge and intuition to get to that point where you can experiment on your own. But I find that first gap between knowing nothing and knowing some things is the hardest to overcome. Once you know the basics, you will be equipped to be able to read/understand the many online resources for website development.
Basic Concepts of Website Creation
Before we get to writing any code, lets talk about conceptually how websites are set up.
There are 3 main components that make up a website:
- HTML
- CSS
- JavaScript
HTML
HTML stands for HyperText Markup Language. An HTML file contains the actual content of the website. This is where you include what text you want on the website, insert images, create bullet lists, and any other content you want displayed. Most importantly, HTML is used to define the structure of your website. It defines what kinds of elements are shown (e.g., header, text paragraph, button, list), what order do the elements appear, whether some elements are inside of other elements, etc.
CSS
By itself, HTML doesn't look much better than a word document. So, we want a way to style our website to make it look how we want. This is where CSS comes in. CSS stands for Cascading Style Sheets. A CSS file lets you style each individual element in your HTML. This includes things like specifying the width, height, text size, text color, background color, or location of an element on the webpage, and much much more. If you want to see the difference styling makes, you can view this page without any CSS styling here. You can return to the styled page here. The only difference between that page and this one is styling using CSS!
JavaScript
With HTML and CSS, you can make a website look however you want. But what if you want your website to do things? Thats where Javascript comes in. JavaScript is what makes your website do things. For example, if you want you website to change the color of text when you hover over it, you can do that with JavaScript. Or make an image pop up when a user clicks a button. Or change the website to dark mode when the user clicks a button. However, JavaScript is completely optional. If your website doesn't need to do anything (AKA, your website is just text/images that the user can't interact with), then you don't need any JavaScript.
Putting it all together
So how do these components work together? Well to start, you will need an HTML file for each individual page in your website. There you will add the text and images for the webpage. Then you can create a CSS file to style the webpage. Inside the HTML file, you provide a link to that CSS file which tells it "this HTML should be styled according to this CSS file". You can do a similar thing with JavaScript. Create a new JavaScript file, add the code you need to make your website do stuff, then add a link to the JavaScript file inside your HTML. This will tell it "this HTML should do the things defined in this JavaScript file". When loading a website, your browser will use the links to automatically apply the CSS styling and the JavaScript functionality to your HTML page for you!
Intro to HTML
Okay, that's enough with concepts for now. At this point, you should understand it when I say "HTML contains the text/images of the website, CSS styles the website to make it pretty, and JavaScript makes the website do stuff". Now lets start to do some examples to see what that actually looks like in practice.
Downloading VS Code
Unfortunately, we first have to download some helpful tools before we can start coding a website. We need a program to write our code in. Technically you can do your coding in any text editor app, like notepad, but that would be very inconvenient for many many reasons. So instead, let's download and a text editor that is specifically meant to be used for coding.
The best option for this is "Visual Studio Code", also known as "VS Code". You can download the latest version from here. Run the installer and follow it's instructions.
Once installed, run VS Code. It should load you onto the home screen. On the home screen, click "Open folder". Navigate to and select the folder where you want to put your website files. I recommend creating a new folder specifically for this. (Make sure to remember where you are saving your files! We will need that later.) Select your folder and click "Open". This will open the folder in VS Code.
Once open, you should see a navigation pane on the left side. Right click the navigation pane and select "new file". Then name your file whatever you want, and end the filename with ".html". An example filename would be "homepage.html".
Making Our First Website
Now that we have our HTML file, lets start writing our website! The first thing we have to do is add some header information about the HTML file. VS Code will do this automatically for you if you type an exclamation mark and then press enter in a new file. If it does not, copy paste the following code into your file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
This is called the HTML header. It is not really important to know what is going on here. Just know that this contains information that your web browser needs to display your webpage, like what version of HTML you are using, what language it is in, what the title of the webpage is, etc. None of this will be displayed on your website itself.
Now lets start writing our website! If we want to add stuff to our website, we have to put it in the body section of the HTML file. This section is anywhere in between <body> and </body>. (We will talk about what those means later.)
So, let's add the text "Hello World!" in the body section to our file. It should look something like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> Hello World! </body> </html>
You've just written your first bit of HTML! But how can we view what we have written? Open the File Explorer, and navigate to where you have saved your HTML file. Simply double click the HTML file and it should open in your web browser. At this point, you should see a mostly blank page with the text "Hello World!" at the top.
Hello World!
HTML Tags & A More Complex Website
So far, our website is not very exciting. It's no different than a text file. So, let's introduce some more complex topics. To do this, let's talk about how HTML is structured.
HTML code is made up of "tags". A tag looks like this: <tagName>
Tag are used to define elements that will be displayed on your website. An HTML element is the building block of your website. An element is a "thing" that is on your website. For example, a paragraph, image, or navigation menu are each elements.
Elements are defined with two tags: an opening tag and a closing tag. As you can probably guess, the opening tag indicates the start of the element, and the closing tag indicates the end. Opening tags and closing tags are almost identical, except that closing tags have a slash ("/") before the tag name. Anything that is in between the opening tag and closing tag is included as part of that element.
Looking back at the HTML header that we copy/pasted in, you may notice that it is full of tags! The <body> tag is used to define the body of your website. So, all of your website content will go inside the <body> tags.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <−− This is the body's opening tag! Hello World! <−− This is content that is inside the body tag! </body> </html> <−− This is the body's closing tag!
Now, you can't just type whatever you want willy-nilly and put it in angled brackets and call it a tag. There is a list of "acceptable" tags that HTML allows, and using anything that is not in that list will cause an error. This is partially because each unique tag name is used to represent a unique structure. For example, a <p> tag specifically defines a paragraph element. See some other common tags below:
| Tag | What it defines |
|---|---|
| <p> | Defines a paragraph |
| <h1> | Defines the primary header text |
| <h2> | Defines secondary header text |
| <b> | Defines bold text |
| <i> | Defines italic text |
| <u> | Defines underlined text |
| <br> | Defines a line break |
| <a> | Defines a hyperlink |
Let's see this in action! Using what we have learned, let's put our "Hello World!" text into a paragraph, and add a second paragraph like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p> Hello World! </p> <p> this is my example paragraph! </p> </body> </html>
In order to view our changes, we should save our HTML file after we add the paragraph to it. If we refresh the page in our web browser, we should be able to see our changes! It should look something like this:
Hello World!
this is my example paragraph!
I encourage you to try experimenting will all of the tags I listed above to see what they do in action.
A very important observation of this is that the order that you put your website content matters! The first element defined in your file will be what shows up at the top of your website, followed by the second element, and so on.
Comments
Let's say you want to annotate your code so you can write down how something works, or write down a note about that part of the code. To do that, programmers use comments. Comments are parts of the code that are only there for the human programmer, and are completely ignored by the computer. In VS Code, comments are highlighted green.
To make a comment in HTML, type <!-- −−>. Anything that goes in the middle will be ignored by the computer, and not show up on your website. Lets add a comment to our code to see this in action.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- This is my comment, which is ignored by my website −−> <p> Hello World! </p> <p> this is my example paragraph! </p> </body> </html>
If we refresh our website, we can see these comments don't appear!
Hello World!
this is my example paragraph!
Comments are very useful, even though they don't do anything to your website. It is very useful to leave yourself comments explaining what something is supposed to do, or explain why you made a certain decision. Comments are mostly for your future self. You may think you'll remember, but I guarantee after multiple months of not looking at your code you will begin to forget why you did things a certain way.
Documenting your thought process in general is important, especially if you want to make a big/complex website. I always have a text file where I can write notes about my thought process while coding.
Comments can also be used for organization. I like to leave big comments as section headers to make it visually easier to find where I am in my code. This is completely optional, I just have found it helpful.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- ================================= −−> <!-- Example Section Header −−> <!-- ================================= −−> <p> Hello World! </p> <p> this is my example paragraph! </p> </body> </html>
Images, Self-Closing Tags, & Attributes
This is a good start, but you may notice that all the tags above only apply to text. But a text-only website is boring, so lets add some images! The <img> tag defines an image. Compared to the above tags, the <img> tag is slightly more complicated. They introduce two new concepts.
First, the <img> tag is self-closing. "Self-closing" means that the element does not need an opening and closing tag. Instead, it just needs a single tag, called a "self-closing tag". This is written the same way as an opening tag.
The reason only one tag is needed is because an image is not meant to contain anything extra other than itself. We only use opening and closing tags to define what goes inside an element. But if nothing is meant to go inside of it, then it doesn't make sense to use two tags. After all, it wouldn't make sense conceptually for an image to contain text inside of it or contain another image inside of it.
This is not exclusive to just <img> tags. Any tag that is not meant to contain other data is self-closing. For example, the <br> tag defines a line break between text, and is also self-closing. So keep your eye out for whether a tag requires an opening/closing tag, or is self-closing.
The second new concept introduced are attributes. Attributes are additional pieces of information you must give the tag to help it do what it needs to. Attributes are not displayed on the website like text is, they just provide extra contextual information that the tag needs to function. The <img> tag contains two attributes:
- src - this tells the tag where the source image file is that it will display
- alt - this tells the tag what the alternate text of the image is, which is displayed if the image cannot be loaded (or read out if the user is using a screen reader)
<img src="my_image.jpg" alt="description of my image">
Let's try adding an image to our website! PNG, JPG, or a GIF files are most commonly used with the <img> tag. I'll be adding a GIF for my example. I recommend to move your image file to the same folder as your HTML file. That way the path to your image from your HTML is very easy to find (if they are in the same folder, the path is just the name of the image file).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p> Hello World! </p> <p> this is my example paragraph! </p> <img src="world.gif" alt="Spinning world GIF"> </body> </html>
Hello World!
this is my example paragraph!
Nesting and Website Structure
Now we have text and images! This is great, but we still feel kind of limited in how we can create our website. So far, everything we have written has just been sequential tag that come one after the next. This is kind of boring and limits what our website design looks like.
So let me ask a question: what happens if a tag contains another tag inside of it?
This act of putting one element inside of another is called nesting This is a very useful concept, as it allows us to group elements together! If you put an <img> tag inside of a <p> tag, you can think of that image as belonging to that paragraph. Rather than having a bunch of images and some paragraphs all separate, we can say "these images belong to this paragraph, and these other images belong to this other paragraph". This lets us create more complex structures for our website.
Choosing how to nest your HTML elements is one of the most important things to consider when creating your HTML file. Which elements go inside which other elements? How should you group together elements to achieve the design that you want?
Good nesting will make your file so much easier to read and make it much easier to style elements when you get around to writing your CSS. Whereas bad nesting can make your life a living nightmare.
Let's work through a basic example. To do this, let's look at the <ul> and <li> tags. The <ul> tag creates an unordered list (AKA a bulleted list). The <li> tag defines a list item within that list (AKA it defines a new bullet point).
Let's see an example of how to use the <ul> and <li> tags.
<ul> <li> content for list item 1 </li> <li> content for list item 2 </li> <li> content for list item 3 </li> </ul>
This will create a list that looks like this:
- content for list item 1
- content for list item 2
- content for list item 3
This matches up with what we should expect! Conceptually, each bullet point "belongs" to the list. This is done in the HTML by putting each bullet point (<li>) inside of the overall list (<ul>).
Another example is the <table> tag. This tag lets your create a table of rows and columns.
To define the overall table, use <table>. To define a new row in the table, use <tr>, which stands for table row. To define a new entry/column in a row, use <td>, which stands for table data.
Let's see how this looks in practice:
<table> <tr> <td> top left </td> <td> top middle </td> <td> top right </td> </tr> <tr> <td> bottom left </td> <td> bottom middle </td> <td> bottom right </td> </tr> </table>
This will create a table that looks like this:
| top left | top middle | top right |
| bottom left | bottom middle | bottom right |
So conceptually, you can see a table consists of multiple row elements. And each row element consists of multiple data elements (AKA the column data).
Nesting isn't just used for elements like these. You can nest most elements within most other elements.
Think of all the possibilities! What if we put a paragraph within a table entry? Or put a bullet list inside another bullet list? Or put a paragraph inside a bullet list, all inside a table entry? But note that some elements cannot be nested in each other (or rather, they won't do anything different if they are).
<table> <tr> <td> <ul> <li> a bullet point inside a list inside a table entry </li> </ul> </td> </tr> </table>
|
Nesting elements can let you make some pretty complex structures on your website. But nesting also makes your website code more complicated. This can be a bad thing, and can make it harder to read, understand, and make edits to your code. So it is a fine line to walk when nesting lots of elements. As a general rule of thumb, simplicity is key and you want to try to use as little nesting as possible to achieve the structure/design you want.
The Div
This leads me to the finally discuss the single most import HTML tag by far. That is the <div> tag. The <div> tag defines a division (AKA a section) of a document.
All the other tags we have talked about so far define some sort of structure (e.g., <p> defines a paragraph, <ul> defines a list, <img> defines an image). These all come with some built-in styling, and expectation with how they will be used.
But not the <div>! The <div> just defines a section of the HTML. That's it. You're just saying "the elements in this div all belong to the same section of my website". What exact counts as a "section" and what that section does is completely up to you.
Unlike most other tags, there is almost no styling or structure associated with that a <div> by default. For example, the <p> tag by default adds space above and below your paragraph, and does not allow you to nest certain tags inside of it. But not the <div>. There is no assumption with how that section will be styled or used. Also, there are no restrictions for what elements can be nested inside of it. This means that they are extremely flexible, and can be easily styled to fit whatever need you have.
The ability to create different sections of your website is an extremely powerful tool for defining what you want your website structure to look like. If you want to do anything outside of what is defined by the default HTML tags, you should use a div. Want to have your website be in two columns? Create a <div> for each column. Want one of the columns to be split into 3 sections? Nest 3 <div> elements within your column. Want to create a menu bar at the top of your screen above the two columns? You guessed it, add a <div> before your columns that contains the menu bar options. In fact, this is so powerful you could build your entire website out of <div> tags if you wanted (this is bad practice though, so don't do it).
Want to see how I used <div> tags in my website? Click here to put a red border around all the <div>s on this page. Click here to remove the border. You can see how <div>s are used to group elements together!
Let's try grouping our website elements with <div>s! Let's suppose we want to have two main sections on our website. The first will contain the "Hello World" text, and the other will contain the example paragraph and image.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <!-- our first grouping −−> <p> Hello World! </p> </div> <div> <!-- our second grouping −−> <p> this is my example paragraph! </p> <img src="world.gif" alt="Spinning world GIF"> </div> </body> </html>
Hello World!
this is my example paragraph!
Now at this point you may have a few questions. Like:
- How come adding the <div>s didn't change the way our website looks?
- How does adding these <div> groups help us at all in making our website?
- You claimed the <div> tag can do so many different things, but how does it do that? Isn't a tag supposed to represent just one structure?
By default, the <div> tag does have any styling. This is why it does not change the way things look on our website, because we have not styled it at all. Once we begin to style them, you will see that using <div>s can help us style an entire group of elements, allow us to make complex structures on our website.
As a result of all that, we need to start talking about the way we style a website, which conveniently provides the perfect segue into my introduction to CSS...
Intro to CSS
At this point we have covered the basics of HTML. But our website doesn't look very fun. It's just a collection of items. So now, let's style those elements with CSS.
First, let's talk conceptually how CSS works. In CSS, you first define which HTML element you want to style ("I want to style my paragraph elements"). Then you choose the property you want to style ("I want to style the font size"). Finally, you assign the property a new value ("I want the new font size to be 12pt") And that's it. You do that over and over for each element you want to style, and then you are done.
To show you the specifics, I think it is best to work through and example. Let's suppose we want to style the paragraph elements in our website.
Before we can style anything, we have to create a file to hold our CSS code. Right click the left-side menu in VS Code and select "New File". Name your file whatever you want, and end it with ".css". For example, "style.css".
The first step is to define the element you want to style. This is called our "element selector". One way to do this is to type the tag name of the element. So, to style the <p> tag, we would type "p":
Then, we type an open and close curly braces, "{" and "}". All of the style changes defined inside of those braces will apply to the tag we chose.
p { // all your styling for the p tag goes here }
Now we are ready to start styling. Every part of an element you can style has a property name associated with it. These property names are pre-defined by the CSS standards but are mostly self-explanatory. For example, to style the background color you would use the background-color property. To style the font size you would use the font-size property. There are too many to list here, so you shouldn't try to memorize them all. You'll eventually start to memorize the most used properties, and can Google everything else you forget.
The value that the property can be assigned depends on what you are styling. For example, background-color can be assigned a color name, like "red" or "blue". Whereas font-size can be assigned at number value with units "pt", like "12pt" or "16pt". (Yes, CSS requires you to specific units for most styles, since there are multiple possible units).
When writing your styling in CSS, you should put a colon in between the property and the value you are assigning it. You also need to put a semicolon at the end of each line. For example, suppose we want to style our paragraphs to have red background and font sizes of 16pt. To do this, we would type the following:
p { background-color: red; font-size: 16pt; }
We can repeat this process for each element in our HTML file we want to style!
Let's see what this looks like on out website:
Hello World!
this is my example paragraph!
IDs - Styling Specific Elements
Notice that doing this styles all the <p> tags in the entire website. Sometimes that is what we want to do. But other times, we want to only style a specific element. So how do we do that?
The answer is to give our HTML elements identifiers! You can give a unique identifying "name" to an HTML element, and then use that identifier in your CSS to style it, and only it!
We can give an element an identifier (referred to as an "ID" from here on out) using an HTML attribute called id. So, go back to your HTML file and find the element you want to style. Then in the opening tag, type id="yourIdName" (replacing "yourIdName" with whatever you want the ID to be).
<p id="yourIdName"> this is my example paragraph! </p>
Now go back to your CSS file. Before, we would target an element to style by using the tag name. But if we want to target a specific element, we type "#" followed by the element ID. For example, to change our previous example to only target the element we just added an ID to, we would use:
#yourIdName { background-color: red; font-size: 16pt; }
Tada! Now when we view our website only that paragraph has that style applied to it.
Hello World!
this is my example paragraph!
One important thing to note is that an element's ID value must be unique! No two elements can have the same ID value, or else your website will give an error.
Classes - Styling Groups of Elements
So now we can style all elements of a certain type, or we can style a specific element by itself. But, what if want to apply the same styling to a specific group of elements? We can't target the tag in CSS, since that will apply it to all the elements of that tag. And we can't use ID values, since any given ID can only belong to a single element.
The solution is to use another HTML attribute - a class. This is like an ID value, but multiple elements can have the same class value! And unlike IDs, an element can have multiple class values!
This saves us from having the copy/paste the same styling over and over again for each element we want to style. Now, we can simply style a single class, and assign that class to each element we want the style applied to.
Additionally, the tag of the element does not matter when assigning a class! That means a class can be used to style multiple different types of HTML elements. For example, you can style titles, paragraphs, and bullet points all at the same time by applying the same class to the <h1>, <p>, and <li> tags that you want styled.
We can assign a class to an element by using the class attribute in HTML. So, go back to your HTML file and find the element you want to give a class to. Then in the opening tag, type class="yourClassName" (replacing "yourClassName" with whatever you want the class name to be). I'll also add a second paragraph element with the class to demonstrate it applying to multiple elements.
<p class="yourClassName"> this is my example paragraph! </p> <p class="yourClassName"> this is a second example paragraph with the same class! </p>
Now go back to your CSS file. If we want to style all elements belonging to a certain class, we type "." followed by the class name. For example, to change our previous example to only target our new class, we would use:
.yourClassName { background-color: red; font-size: 16pt; }
Hello World!
this is my example paragraph!
this is a second example paragraph with the same class!
Something important to note is that an HTML element can multiple classes! To do that, just put a space in between class names in the HTML class attribute:
<p class="firstClass secondClass"> this is my example paragraph! </p>
Additionally, an element can have an ID and a class! This means there are 3 possible things applying styling an element: the HTML tag's styling, the class's styling, and the ID's styling! So the below element would have the <p> tag styling, the myClassName, and the yourIdName styles applied to it:
<p class="myClassName" id="yourIdName"> this is my example paragraph! </p>
In the case there are multiple styles applied to an element, there may be conflicting styles. For example, if the class tries to style the font size to be size 20, but the ID tries to style the font size to size 12, which one will actually apply? To avoid this, HTML/CSS applies styling in a specific order where the styling that is applied last will take precedence over the others. If you have an element with a class and an ID, the final order of styling will be as follows:
- First, the styling of the tag is applied.
- Then, the styling of the class is applied.
- Finally, the styling of the ID is applied.
This means that the ID styling has the most priority, and the tag styling has the least priority. So if the ID and class both try to style the same property, the ID's styling will take priority and be what is actually applied to the element.
The CSS Box Model
Now we know how to select which elements to style and how to style their properties. So let's get a little deeper into exactly what properties can be styled. There are many properties that can be styled. Many of these are self-explanatory (like font size), so I won't go over them here. So I'll mostly be discussing the complicated properties that are less intuitive.
First, lets talk about properties associated to the CSS box model.
What is the CSS box model? The CSS box model is a model used for describing how CSS draws an HTML element on a webpage. Each HTML element is represented as a rectangular box. This box has a width and a height (which you can change with CSS).
The box for each element consists of multiple layers (each of which you can style). From outer to inner layer, these are:
- margin - spacing outside the border
- border - a border box around the element
- padding - spacing inside the border
- content - the element content (e.g., text/image)
Here is a diagram of the model:
Margin space
Border
Padding space
Element content
Almost all HTML elements are drawn with this box model on the webpage. So, each element has a margin, a border, a padding, and the element content, all of which can be styled.
In CSS, you are able to style the size of each layer in the box model individually. So, you can choose how big/small to make the margin, border, padding, and element content. If you set the size of a layer to 0, the layer will not be shown. Additionally, you can further specify the size of a layer in a specific direction (top, bottom, left, and right).
The content and border layers are rather self-explanatory. The "element content" is whatever the element is - this could be the paragraph text, an image, a bullet list, etc. All of the styling we have seen so far has been to the element content.
The border is just a border around the HTML element. You can specify the size, color, and style of the border (solid line, dashed line, dotted line, etc.).
However, the difference between the margin and padding may be less clear. Margin is used to add space outside the element border, which creates distance between that element and adjacent elements. Meanwhile, padding is used to add space inside an element between its border and content. Importantly, the background styling of the element is also applied to the padding, but is not to the margin.
Let me show this with an example. I will create two paragraphs, one with an orange background and a red with a blue background.
First, let's see what happens when we only add a margin. We can see it creates a gap between the elements.
p { margin: 15px; padding: 0px; }
example paragraph 1
example paragraph 2
Now let's see what happens when we only add padding. We can see it adds space around the inside of the element:
p { margin: 0px; padding: 15px; }
example paragraph 1
example paragraph 2
Now let's see what happens when we only add both padding and margin.
p { margin: 15px; padding: 15px; }
example paragraph 1
example paragraph 2
There are a few different ways you can specify size of the margin/border/padding. If you just provide one number, like in the example above, it applies that same value to every direction (top, bottom, left, right). If we provide 2 numbers, the first number is used for the top/bottom, and the second number for the left/right. Or, we can specify a value for just a single directions. See an example below.
p { margin: 25px 5px; // 25px space above/below, 5px left/right padding-left: 10px; // 25px of space left padding-top: 15px; // 15px of space above }
example paragraph 1
example paragraph 2
The Display Property
The second property I want to talk about is the display property.
By default, HTML elements will take up the entire width of the screen, and will grow in height to fit the amount of content they hold. So, you can think of this as each new HTML element taking up a new row on your website.
Obviously, there are many times we do not want this. We may want multiple elements side-by-side. Or, we may want an element to always be in a certain spot, even if it covers another element.
To style our elements like that, we use the display property. The display property defines how an element behaves/interacts with the elements around it, and how the elements within it behave.
So what do I mean by that? It's best to look at what some examples:
There are 5 display options you will likely use fairly often:
- block
- inline
- flex
- grid
- none
An element being displayed as a block will take up the full amount of width available, and put itself on a new line. For example, all of the paragraphs in this guide are displayed as block, since <p> tags use this display by default. Below is an example of two block paragraphs:
p { display: block; }
example paragraph 1
example paragraph 2
An element being display as inline will only take up the width it needs for its content, and will not put itself on a new line. Below is an example of two inline paragraphs:
p { display: inline; }
example paragraph 1
example paragraph 2
An element being displayed as flex will display itself like a block (takes up full width, puts itself on a new line). But, all the children inside of the element will be displayed a "flexbox". This means the children will grow/shrink and align themselves in either rows or columns (you can choose which). This also opens additional CSS properties that let you determine what direction to the children should align (rows or columns), how they should be spaced out (put the space on the edges, or between the elements, or both), and more. This is useful for displaying multiple items in a single row/column. Because the flex display affects the children of the element, in the example below I must put the <p> inside a <div>, and then apply the display flex to the <div>. (Notice the children elements do not need display styling, since they are automatically displayed as flexboxes.)
div { display: flex; // display children as flexboxes flex-direction: row; // lines children up in a row justify-content: center; // centers items in the row }
example paragraph 1
example paragraph 2
An element being displayed as none will not be shown on the website. This is useful if you want to have a way to trigger when an element is shown. (For example, if you want to create a pop-up window that only appears/disappears when a button is pressed.)
p { display: none; }
Some Useful CSS Properties
We've covered a few of the more unintuitive CSS properties so far, but there are many, many more properties I have not covered. I can't possible go over the many CSS properties that you can style, and you should not try to memorize them all. What you need to know about CSS will heavily depend on what your website design and functionality is. So, you will mostly have to learn as you go for CSS.
But before wrapping up this intro to CSS, I will quickly share with you some of the more useful properties that you will likely need. Most of these are more basic/self-explanatory than the properties we discussed above, so this section will be much shorter. These are here mostly so you can be aware they exist. If you want to know more about any of these properties (or properties I did not cover), I recommend the resource w3schools.com.
Styling size/shape
| Property | What it does | Example CSS |
|---|---|---|
| margin |
|
|
| border |
|
|
| padding |
|
|
| width |
|
|
| height |
|
|
Styling background
| Property | What it does | Example CSS |
|---|---|---|
| background-color |
|
|
| background-image |
|
|
Styling alignment of flexbox items
| Property | What it does | Example CSS |
|---|---|---|
| display |
|
|
| justify-content |
|
|
| align-items |
|
|
Styling text
| Property | What it does | Example CSS |
|---|---|---|
| text-align |
|
|
| font-size |
|
|
| font-weight |
|
|
| font-style |
|
|
| text-decoration |
|
|
| color |
|
|
Styling positioning
| Property | What it does | Example CSS |
|---|---|---|
| position |
|
|
| top |
|
|
| bottom |
|
|
| left |
|
|
| right |
|
|
| z-index |
|
|
Advanced Topic - Responsive Design
This is a more advanced topic, but is something I think is worth mentioning. If it is too overwhelming, you can ignore it for now until you become more comfortable with the basics of HTML/CSS.
Recall earlier when I said HTML elements by default will take up the entire width of the screen and will grow in height to fit the amount of content they hold. This type of behavior is very useful, because that means our element will change size to fit whatever screen we are using! After all, desktop screens, laptop screens, and phone screens are all very sizes/shapes.
When designing a website, we'd like to make sure it looks good on every possible screen size. But it would be annoying if we had to re-design and re-style our website for each possible screen size. Instead of doing this, we can design our website to be responsive. "Responsive" means allowing the website to automatically grow/shrink to fit it's screen size.
When you are designing a website, you want to keep this in mind if you are going to change how your elements are placed. Make sure to ask yourself "how will my website look on a screen that is larger/smaller than this one?" The more complex you make your styling, the harder this question is to answer.
This idea of our website growing/shrinking with the screen size is something we want to incorporate into our website design. This is why it is a generally bad idea to explicitly define where each element should start/end, and how wide/tall it should be - because now that element cannot change size/position when the screen size changes. If you say "this element starts 400px from the left side of the screen and is always 800px wide", then what happens if the screen is smaller than 800px?
Now, you don't need your website to look good on a phone if you don't want. If your website is only meant to be used on a desktop, then you can just ignore everything that is not a desktop. But if you want people to be able to use your website on a phone, you will also have to consider how to make your website look good on a desktop, phone, and all screen sizes in between.
(For a satirical (but still insightful) example demonstrating that responsiveness is actually really easy if you don't over-engineer your website, see: motherfuckingwebsite.com)
Helpful Approach for Responsiveness
I have found the following approach to be helpful:
First, start off by designing your website for either a desktop or phone. Choose whichever one your website is primarily "meant" to be used on. Most likely, this will be a desktop.
Then as you are designing your website keep in mind:
- how you want your elements to be positioned / laid out
- how those that layout should change as the screen gets smaller/larger (e.g., which elements should shrink/grow, which elements should change position)
Sometimes this can be very simple. Example: "I want to have two columns on my website. I want each column to always take up half of the screen, no matter the screen size. So, each column should shrink/grow at the same rate so that it takes up 50% of the screen width."
However, sometimes you can only shrink/grow an element so much before your website starts to become unusable or unreadable. If you just shrink a desktop website until it fits a phone screen, the elements may get so small that you cannot read/interact with them.
Your goal should be to find the exact point at which this happens. AKA, what is the smallest screen size your design will look "good" on? This is called a "break point". When you find a break point, you will have to make a decision for what you want to happen there.
The Two-Mode Approach
Let's go back to the two column example. We might notice that our two columns look good for most screen sizes. But at around 800px wide screens, the columns become too small to read. So, we can make a decision that "at 800px, we will switch from using two columns to using one column by stacking our original two columns on top of each other." Now, you just have to write a rule in CSS for how to do this.
In general, it is best to have as few break points as possible. Realistically you should aim to just have one - where you website switches from "desktop mode" into "mobile phone mode."
Your website will stay in desktop mode and shrink as much as possible until it reaches the break point. At that point, it will switch styling into mobile mode. From there, the mobile mode elements will grow/shrink instead.
An important point is that you need to use the same HTML for both modes. The only difference between modes should be in your CSS styling. If you structure your HTML poorly, then this may be very challenging to do. (Note that you can hide entire HTML elements using CSS if you only want certain things to appear in one mode, but not the other.)
Let's again look at our example. We may want to say: "when above 800px, style my website into two columns. When below 800px, style my website into one column." So, your HTML for the two columns will stay the exact same. The only difference is you will change the positioning of the columns from being side-by-side, to being one-on-top-of-the-other.
Again, this is something you should be thinking about from the very beginning of your website design. You should consider it when writing your HTML to make sure your elements can respond to screen size changes. And you should consider it when writing your CSS to make it so you have to make as few styling changes as possible to switch between the different layous.
CSS Media Queries
Okay, so you may wondering "how can I change my styling to be different for different screen sizes?" The answer is to use CSS media queries. These essentially say "only apply this styling if the screen is smaller than this amount".
Often times you will only need to change a few properties to adjust it for mobile. For example to switch between a two-column and one-column design, we do not need to re-style our columns. We just need to change the style properties associated with where those columns are positioned. Everything else can stay the same.
Here is an example of what a media query looks like:
@media(max-width: 800px) { p { background-color: red; font-size: 16pt; } }
This will only apply the styling to <p> when the screen width is 800px or smaller.
You can use as many media queries as you want. The styling rules for them are the exact same as before.
Media queries are useful tools, but you should not solely rely on them to achieve responsiveness. A website that is well designed and responsive will not need to rely on media queries as much since it's elements should grow/shrink more naturally. This section purposely does not go in-depth into responsive design, but hopefully it gives enough of a starting point for you to go out and learn more on your own.
Intro to JavaScript
Coming soon...Putting Your Website On The Internet
So far we have talked about how to code a website. Knowing HTML, CSS, and JavaScript gives you all the tools you need to make an entire website from scratch. But you may be wondering, "our website is just a collection of HTML/CSS/JavaScript files on our computer, so how are other people expected to access it?"
This leads to the final part of making a website: putting it on the internet. To make your website accessible to others on the internet you need two things:
- Hosting
- A domain name
What is Hosting?
First is hosting. Right now our website is stored as files on our computer. Random people on the internet do not have access to your files, only you do (if they did have access, that would obviously a VERY bad thing). So in order for people on the internet to have access, we need to store our files somewhere on the internet that other people can access. This is the goal of hosting.
There are a bunch of companies out there have big servers with a bunch of space that are accessible from the internet. We want to go to those companies and ask them if we can upload our website code onto their servers. Since they make their server accessible from the internet, our uploaded website code will also be accessible from the internet! So, this isn't much more complicated than making an account with a company and just uploading your code. Each time you edit your website, you simply upload the new version of your code.
What are Domain Names?
Great, so now our code is accessible to the internet! But how do we actually get to it from the internet?
Well, turns out hosting your website makes your website *technically* accessible, but it is very inconvenient to get to it. To get there, you have to type in the exact IP address of where your code is stored on the hosting server. (An IP address is a big number that tells you where something is located on the internet - it is equivalent to how a street address tells you where a building is located in your city.) This is yucky and gross. IP addresses are hard to type, hard to remember, not memorable, and don't tell you anything about the website itself. For example, the IP address of Google is something like 142.251.116.138. (heavily oversimplifying). Imagine if you had to type that number in each time you wanted to get to Google.
Instead of typing in IP addresses to get places on the internet, we'd like to use some easy to remember website name that will automatically take us to the correct IP address. For example, "google.com". We'd like it so that when we type in "google.com", we should be automatically taken to 142.251.116.138 (where Google's website code is). This is a super convenient solution and is much much easier than remembering a bunch of IP addresses.
This website name is called also called a domain name.
Now, you may be wondering how this automatic redirection is done. After all, how does your computer know to go to 142.251.116.138 when you type in "google.com"? This is where the domain name system (DNS) service comes in.
DNS is an online service that is essentially a giant phonebook. It lets you look up a website name, and will tell your what IP address is associated with that website name. This is a great design for many reasons. Most applicably, this is great since now all you have to do put your website in this single DNS server, and then anyone who uses that DNS will be able to find your website. Anyone with internet access can just ask the DNS "I want to go to this website name, can you give me the IP address where than name leads to", and then be taken to your website. This is done automatically by your computer!
Getting a Domain Name
So we know what domain names are, and how DNS works, but how do we get our own custom domain name to use? And once we have it, how can we add it to DNS so it can tell people where to go?
First off, we can't just create whatever name we want and add it to DNS ourselves. Regular people shouldn't be able to add whatever they want to the DNS, that would be bad. (Imagine if a random person said "ok DNS, I now own "google.com" so redirect all people who type it to my personal website", that would be not good.) So, the DNS can only be modified by trusted companies. We give these companies permission to add/edit the DNS for us when we do business with them.
So if you want to add your website to the DNS phonebook, you just ask a trusted company to add it for you. You tell them, "hey I want this domain name to use for my website". The company will go check that no one is using that domain name (if they are, they won't let you have it). If no one is using it, they will then give it to you and add it to the DNS phonebook for you (for a small fee). Then you can link the website domain you own to the IP address where your website is hosted.Tada! Once this is done, you have an official website! Now anyone who types in your domain name will be taken to your website!
(This is just to give you the conceptual understanding of what is happening. I am HEAVILY simplifying this all and glossing over soooo many details. But you don't need to know those details to create your own website)
Purchasing Hosting & Domain Name
Now that we know how hosting and domain names work, how do we actually buy them? I want you give you some info on what some of the options are, and what the process is like, for hosting a website and buying a domain name. There are MANY options I will not go over, so make sure to do your own research before buying anything depending on your specific needs.
Hosting Options
First is hosting. There are free options and paid options for hosting. The free options usually come with some small restrictions for your website. These restrictions typically include limiting what your website is allowed to do. Specifically, they will likely limit your website to being "static", which means that everyone who visits the website will see the exact same thing. For example, this means a static website cannot have user profiles people can log into, or have forum posts that allow people to post new content to the website, etc. The website must be completely unchanging to be static.
These restrictions mostly effect business/product-focused websites, I find that for almost all personal websites these restrictions are not an issue. So, free hosting is often the best option.
There are also paid hosting services. If you want a website where people can create/log into accounts, or users can purchase things from you, then you will likely need a paid hosting service that does not place any restrictions on you.
Hosting typically costs a few dollar a month. I personally think the free options are the best for personal websites, but can understand using a paid service if you would rather not spend the time figuring how to use the free services.
Here are two free hosting services that I have dabbled with:
| name | cost | pros | cons |
|---|---|---|---|
| Neocities | Free |
|
|
| GitHub Pages | Free |
|
|
Domain Name Options
Domain names can be bought from a variety of different companies online. You just go to one of these websites, look up the domain name you want, and see if it is available. If so, you just create an account and buy it.
Actually, it is more akin to renting the domain name. You select how many years you want to own the domain, and then pay a flat amount for each year you want to own it. And the end of this time period, you will be given the option to renew your domain name. So, it doesn't really matter how long you buy it for, since you'll have the option to renew. The only benefit of buying it for a long time is the peace of mind, and maybe saving a few dollars since the price may go up in the future.
The price of a domain name depends on how in demand the company thinks it is. This typically is related to the top level domain (AKA what comes after the dot, so .com, .net, .shop, etc.) For example, domain names geared towards businesses or tech will likely be more expensive (such as .ai, which is very expensive right now). Personal websites using .com or .net should be relatively cheap, around $10 per year.
Compared to hosting, there is less to think about for buying a domain name. Domain names are also cheaper compared to hosting ($10 a year for a domain name, vs $10 a month for hosting). Most domain name purchasing companies offer the exact same service, so just pick one with good reviews and the cheapest price.
If someone owns the domain name that you want, you are out of luck. There isn't much you can do unfortunately.
Here are some hosting services I have heard good things about:
- namecheap
- porkbun
- squarespace
Linking Hosting and Domain Name
There are many companies that will provide you hosting and a domain name for you at the same time! Free hosting websites typically give you a free domain name, but put restrictions on what your domain name is allowed to be. For example, they may require you to have ".squarespace" or ".github.io" or ".neocities" at the end of your website name, rather than ".com". The combined hosting and domain name option is convenient since everything can be done at once, but it may cost a bit more.
Some free hosting services may let you use your own domain name if you own one. This gets you the best of both worlds. You can host your website for free and only have to pay the $10 a year for a domain name!
If you are using separate hosting and web domain services, you will have to link them together. The company you purchased your web domain from should have instructions for how to link it to your hosting service. If not, just Google it. There are far too many combinations for me to go through here.
My suggestion is to use GitHub Pages for hosting (free), and then buy a custom domain name to link to GitHub Pages (also free). I personally bought my domain name from NameCheap. They are the only domain name seller I have experience with, but my experience was good so I would recommend them. But I have also heard very good things about SquareSpace and PorkBun. If you choose to use GitHub Pages and a name from NameCheap, this is a great guide for linking them together, or this guide from NameCheap themselves.
Lastly, you do not need to purchase hosting or a domain name as you are still developing your website. You can build and test your entire website on your personal computer without needing hosting or a domain name. So, it is best to save any buying until your website is ready to be uploaded to the internet, or you are willing to commit to a domain name.
Conclusion
Anyways, that is it! You should now have a rough grasp on how to code a website from scratch and then upload it to the internet! Thank you for reading this. I hope it was useful and you were able to learn some stuff. If you have any questions/feedback, you are welcome to email me at kyles-world@hotmail.com.
I wish you the best on your website-making journey!
- Kyle