Post

resume

Posted Updated
By EthanWang
15 min read
resume

1. Setup

  • github.dev: A free, online code editor that you’ll be coding directly in the browser
  • CodeSwing: An extension that allows you to make edits to the HTML and CSS and see the results immediately

1.1 Creating a repository and opening it in github.dev

  1. creating a new repository named resume for this project on GitHub, and then opening it in github.dev. Make sure to select Public and to initialize the repository with a README.
  2. Navigate to your new repository on GitHub.
  3. Open the repository in github.dev by pressing the . key from the repository page, or swap .com with .dev in the URL.

1.2 Install CodeSwing

  1. Open the Extensions toolbar by selecting the Extensions icon from the Activity Bar on the left-hand side of the window.
  2. In the Search Extensions text box in the upper-right corner, type CodeSwing
  3. Select Install for CodeSwing

1.3 Turn on Auto Save

Auto Save automatically saves changes to your files, so you don’t have to worry about losing any of your work.

To turn on AutoSave, select the three parallel lines icon on the left-hand side of your github.dev window in the Activity Bar.

Go to File > Auto Save. Your AutoSave is turned on if there is a check mark next to the AutoSave menu item.

2. Create an HTML page

2.1 Create an HTML file with CodeSwing

You will use CodeSwing to create and edit your HTML and CSS in Visual Studio Code. CodeSwing has a variety of templates you can use and includes support for advanced pages as well. Start by creating your first “swing” using the core HTML template.

  1. Open the Command Palette by selecting the three parallel lines icon in the left-hand side Activity Bar, then navigating to View > Command Palette. You can also quickly open the Command Palette by using the keyboard shortcut Control+Shift+P on a PC, or Command+Shift+P on a Mac.
  2. Type CodeSwing, then select CodeSwing: Initialize Workspace as Swing.
  3. Choose the option for Basic: HTML-Only and your new swing will appear, with your HTML file on the left and a browser window on the right.
  4. This will create an index.html file in your root directory.

IMPORTANT If you accidentally close the wrong windows, you can re-open CodeSwing by navigating to your repository in github.dev, opening the Command Palette with Control+Shift+P (or Command+Shift+P on a Mac), typing CodeSwing, selecting CodeSwing: Open Swing…, and selecting the directory with your files.

You now have the HTML file created for your resume site!

2.2 Create the HTML structure

  1. Create the index.html. Inside the index.html window, add the following code to create the initial structure of your page, replacing Your Name in the <title> tag with your name:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

    <html>
	<head>
		<link href="style.css" rel="stylesheet">
		<title>Your Name resume</title>
	</head>
   
	<body>
		<header id="header">
			<!-- resume header with your name and title -->
			<h1>YOUR NAME</h1>
			<hr>
			YOUR TITLE (EX: SOFTWARE ENGINEERING STUDENT)
			<hr>
		</header>
		<main>
			<article id="mainLeft">
				<section>
					<h2>CONTACT</h2>
					<!-- contact info including social media -->
				</section>
				<section>
					<h2>SKILLS</h2>
					<!-- your skills -->
				</section>
				<section>
					<h2>EDUCATION</h2>
					<!-- your education -->
				</section>            
			</article>
			<article id="mainRight">
				<section>
					<h2>ABOUT</h2>
					<!-- about you -->
				</section>
				<section>
					<h2>WORK EXPERIENCE</h2>
					<!-- your work experience -->
				</section>
			</article>
		</main>
	</body>
</html>

  2. Notice how as you type (or copy and paste), the browser window on the right automatically updates with the information you’ve added.

2.3 Exploring the code

tagdescription
htmlContainer for all HTML in an HTML page.
headContains metadata, or information about the page.
linkUsed to tell the page what CSS stylesheet to use. rel="stylesheet" indicates we are using a stylesheet, and href="style.css" loads style.css (which is the name of the stylesheet we’ll create in the CSS section of the workshop).
titleIndicates the title of the page to display on the toolbar. This is not displayed on the page itself. Every page you create should have a title.
bodyThe contents of the page to be displayed to the user.
header, main, article, sectionThese are “semantic” tags. See the description below for more information.
h1A level 1 header. Header tags go from h1 to h6, with h1 being the highest level, to h6 being the lowest level. These are used to create structure for the outline of the page.
pA paragraph tag. Paragraph tags are where the body text of your page goes.
hrCreates a horizontal line. The tag stands for “horizontal rule”.
idid is an attribute that allows you to assign a unique id for an HTML element. This will come in handy when we style the HTML.
<!-- comment -->These are HTML comments. They are useful for making notes or setting reminders to yourself.

Note: Comments are a great way to take notes as you’re learning HTML. You can put a comment right above a section of code, and describe what the section does. But do remember comments are not hidden from browsers, so don’t store sensitive information in comments as anyone who views the source of your code can read your comments.

3. Adding content to an HTML page

  1. Inside index.html, and below the comment which reads <!-- contact info including social media -->, add the following HTML to add a link to your email, replacing your-email@example.com with your email address:

    1
2
3
4

    <p>
    <i class="fa fa-envelope" aria-hidden="true"></i>
    <a href="mailto:your-email@example.com">your-email@example.com</a>
</p>

  2. The page automatically updates with your email address

    NOTE Notice that there is an i tag here - this will eventually contain a little envelope icon. Right now, it just shows up as a square, and that’s because you need to add an icon font to your page. Don’t worry about that for now - we’ll do that in the next section, and that square will magically turn into an envelope.

  3. Repeat this for any social media that you want to add. Here are some different icons that you can use for the various social media platforms. Swap out the class of the i element with any of the following values.

    • fab fa-twitter
    • fab fa-linkedin
    • fab fa-github
    • fab fa-facebook

  4. Similarly, swap out the href of each a element with the appropriate hyperlink for each social media page, and be sure to change the link text as well. For example, if you want to add your GitHub and LinkedIn links to your resume, the HTML would look something like this:

    1
2
3
4
5
6
7
8

    <p>
    <i class="fab fa-github" aria-hidden="true"></i>
    <a href="github.com/gh-username">gh-username</a>
</p>
<p>
    <i class="fab fa-linkedin" aria-hidden="true"></i>
    <a href="linkedin.com/linkedin-username">linkedin-username</a>
</p>

3.2 Creating lists

  1. Inside index.html, below the comment which reads <!-- your work experience -->, add the following HTML to create the list:

    1
2
3
4
5
6
7
8
9
10
11
12

    <h3>JOB TITLE</h3>
<p>
		Company Name | 2008 - 2010
</p>
<p>
		Describe what you did in this position with one summary sentence and no more than 3 bullet points with specific highlights
</p>
<ul>
		<li>Cool accomplishment</li>
		<li>Cool accomplishment</li>
		<li>Cool accomplishment</li>
</ul>

  2. Swap out JOB TITLE for your previous job title (for example, SOFTWARE ENGINEER).

  3. Change the “Company Name” and date as appropriate.

  4. Add a short description that sums up your responsibilities.

  5. Update the li items to add the accomplishments you want to highlight from that work experience.

3.3 Finishing out our resume

  1. Inside index.html, below the comment which reads <!-- your skills -->, add the following HTML and include any skills that you have.

    1

        <p>HTML, CSS, GitHub, VS Code...</p>

  2. Below the comment which reads <!-- your education -->, add the following HTML for your education information and update the text to represent your education:

    1
2
3
4
5
6
7

    <h3>YOUR MAJOR</h3>
	<p>
		Your university or school
	</p>
	<p>
		2018-2022
	</p>

  3. Below the comment which reads <!-- about you -->, add the following HTML and update it with a short blurb on who you are and what kind of company you want to work for:

    1

    <p>A brief paragraph about you and what kind of job/company you are looking to work for.</p>

  4. The window updates with your new information

4 Adding style using CSS

4.1 Adding style to a page

  1. Hover over the name of your repository, resume, in the Explorer pane on the left-hand side of your screen, then select the File with + icon. Name the file style.css.

  2. Inside style.css, add the following CSS to choose the font and size

    1
2
3
4
5
6

    body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    max-width: 960px;
    margin: auto;
}

Notice font-family, which is used to select the font. There are five fonts listed. Because users may not have a particular font installed, CSS offers the ability to fallback to the next font. In this case you’re telling the browser to try Segoe UI first, then Tahoma if that’s not installed, and so on.

There are also a few more rules that apply to everything in the body tag, which is the whole page:

  • font-size - sets the size of the font to 12 pixels
  • max-width - sets a maximum width for your resume so that it doesn’t look strange on huge screens. 960 pixels is a common width for many websites.
  • margin - sets the margin to auto. When combined with the max-width property, this centers the content on the screen horizontally.

4.2 Sizing

  1. At the bottom of style.css, add the following…

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    h1 {
    font-size: 3em;
    letter-spacing: .6em;
    padding-top: 1em;
    padding-bottom: 1em;
}
   
h2 {
    font-size: 1.5em;
    padding-bottom: 1em;
}
   
h3 {
    font-size: 1em;
    padding-bottom: 1em;
}

  2. The page updates with the new sizes.

4.3 Creating a grid

Let’s review the structure of your page:

1
2
3
4
5
6
7
8
9
10

```html
<main>
    <article>
        Contact info
    </article>
    <article>
        About you & experience
    </article>
</main>
```

We want to create two columns, one for the first article with your contact info, skills, and education, and the second article with your work experience. Notice how both article elements are contained inside of a single main element. We will use the main element as the container for our grid. We will configure main to host the grid, and configure two column templates - one for each article.

1
2
3
4
5
6
7

```css
    main { 
        display: grid;
        grid-template-columns: 40% 60%;
        margin-top: 3em;
    }
```

This will split the main element into two columns. The first top-level element under main which is an article will be the first column and will take up 40% of the available space. The second top-level element under main (also an article) will take up the remaining 60%.

4.4 Controlling spacing with the box model

Add the remaining style rules to add some padding around the elements on your page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

```css
header {
    text-align: center;
    margin: auto 2em;
}

section {
    margin: auto 1em 4em 2em;
}

i {
    margin-right: .5em;
}

p {
    margin: .2em auto
}

hr {
    border: none;
    background-color: lightgray;
    height: 1px;
}

h1, h2, h3 {
    font-weight: 100;
    margin-bottom: 0;
}
```
  • We’re centering the text in the header element and adding a 2em margin to the left and the right so that the lines from the hr don’t go all the way to the edge, but have a little padding.
  • The section element is given some margin so that each section (ABOUT, CONTACT, SKILLS) has spacing around it. The p element is also given some margin.
  • The i element is given some spacing on the right. These are the icons that we will be adding next.
  • The hr element is turned into a thinner gray line by removing its border and providing a background color and height.
  • We reduce the font-weight or “thickness” of the font of our header tags so that they aren’t so blocky.

4.5 Selecting an element by ID

Notice that each of the article elements has an id property - “mainLeft” and “mainRight”. We can select these elements by their ID in the CSS and style them. So, to add a border to just the left column, add this final rule to your stylesheet:

1
2
3
4
5

```css
#mainLeft {
    border-right: 1px solid lightgray;
}
```

4.6 Add an icon font

An icon font is a font that contains symbols and glyphs instead of letters and numbers. In other words, it’s a font that contains icons! There are many open source/free icon fonts you can use, and one of the most popuplar is called “Font Awesome”. That’s the one we’ll add to our page.

  1. In the index.html file, add the following line to the head element…

    1

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

  2. This will load the Font Awesome icon font. You should now see some nifty icons next to your CONTACT data.

5. Creating your website

5.1 Commit your changes

5.2 Set up GitHub Pages

Next, we’ll need to turn on GitHub Pages for our resume repository.

  1. Navigate to your repository on GitHub.com, and select Settings, next to the gear icon.
  2. Select Pages in the left-hand menu.
  3. Under Source select the main branch of your repository to be the source for your new website. Then, select Save.
  4. After you select your source, you’ll be notified of the address of your new website. It should look something like your-username.github.io/resume/. Navigate to the page, and check out your live resume website!

6 All files

6.1 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<html>
	<head>
		<link href="style.css" rel="stylesheet">
		<title>Your name resume</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	</head>

	<body>
		<header id="header">
			<!-- resume header with your name and title -->
			<h1>YOUR NAME</h1>
			<hr>
			YOUR TITLE
			<hr>
		</header>
		<main>
			<article id="mainLeft">
				<section>
					<h2>CONTACT</h2>
					<!-- contact info including social media -->
                    <p>
                        <i class="fa fa-envelope" aria-hidden="true"></i>
                        <a href="mailto:your-email@example.com">your-email@example.com</a>
                    </p>
                    <p>
                        <i class="fab fa-github" aria-hidden="true"></i>
                        <a href="github.com/gh-username">gh-username</a>
                    </p>
                    <p>
                        <i class="fab fa-linkedin" aria-hidden="true"></i>
                        <a href="linkedin.com/linkedin-username">linkedin-username</a>
                    </p>
				</section>
				<section>
					<h2>SKILLS</h2>
					<!-- your skills -->
                    <p>HTML, CSS, GitHub, VS Code...</p>
				</section>
				<section>
					<h2>EDUCATION</h2>
					<!-- your education -->
                    <h3>YOUR MAJOR</h3>
                    <p>
                        Your university or school
                    </p>
                    <p>
                        2018-2022
                    </p>
				</section>            
			</article>
			<article id="mainRight">
				<section>
					<h2>ABOUT</h2>
					<!-- about you -->
					<p>A brief paragraph about you and what kind of company you want to work for.</p>
				</section>
				<section>
					<h2>WORK EXPERIENCE</h2>
					<!-- your work experience -->
                    <h3>JOB TITLE</h3>
                    <p>
                            Company Name | 2008 - 2010
                    </p>
                    <p>
                            Describe what you did in this position with one summary sentence and no more than 3 bullet points with specific highlights
                    </p>
                    <ul>
                            <li>Cool accomplishment</li>
                            <li>Cool accomplishment</li>
                            <li>Cool accomplishment</li>
                    </ul>
				</section>
			</article>
		</main>
	</body>
</html>

6.2 style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    max-width: 960px;
    margin: auto;
}

h1 {
    font-size: 3em;
    letter-spacing: .6em;
    padding-top: 1em;
    padding-bottom: 1em;
}

h2 {
    font-size: 1.5em;
    padding-bottom: 1em;
}

h3 {
    font-size: 1em;
    padding-bottom: 1em;
}

main { 
    display: grid;
    grid-template-columns: 40% 60%;
    margin-top: 3em;
}
header {
    text-align: center;
    margin: auto 2em;
}

section {
    margin: auto 1em 4em 2em;
}

i {
    margin-right: .5em;
}

p {
    margin: .2em auto
}

hr {
    border: none;
    background-color: lightgray;
    height: 1px;
}

h1, h2, h3 {
    font-weight: 100;
    margin-bottom: 0;
}
#mainLeft {
    border-right: 1px solid lightgray;
}

6.3 codeswing.json

1
2
3
4

{
  "scripts": [],
  "styles": []
}
career
Github Page
This post is licensed under CC BY 4.0 by the author.