info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-08-07 23:37:23 +02:00
Code Issues Projects Releases Wiki Activity

vscode.dev assignment draft

Browse Source
This commit is contained in:
Julia
2022-09-30 14:51:23 +03:00
parent ba3a820f77
commit 035dc2dc8d
3 changed files with 200 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
8-code-editor/1-using-a-code-editor/assignment.md
View File

@@ -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?_ 😎 _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: After this assignment, you'll learn how to:
- Create a website to showcase your resume - Create a website to showcase your resume
- _Optional_ - Launch your resume website to the Cloud for free
### Prerequisites ### 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 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: 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 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
<details>
<summary><b>HTML code responsible for the content on your resume website.</b></summary>
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Your Name Goes Here!</title>
</head>
<body>
<header id="header">
<!-- resume header with your name and title -->
<h1>Your Name Goes Here!</h1>
<hr>
Your Role!
<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:username@domain.top-level domain">Write your email here</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Write your username here!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Write your username here!</a>
</p>
</section>
<section>
<h2>SKILLS</h2>
<!-- your skills -->
<ul>
<li>Skill 1!</li>
<li>Skill 2!</li>
<li>Skill 3!</li>
<li>Skill 4!</li>
</ul>
</section>
<section>
<h2>EDUCATION</h2>
<!-- your education -->
<h3>Write your course here!</h3>
<p>
Write your institution here!
</p>
<p>
Start - End Date
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>ABOUT</h2>
<!-- about you -->
<p>Write a blurb about yourself!</p>
</section>
<section>
<h2>WORK EXPERIENCE</h2>
<!-- your work experience -->
<h3>Job Title</h3>
<p>
Organization Name Goes Here | Start Month – End Month
</p>
<ul>
<li>Task 1 - Write what you did!</li>
<li>Task 2 - Write what you did!</li>
<li>Write the outcomes/impact of your contribution</li>
</ul>
<h3>Job Title 2</h3>
<p>
Organization Name Goes Here | Start Month – End Month
</p>
<ul>
<li>Task 1 - Write what you did!</li>
<li>Task 2 - Write what you did!</li>
<li>Write the outcomes/impact of your contribution</li>
</ul>
</section>
</article>
</main>
</body>
</html>
</details>
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
<details>
<summary><b>CSS code to format the layout of the site.</b></summary>
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;
}
</details>
**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 ## 🚀 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. 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.

BIN
8-code-editor/images/new-file-github.com.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
8-code-editor/images/project-on-vscode.dev.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB