When I was in university, I always wanted to be one of those students who had a personal website where they could host their resume and projects. There was only one problem: I didn't know any web development languages (nor did I have the time to learn them), and I wasn't comfortable enough with developer tools to figure out how to use one of the many templates available online.
If you find yourself in the same situation, there is a solution: in just a few hours, you can create a resume website in the browser using HTML, CSS, github.dev, and GitHub Pages. Having an online resume will help recruiters notice your application, and you'll be able to learn a few new skills in the process. This new workshop will teach you how to code a resume website, and the best part is that you won't need to download any coding tools or languages to get started.
We'll code a resume website together in your browser window, using the power of VS Code in the browser and GitHub Pages. By the end of the workshop, you'll be able to send anyone a link to your online resume.
To gain access to the workshop, go to the repository on GitHub. In this blog post, I'll go over the workshop's outline and share additional resources for further learning.
Prerequisites
You need a few things for this workshop – a modern Browser, like Microsoft Edge or Google Chrome, and a GitHub account.
Outline
This workshop is divided into five sections. I'll go over each one so you know what you can expect to learn and accomplish as you work through them.
Set up your coding environment
Setting up a couple of tools is the first step in getting started with any new technology. While any text editor can be used to create HTML and CSS, using a code editor will provide features that will make your life easier.
For this workshop, we'll be using github.dev, a free online code editor. If you've ever used Visual Studio Code, you'll recognise this code editor. One of the coolest aspects of using github.dev is that we'll be coding right in the browser. We'll also include the CodeSwing extension, which allows us to make changes to our HTML/CSS and immediately see the results.
Create a new repository for your resume, open it in github.dev, and install the CodeSwing extension in this section. Before proceeding to the next section, you will have everything you need to code your website directly from your browser window.
Create an HTML page
Next you will need to create an HTML file that will contain the structured content of your resume. This section will not be pretty (we'll get to that later), but it will explain basic HTML concepts and guide you through the template code. You will have created your first HTML file by the end of this section, and you will be ready to add more content to your resume.
Adding content to an HTML page
This section may take a long time to complete, especially if you have a lot of work experience to highlight on your resume. This section covers a few key concepts, such as how to create email and social media links, as well as how to create HTML lists. By the end of this section, you should have all your resume's content in your HTML file, ready to be styled with CSS.
Adding style using CSS
This is the exciting part: customizing your resume to look great on your website. In this section, we'll go over the fundamentals of CSS, such as selectors, sizing, grids, and spacing. This is only the beginning of your CSS journey; everything you learned in this workshop is completely customizable. Feel free to experiment with the styling to get the look you want. The best part about using CodeSwing is that you can see all your changes in real time!
Creating your website
Now that you have a great-looking resume, you'll learn how to put it on a webpage with GitHub Pages in this section. In just a few steps, you'll have a link to send to anyone that includes your resume.
Next steps
To continue expanding your web development skills, check out the Web Development for Beginners Learning Path on Microsoft Learn. You can build on what you’ve learned in this workshop and make further upgrades to your resume website.
Need further help to complete this? Join my colleague Burke Holland and I on Thursday, January 20th, 2022 at 8 am PT for a livestream on the VS Code YouTube channel to walk through the workshop together. Hope to see you there!
Posted at https://sl.advdat.com/3zJcbb3