How To Code a Personal Website STEP by STEP for Beginners! With FREE Hosting 2021 Edition

JuanCarlos Chavez
JuanCarlos Chavez
Posted underTech

Have you ever wanted to learn to code but didn’t know where to start? You are in the right place. This blog is to help accompany the video above as a written guide.

Who is this guide for?

This tutorial is designed for those who are total beginners to web development and coding. Have you heard the terms HTML & CSS but never knew exactly what or how it’s used?

Instead of rambling off definitions and origins, this guide shows you how to get hands-on with some simple code to get an understanding of how simple web apps are built and deployed.

What we’re going to cover:

  • What a code editor is
  • Modifying and Adding HTML Code
  • Hosting our site with a custom subdomain

Let’s get started by clicking this link to our sandbox template:

This link will take you to “codesandbox” with a sample personal website

Codesandbox is a online code editor for rapid web development that you can quickly experierment and prototype web apps. And it’s totally free which is nice.

Think of this like google docs, but for code. Instead of typing words to create pdfs and documents, you type code to create websites and applications.

1. Quick Overview of the Editor

Once the page loads you will see a web page on the right, some code on the left, and you’ll see some other items here in the nav bar

Lets take a look at this “files” section.

There is an “index.html” file loaded on the left. This is also the file you see being rendered as a webpage on the right.

This “.html” is just a file type that tells the web browser how elements in a web page should be structured. If you ya’ll want a deeper dive into HTML, CSS, and Javascript, let me know and I can make some more content around this.

Inside of images folder you’ll see a profile pic of myself that we will eventually update to yours.

Then we have this rocket ship button that will allow us to publish this website, more on that later.

Let’s Edit some Code

Ok now we are going to edit the code to customize the website. Don’t get scared of the code, i’ll walk you through step by step.

  • What do in this tutorial:
    • The image on mobile & desktop
    • Texts in the header, paragraph
    • Update the links to social media and “Get in Touch”
    • Update the background image
    • Deploy and host the website to Netlify
    • Create a custom URL name with a free subdomain
  • Let’s update your name section
    • Create H1 tag
    • H1 tag stands for a heading tab. You can read more in the Mozilla docs, description is below of what all these tags mean and do. <h1 class=”text-3xl font-bold pt-8 lg:pt-0″>Your Name </h1>
  • Update description
    • remove everything there and add your own stuff
  • Update the social links
    • You can remove this whole section if you want.
  • Update the image
    • you don’t want my mug shot there, so let’s update it to point to yours.
    • We can do this in 2 ways.
      • Instagram profile picture URL
      • Do this by uploading a file by dragging an image file from your desktop into the “images” folder inside of the code sandbox
    • Make sure you update the second image below.
  • Choose your own background by editing
  • Change the colors by going to tailwind and hitting “command + k” to search for border color.
    • border-yellow-500
    • Find “-yellow-” and replace by clicking “command + f” then click the dropping.
    • customize by adding a style tag “style=”color: orange”” or a css class.
  • Let’s update the link for the “Get In Touch” button to link to our email.
    • <a href=””
    • You can add another link to your Soundcloud or maybe an eCommerce store by uncommenting the section below.
    • You can copy and paste this and add your own links.
  • Let’s update the “title” tag to say “your name personal website”
    • <title>JuanCarlos Chavez’s Personal Website</title>

And Bam!

Let’s look at what we did here:

    • The image on mobile & desktop
    • Texts in the header, paragraph
    • Update the links to social media and “Get in Touch”
    • Update the background image

Next, let’s deploy this in one click!

Let’s deploy our code and get a customized url

  • Let’s deploy the site so that we can share it with others
    • Let’s first create an account with codesandbox so we can save our changes and do a “one-click” deploy.
      • “Click the “sign in” blue bottom on the top right.
      • Login with github or google. Im choosing google. And bam we have the code on our new profile.
    • Click on the rocket on the left nav bar.
    • We see to option here, deploy to vercel or deploy to netlify,
    • We are going to deplloy with netlify
      • hosting service for web applications and a pretty popular option for deploying simple websites (rather than wordpress which requires a database and serverside rendering)
    • Click on “deploy with netlify”
    • Wait for it. Sometimes if you see this page, just go back to codesanbox, refresh, and try it again. It’ll eventually do it correctly.
  • Now we click the link we can see our app deployed to netlify
  • Let’s claim this site so we can add a custom name to the url.
    • It’s going to take you to netlify where you can sign in and create an account. it’s totally free and trusted by a bunch of developers.
    • You can sign in with email, it’ll ask for an email and passwrod then you will have to verify your email so be sure to use one you have access too.
    • Lets go back to codesandbox and Click “claim”
    • it’ll take u too a screen that will say “Netlify your CodeSandbox V2 projects”
    • Click “add project to Netlfiy dashboard” and continue.
    • exit of any modals and let’s click on our site.
    • It will take you to the site overview page.
    • Clcik on “domain settings”
    • then click the “options” dropdown and click “edit site name”
    • Add what ever you want it to be named, make sure there is no special characters or spaces.
    • Click your new custom sub domain
  • Thats it! You did it.

Learning to code is a quick way to get ahead in today’s tech-driven society.

If this tutorial helped you to learn more about coding or websites send me a message to let me know.

And you if like tech, entrepreneurship, and self-development feel free to subscribe to the newsletter below!

Thanks for reading!

Get notified about tech, design, and entrepreneurship posts:

Subscribe to our newsletter to get to know about my latest projects and posts.

More Stories

Youtube, Podcast, & Life Updates – March 2021

The beginning of the quarter of the year is always a hectic time for me. We’re just coming off from holidays, getting back into work, & preparing for tax season. I always tend to feel refreshed and ready to attack the year in Jan & Feb with my list of goals in hand, being filled […]

JuanCarlos Chavez
JuanCarlos Chavez

Working on my second Youtube Video

I am at the beginning of my content creation journey and I have to admit, it’s asking me a lot deeper questions of myself and who am I more than I thought. Some questions come to mind: What kind of stuff do you want to share with the world? What would you do if you […]

JuanCarlos Chavez
JuanCarlos Chavez

2021 Goals

This is the year that I’ve decided to be more open than ever especially in the digital space. One way of doing this is by sharing the goals I am attempting to accomplish this year. It was tough trying to balance setting achievable goals and ambitious goals. I, as the pragmatic type, try to lean […]

JuanCarlos Chavez
JuanCarlos Chavez

How I created my first video & launched my YouTube Channel

First of all, Happy 2021! I know the craziness still exists but man it feels good that a fresh new number was added to the year ? Why start a YouTube Channel? There are 5 main reasons why I decided to finally hit record & upload: I want to be a producer rather than a […]

JuanCarlos Chavez
JuanCarlos Chavez

Recreating NASA’s UI for their Mission Control Tech

It’s pretty cool that NASA has an open-source javascript project that anyone can contribute to. You can actively write some code with the mission of space exploration & scientific discovery with some HTML, CSS, and JavaScript! This was my first glimpse into NASA’s openMCT program where they are determined to create a universal mission control […]

JuanCarlos Chavez
JuanCarlos Chavez

The Simple Intro Guide to Accounting for Small Businesses

When you create a business the first step is to register your business with your state. Each state has different processes fortunately (or unfortunately) that you could learn to do yourself but it can get clunky and weird. If you have some extra money (around $500) it’s highly recommended that you start your business with […]

JuanCarlos Chavez
JuanCarlos Chavez

How I Coded Up My Own Blog with NextJS and WordPress

If you are reading this post before in 2020 or 2021, odds are the website you are reading is built with the technologies I will be mentioning. I say this since you can inspect the code on this page pretty easily by right clicking any where on the page an hitting “inspect” and be able […]

JuanCarlos Chavez
JuanCarlos Chavez

Creating a project proposal for an agency in Notion

I have been using Notion for all list keeping including clients for the web design agency I am working to build over at My objective was to create a template “Project Proposal” plan for my future clients. I’ve looked at other samples and watched a few explanations on YouTube can came up with my […]

JuanCarlos Chavez
JuanCarlos Chavez