Omcodes23

# File: app.py
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

tasks = []

@app.route('/')
def index():
    return render_template('index.html', tasks=tasks)

Omcodes23

Setup

As you might expect, the first step to getting started with any new technology is setting up a couple of tools. While it is possible to create HTML and CSS with any text editor, using a code editor will offer features to make your life easier.

We'll be using github.dev, a free, online code editor, for this workshop. If you've ever used Visual Studio Code, this code editor may look familiar to you. One of the awesome things about using github.dev is that you'll be coding directly in the browser. You'll also add the CodeSwing extension, which allows you to make edits to the HTML and CSS and see the results immediately.

Creating a repository and opening it in github.dev

Let's start by creating a new repository for this project on GitHub, and then opening it in github.dev.

Omcodes23

Create an HTML page

HTML stands for Hypertext Markup Language, and is used to "markup" the text to be displayed on a webpage. More specifically, HTML is used to describe the hierarchy and function of the text in a page. With HTML you can indicate a header, create a link to another page, or indicate where an image should be placed.

HTML consists of what are called "tags" or "elements". While there is a technical difference between the two, you will find many developers use the terms interchangeably and generally doesn't impact how you create your code. These tags are read by a browser and are used to determine how to display and interpret the information in a page.

You will begin to build your resume by creating an HTML file and adding the code. You may notice that the page won't appear to be very structured or robust; you will make it look better when you add some styles.

Create an HTML file with CodeSwing

Omcodes23

Adding content to an HTML page

Previously, you saw how to create the structure of an HTML page. Now it's time to add more content to your resume. Specifically, you probably want to add an email address, social media links, your education and professional experience.

Update the header

Most resumes feature the name of the person at the top as the "title" of the resume. This is a perfect place to use an h1 tag. You can also add a little separation between the header and the rest of the page by using two horizontal rules, or hr tags, with some text in between.

1. Inside index.html, change the text "YOUR NAME" to be your name. Change "YOUR TITLE" to your general title - or the title you might like to have - for example, "SOFTWARE ENGINEER".

Omcodes23

Adding style using CSS

As we explored in the beginning of the workshop, HTML is used to structure the content of a page. CSS, or Cascading Stylesheets, is used to provide style. CSS is used to set colors and fonts, where on a page information should be displayed, and other decorative items. By keeping HTML and CSS focused on these concerns (sometimes called separation of concerns), you create pages which are easier to modify and maintain, and become more accessible to all users.

Introducing selectors

CSS uses selectors to indicate what to modify. These selectors can be the name of a tag such as h1, an attribute such as class or id - useful for modifying a group of elements or a specific one, respectively - or get really fancy and look at the entire structure of a page to determine what to modify. We're first going to focus on using tag names as selectors.

When using a tag name for a selector, you use just the name of the tag. Keep in mind, when you indicate the name of

Omcodes23

Creating your website

Now that you have your basic resume crafted in HTML and CSS, let's work on putting your resume on a website. To do this, we'll use a feature called GitHub Pages, which allows you to create a website directly from a repository on GitHub.

Commit your changes

The first thing we need to do is commit the changes we've made to our resume repository to GitHub. This will upload all of the resume content that we added to our repository, so we can use it for our website.

1. Select the Source Control icon on the left-hand side Activity Bar. There should be a small blue circle with a number inside, indicating the number of files you've made changes to since the last time you committed your code.
2. Hover over the word Changes, and select the + button to Stage All Changes. All of the changes you stage will be committed.

Omcodes23

Build a Website to Showcase your Resume

Stage 1: Desired Results

By the end of this workshop, you will have built your resume in semantic HTML, styled it using CSS including CSS Grid, and launched it as a web site on GitHub pages. You'll explore building this all using GitHub.dev, an online code editor based on Visual Studio Code.

Stage 2: Evidence

You will be able to show your skills by building a resume of your own and launching it online. You can extend your knowledge by adding styles, more HTML, and even making the resume responsive so it will display well on various sizes of screens.

Omcodes23

🧩 Homelab Setup Guide

Build your own Homelab environment — a personal infrastructure playground for learning, testing, and hosting your favorite tools and services.
This guide walks you through the process from hardware selection to deploying full-stack applications.

---

🚀 Step 1: Choose Your Hosting Environment

Decide where to host your Homelab: