Master Web Development by Building a Website

Follow my journey as I build my website and learn web development along the way.

After a week of research and comparing frameworks, I chose to start with the simplest possible page. This approach allows me to revisit the basics and strengthen my foundation by filling any knowledge gaps.

My goals are:

  • Create a simple website
  • Explore, research, and learn about web technologies, tools, and best practices
  • Enhance, refine, and expand the website by applying what I learn
  • Share my journey here

Current situation: Create and Publish a Simple Webpage

Project Setup

  • Choose and install an IDE for coding. I use VS Code and its built-in terminal. The following steps are based on that.
  • Create a folder locally where you will clone the GitHub project (my folder is called qapro).
  • Open the folder in VS Code and enable the terminal inside VS Code.
  • Create a new private repository on GitHub with a .gitignore and README file (my repo is called qapro). A valid GitHub account is required.
  • Go to the VS Code terminal and clone the GitHub repo you just created to the current folder (use a dot . to indicate the location).
  • Two files were cloned to the local folder.
  • Create a new site on Netlify using the "Import from GitHub" method and follow the steps to connect the GitHub repo to Netlify.
  • On the last step – Configure – add a site name, choose the branch to deploy, set the Base directory (e.g., /public), keep the rest of the fields with default values, and click Deploy.
  • Check your site domain. It should be something like https://qapro.netlify.app.

First Webpage

  • Open VS Code, create a public folder, and add an index.html file with a standard HTML template.
  • Add the following line to the <head> section inside the index.html file: 
    <h1>This is a work in progress and a new page should be available soon</h1>
  • Commit and push the changes to GitHub.
  • Check the changes at https://qapro.netlify.app.
  • If needed, connect another domain name to your Netlify site. This will not be covered here as it is a more complex process.

Do Some Research and Learn More HTML and CSS Skills

Add Some Simple Styling

  • Chose Water.css because it doesn't require installation, keeping the setup simple for now.
  • Add the following line to the page's <head> tag: 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

Improve the HTML markup

  • If you ever touched any HTML, follow this Web Building Crash Course guide.
  • If you never touched any HTML, or want to improve, go through this HTML Tutorial.
  • I cannot ephasize enough how important is it to learn the foundations well. This Accessibility Tutorial helps greatly to understand the how and why of HTML pages structure. It should be, in my opinion, a mandatory part of any HTML course.
  • Apply the learnings
  • Add a simple footer

Add the header or banner if using the Accessibility term

  • Skip to main content link - good accessibility practice
  • Logo text - just QAPRO
  • Navigation - only Master WebDev article for now

Note: critique is welcome as soon as I implement a feedback feature