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.
Decide where to host your Homelab:
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
Let's start by creating a new repository for this project on GitHub, and then opening it in github.dev.
| # 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) |
