Learn How to Design a Website from scratch! Using nothing but the will to learn and the interest in programming, you will learn how to make your own websites!
NOTE: When deciding that you are going to dabble into the website development and design scene, you first want to ensure that you will be able to give it your fullest attention for the best results. If you are super excited to get started in the art of website design then you have come to the right place because I am just as excited to be the one teaching you how to go from a beginner, to being able to make websites on your own!
When deciding which IDE (Integrated Development Environment) you want to use to program your websites keep in mind that our team has used many programs over the years to develop our websites and we have displayed the best ones for you to use whether you are a beginner or professional.
In order to write down your first line of code in an organized fashion, we want to download a program that can manage all of your files neatly to make the programming process efficient. Although using your computers default file system as well as default text editor is sufficient for creating HTML based websites, the best practice is to use an IDE for efficiency!
Option 1 (Free): Visual Studio Code
Option 2 (Paid): PhpStorm
On the very left side of your screen you will see 4 boxes. 3 stuck together, and one separated. This is called the extensions tab. Once clicked, you should see a search bar to which you are going to search and install "Live Server" (by Ritwick Dey). This will allow you to see live updates to your code in your browser every time you save your project.
On the top left of your window click "File", then "Preferences", then lastly "Settings". Once you have opened the settings page, you are going to want to search for "Compact Folders". If you see that "Compact Folders" is currently checked you want to make sure to uncheck this option as it will make file organization much easier!
In the "Explorer" window of VS Code you will now want to right click. Select "New Folder", and specify what you want this website project to be named.
Once you have created your main folder to which all of our website files will be stored, we will now create the default file for every website called "index". But this time rather than simply giving it a name, we are also going to give it a ".html" extension at the end. When creating this file ensure that when you select "New File" you specify the name as "index.html" or else the website will not work when you first load it up.
Right click on the folder you just created and select "New Folder" again. Give the new folder you have just created the name "assets". You should now be able to see your sub-folder within your main folder that you created in the step above.
Within the sub-folder you have just created you are going to want to make another sub-folder within the "assets" folder named "css". This is where we will be putting all of our CSS (Cascading Style Sheet) files in for the project.
Just like we created the "index.html" file above in the main directory, we are now going to make a "New File" in the "assets/css" folder named "style.css". This means within the assets folder into the css folder.
Once you have completed all the steps above, open your "index.html" file, right click within the empty file and you should see an option that says "Open with Live Server". Once you have done the following steps you should be ready to move onto step two!
NOTE: In this step we are going to practise utilizing different HTML elements in certain situations. We are going to build a good HTML foundation with this step putting you on the path of knowing how to make a website!
HTML stands for "Hyperlink Text Markup Language". It is what every single website is made out of in its core! One of the most basic languages making it the easiest to learn in my personal opinion!
Before we can start creating any HTML elements, we need to setup the "index.html" document! To do this simply copy and paste the content below into your "index.html" 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>
In the metadata section of the code you will see something called "title" followed by "Document". Change "Document" to whatever you want your website's title to be! This will appear in the tab of your page as well as on all search engines!
An element in HTML can be recognized by the "<" and ">" brackets with an element name inside. When an element is closed you will see the following order: "<"title">"Title Here"<"/title">". The slash at the beginning of the element symbolizes that the element is closed.
When you start to actually code a few HTML elements into your website, you need to make sure that all of your new HTML is being placed with the "body" tags!
Creating headings on a website is one of the most used elements in HTML! Being able to tell search engines which text is more important than others is essential for good SEO (Search Engine Optimization) practises. An example of all heading elements can be found below!
<h1>This element should only be used once per page! Most important keyword of the page.</h1> <h2>Smaller than the h1 element</h2> <h3>Each number that is bigger means the text will be smaller</h3> <h4>You get the point by now</h4> <h5>Very small text</h5> <h6>The smallest possible header tag</h6>
Paragraphs are obviously a very common occurrence when writing anything, which is why we want to wrap our long strand of text within paragraph tags! An example of a paragraph element can be found below!
<p>This is a little paragraph because we are almost professional HTML programmers now! If you think im joking wait until you finish this section of your website design education!</p>
Having the ability to add an image to your website is probably the second most utilized element when designing a website! An example of how to create an image element can be found below!
<img src="https://pixelpanel.pixelhost.org/assets/img/pixelhost/banner.svg" alt="title-of-the-image">
List elements are also highly utilized when learning how to design a website! They allow you to stack information horizontally or vertically! In english terms, used as bullet points. Commonly used in navbars as well as footers of a website.
<ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul>
<ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ol>
Divs are by far the most important element that will be utilized throughout your venture of learning how to design a website! Divs enable you to separate sections, allowing you to have a bunch of flexibility when using CSS (Cascading Style Sheet) classes to style your elements!
<div class="classname">
<img src="https://pixelpanel.pixelhost.org/assets/img/pixelhost/banner.svg" alt="title-of-the-image">
<h1>Title Here</h1>
<ul>
<li>Reason One</li>
<li>Reason Two</li>
</ul>
<p>You are basically a professional website designer now!</p>
</div>
Now that you have learned the basics of HTML it's time to make test what you have learned. To utilize some of the elements we learned above your "index.html" file should now look like this below!
<!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 class="classname">
<img src="https://pixelpanel.pixelhost.org/assets/img/pixelhost/banner.svg" alt="title-of-the-image">
<h1>Title Here</h1>
<ul>
<li>Reason One</li>
<li>Reason Two</li>
</ul>
<p>You are basically a professional website designer now!</p>
</div>
</body>
</html>
NOTE: In this step we are going to go over the basics of utilizing a Cascading Style Sheet (CSS) File.
Once you have created your project setup and have your style.css file ready to go. The next step is to import the Stylesheet in your index.html file between the "Head" tags.
<link rel="stylesheet" href="/assets/css/style.css">
