I was unable to find a comprehensive article covering the process from beginning to end.
That’s why, after my first 15 weeks at Lambda School, I decided to write a quick, simple guide to going from nothing to a hosted website.
I’m assuming you have a basic knowledge of HTML and CSS, and that’s it.
Step 1: Download a code editor.
A code editor is the same as a text editor, but for code.
Think Microsoft Word but way cooler.
Some popular ones are Visual Studio Code, Atom, and Sublime Text.
There are a lot of options, but I personally recommend Visual Studio Code, or “VSCode.
” It’s free and very easy to use.
If you want to look like a really cool hacker from Mr.
Robot, make sure you use a dark theme for everything.
Create a folder on your computer where you will save your coding projects, and then create a folder for your first project and name it appropriately.
For this tutorial, I’ll call mine “Sample Project.
”Open up VSCode, and click on the “Open folder” link in the upper left corner.
Select your project folder and open it in the code editor.
Create a README.
md fileStep 2: Create a READMEHover your mouse over the name of your folder on the left side of the screen, and select the icon that looks like a page of paper with the corner folded.
This will create a new file.
Name this file “README.
md.
”The README file allows other to figure out what the project is and how they’re supposed to interact with it.
This file uses Markdown to do things like make headings, checklists, bullet points, etc.
If you’re feeling adventurous, here’s a great cheat sheet for writing Markdown.
If not, don’t worry about it.
Just write a brief summary of your project and make sure to save your file.
Step 3: Learn about Git and Version ControlIf you don’t want to learn about Git and the Command Line, skip straight to Step 6.
You’ll still be able to complete this tutorial.
However, if you’re serious about coding, I recommend that you learn about this.
Version control is an essential part of coding.
If you are human being who happens to make mistakes, or wants to work with a team at any point, then you need to know about version control.
Version control is exactly what is sounds like.
It’s a way to carefully control versions of your code.
If you write a meaningful code block (for example, you write the README or you write the HTML for your header), you can save a snapshot of the code at that point in time.
If later you mangle your code so badly that you need to reset to the last working version, the option is there.
You’ve probably heard of GitHub.
It’s a website that uses Git, a tool for version control.
Head over there now and make an account if you don’t already have one.
Make sure you don’t add two-factor authentication to your log-in.
On the home page of your GitHub dashboard, click the green button that says “New” to create a new repository, or “repo.
” Your repo is where you will store versions of your code for this particular project.
You’ll need a new repo for each project that you begin.
Don’t change any settings when creating your repo.
This can be done at a later time.
For this repo, give yourself a title that’s intuitive and don’t change any other settings or information.
Click “Create repository.
”Keep this window open, and head back to your VSCode.
Step 4: Learn to use the Terminal/Command Line with GitOn the top bar menu in VSCode, click the “Terminal” menu link and select “New Terminal.
” You’ll see a terminal pop up at the bottom of your window inside of VSCode.
The terminal is the cool black window that’s shown in thrillers when hackers break into systems and shut down all the servers or steal the 0.
001 cents that are skimmed from rounding fractions at a bank.
Shockingly, this is a bit inaccurate.
In reality, it’s a way to navigate through your files quickly.
The line where you type commands inside of the terminal is called the Command Line.
Surprise.
You’ll need to learn some shorthand abbreviations to effectively navigate through the terminal with the command line:git init = git initialize (this allows your project to use version control)dir = directory (in this context, directory means folder)mkdir (folder name)= make directory called (folder name)cd = change directory.
Use cd (folder name) to enter a folder, and cd .
to go back to the parent folder of the one you’re currently inls = list (this will will list all the files/folders that are inside your current folder)Here’s a cheat sheet for command line, but don’t worry about using the rest of those commands yet.
Navigating into a project file.
Current folder is in red — typed commands are in yellow.
In the above screenshot, I use the command line to navigate into my project.
I’m simply traveling through the chain of folders using “cd” until I reach my project folder, and then using ls to see that the only file inside of Sample Project is README.
md.
In your command line, check if you’re already inside your project folder.
If not, use cd (folder name)to navigate into your project folder.
When you’re inside your project folder, you need to initialize it as a Git repository so that you can connect it with GitHub and take advantage of version control.
Type git init and press the enter key.
It should return:Initialized empty Git repository in <filepath>Step 5: Make your first CommitMake sure your file is saved, and in your command line, type these two commands (press enter in between):git add –allgit commit -m "initial commit"These tell git to add all the work that you’ve done so far into one tidy package called a “commit.
” Then, it names your commit to represent the changes that you’ve made.
For my first commit, I always call it “initial commit.
” However, if you just built your header HTML, you might call your commit “header HTML.
” You should see something like this:Typed commands are in yellow, green arrows point towards stats showing what is inside your commit.
Now type these two commands to connect your project to its GitHub repository:git remote add origin https://github.
com/your-username/Your-Project-Name.
git (replace this with your project's GitHub url)git push -u origin masterIf you haven’t connected to GitHub before, you’ll be asked for your login information.
It’s okay to provide it here.
If your log-in information doesn’t work, you can try these things:Try typing it again, very very carefully.
Make sure you don’t have two-factor authentication on your GitHub.
Change your password and try again.
When you have run those commands successfully, you’ll get back a block of text showing that GitHub now has a version of your code.
Now, your project has one version on GitHub.
If you go back to your GitHub account and refresh your repo page, you’ll be able to see that your README.
md is now visible.
Going forward, each time you finish writing a meaningful block of code, run the commands git add –all , git commit -m "commit message here" and git push to make sure your GitHub represents the latest version.
Step 6: Structuring your FilesNow that you’ve made it through the Git process, back to the fun stuff.
File structureCreate a file called “index.
html,” a folder called “css,” and a file inside your css folder called “index.
css.
”Now, write your HTML!.This tutorial is assuming that you‘ve already learned some HTML.
If you need some help remembering where to begin, check out this guide.
It’s a good habit to include the viewport tag in the head of your HTML so that you can later make the site responsive to differently sized devices:<meta name="viewport" content="width=device-width, initial-scale=1.
0">If you need some sample text to use as a placeholder in a paragraph, throw in some auto-generated lorem ipsum.
Or, if Latin seems a little boring, use a fun take on placeholder text.
Remember to keep adding, committing, and pushing your code to GitHub every time you write a meaningful block!If you want to review and see what I did in my sample HTML, view my Github repo here.
When you’ve finished structuring your basic HTML, add this line into the head:<link rel="stylesheet" href="css/index.
css">This will link your HTML to your CSS file.
When you want to see your CSS styling, you can explore VSCode extensions like Live Server, or you can simply right click on your index.
html file name, copy the file path, and paste it into the address bar in your web browser.
Each time you save a change to the code, refresh your page to see the change.
Step 7: Deploying to NetlifyWant other people to be able to see your website online?.Netlify is a great, easy-to-use tool to play with and get your code online whether or not you’ve bought a domain name.
No need to spend $100 to show mom and dad what you’ve been working on.
Head over to Netlify.
com and create an account.
Now, there are two ways to do this:The GitHub Route:If your code is on GitHub, you can connect your account and your website will automatically update when you push your code to GitHub.
Click the green “New site from Git” button and then select the GitHub button underneath Continuous Deployment.
Confirm your GitHub authorization so that Netlify can access your repos, and select the project you’d like to put online.
Because this is just a static site without a framework like React, don’t change any of the build or deployment settings.
The Drag & Drop Route:If you skipped over the GitHub and Command Line steps, this is the route for you!Find the section of your Netlify dashboard that says “Want to deploy a new site without connecting to Git?.Drag and drop your site folder here”Pull up your file Finder and navigate to your project folder, and drag it into the box on the Netlify website.
After your site is published, you can change the name in your general settings.
If you want to add a purchased domain name, that’s available in the settings as well.
Congratulations!.Now you can show your friends and family why you’re constantly on your computer!My GitHub repo from this tutorial:KHollobaugh/Sample-ProjectContribute to KHollobaugh/Sample-Project development by creating an account on GitHub.
github.
comThis post contains no sponsorship or affiliate links.