# Create a resume-website using vscode.dev _How cool would it be to have a recruiter ask for your resume and you send them a url?_ 😎 ## Objectives After this assignment, you'll learn how to: - Create a website to showcase your resume ### Prerequisites 1. A GitHub account. Navigate to [GtiHub](https://github.com/) and create an account if you haven't already. ## Steps **Step 1:** Create a new GitHub Repository and give it a name `my-resume` **Step 2** Create an `index.html` file in your repository. We will add at least one file while still on github.com because you cannot open an empty repository on vscode.dev Click the `creating a new file` link, type in the name `index.html` and select the `Commit new file` button ![Create a new file on github.com](../images/new-file-github.com.png) **Step 3:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button Copy the url to the repository you just created for your resume site and paste it in the input box: _Replace `your-username` with your github username_ ``` https://github.com/your-username/my-resume ``` ✅ If successful, you'll see your project and the index.html file open up on the text editor on the browser. ![Create a new file](../images/project-on-vscode.dev.png) **Step 4:** Open the `index.html` file, paste in the code below on your code area and save
HTML code responsible for the content on your resume website. Your Name Goes Here!

ABOUT

Write a blurb about yourself!

WORK EXPERIENCE

Job Title

Organization Name Goes Here | Start Month – End Month

  • Task 1 - Write what you did!
  • Task 2 - Write what you did!
  • Write the outcomes/impact of your contribution

Job Title 2

Organization Name Goes Here | Start Month – End Month

  • Task 1 - Write what you did!
  • Task 2 - Write what you did!
  • Write the outcomes/impact of your contribution
Add your resume details to replace the _placeholder text_ on the html code **Step 5:** Hover on the My-Resume folder, click the `New File ...` icon and create 2 new files in your project: `style.css` and `codeswing.json` files **Step 6:** Open the `style.css` file, paste in the code below and save
CSS code to format the layout of the site. body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; 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; }
**Step 6:** Open the `codeswing.json` file, paste in the code below and save { "scripts": [], "styles": [] } **Step 7:** Install the `Codeswing extension` to visualize the resume website on the code area. Immediately after installing the extension, observe your code area to see the changes to your project 😃 Click the _`Extensions`_ icon on the activity bar and type in Codeswing. Either click the _blue install button_ on the expanded activity bar to install or use the install button that appears on the code area once you select the extension to load additional information. ![Install extensions](../images/install-extension.gif) This is what you will see on your on your screen after you install the extension. ![Codeswing extension in action](../images/after-codeswing-extension-pb.png) If you are satisfied with the changes you made, hover on the 'Changes' folder and click the + button to stage the changes. Staging simply means preparing your changes to commit them to GitHub. Then, type in a commit message _(A description of the change you have made to the project)_ and commit your changes by clicking the 'tick'.Once done working on your project, select the hamburger menu icon at the top left to return to the repository on GitHub. Congratulations 🎉 You have just created your resume website using vscode.dev in few steps. ## 🚀 Challenge Open a remote repository you have permissions to make changes and update some files. Next, try creating a new branch with your changes and make a Pull Request. ## Review & Self Study Read more about [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) and some of its other features.