Getting Started with Web Development - Build Your First Site
The Beginning - Where to Start
One of the most common questions I receive from students is "What do YOU do when you first want to build a new website? Where do YOU start?".
Well, that, my friend, is exactly what I will teach you in this tutorial.
We will be covering the following:
- Settings up our development environment
- Creating our file structure
- Writing some starter code
Please remember this tutorial is geared to someone new to coding and development.
Setting Up Our Environment
The first thing you're going to want to do is find a piece of software to write your code into. You don't want to use notepad or word for coding so you'll want to download something else.
There are many free and paid programs for this, you can do some research and find one you like. I personally use the free version of Sublime Text 3.
Once you get that installed it should like this:
If that is working move onto the next section!
Set Up File Structure
Alright, now before we start writing code let's setup one last thing. We are going to create a few folders and files.
First create a new folder on your desktop, let's name it "First Site". Now inside that folder create two more folders, one named "styles" and one named "images".
Now let's create some files. Switch back into Sublime Text.
Start by saving this currently open untitled document by going up to File then Save (or the shortcut: ⌘+S) save this in your new "First Site" folder and name this file "index.html".
In Sublime Text go up to File then New File (or ⌘+N) then save this file in the "styles" folder and name it "main.css".
Here is what we have so far:
Notice how main.css file is inside the "styles" folder.
Great, now we have our basic file system created. Move on and enter some placeholder code!
Let's Write Some Code
This is the bare-bones of a website.
Copy paste this code into your "index.html" file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My New Site's Title</title>
<meta name="description" content="Our First Site">
<meta name="author" content="Rob">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1 id="welcome">Hello!</h1>
</body>
</html>
Save this file.
Now go to your "First Site" folder and double click the "index.html" file to open it with your web browser and view it before adding the CSS it should look like this:
It looks very plain right now, that's why we need to add code to our main.css file!
- CSS does all the styling of a webpage.
Copy/Paste the following CSS code into your "main.css" file and save it.
#welcome {
width: 100%;
font-size: 5em;
color: green;
text-align: center;
}
Then go back to your web browser and refresh your "index.html" page in your browser.
The text should change color and position look like this:
Congratulations! You just created your first site!
In the next part of this tutorial we will walk through the HTML/CSS code above, add an image, and some more styling (coming soon).
Thanks for reading!
hi there
Hello!