diff --git a/8-code-editor/1-using-a-code-editor/assignment.md b/8-code-editor/1-using-a-code-editor/assignment.md index a4350f2c..defdf9e4 100644 --- a/8-code-editor/1-using-a-code-editor/assignment.md +++ b/8-code-editor/1-using-a-code-editor/assignment.md @@ -1,5 +1,4 @@ -# VSCode.dev Assignment -## Create a resume-website using vscode.dev +# 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?_ 😎 @@ -19,7 +18,6 @@ TODO: add an optional image After this assignment, you'll learn how to: - Create a website to showcase your resume -- _Optional_ - Launch your resume website to the Cloud for free ### Prerequisites @@ -29,7 +27,14 @@ After this assignment, you'll learn how to: **Step 1:** Create a new GitHub Repository and give it a name `my-resume` -**Step 2:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button + +**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: @@ -39,10 +44,199 @@ _Replace `your-username` with your github username_ https://github.com/your-username/my-resume ``` -✅ If succesful, you'll see all files for this repository loaded in the text editor. +✅ If successful, you'll see your project and the index.html file open up on the text editor on the browser. -![Create resume project outline](../images/resume-website-project.png) +![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. diff --git a/8-code-editor/images/new-file-github.com.png b/8-code-editor/images/new-file-github.com.png new file mode 100644 index 00000000..b54d1847 Binary files /dev/null and b/8-code-editor/images/new-file-github.com.png differ diff --git a/8-code-editor/images/project-on-vscode.dev.png b/8-code-editor/images/project-on-vscode.dev.png new file mode 100644 index 00000000..ee09e0cc Binary files /dev/null and b/8-code-editor/images/project-on-vscode.dev.png differ