Skip to content

Commit 035dc2d

Browse files
juliamuiruri4juliamuiruri4
committed
vscode.dev assignment draft
1 parent ba3a820 commit 035dc2d

File tree

3 files changed

+202
-8
lines changed

3 files changed

+202
-8
lines changed

‎8-code-editor/1-using-a-code-editor/assignment.md

Lines changed: 202 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
# VSCode.dev Assignment
2-
## Create a resume-website using vscode.dev
1+
# Create a resume-website using vscode.dev
32

43
_How cool would it be to have a recruiter ask for your resume and you send them a url?_ 😎
54

@@ -19,7 +18,6 @@ TODO: add an optional image
1918
After this assignment, you'll learn how to:
2019

2120
- Create a website to showcase your resume
22-
- _Optional_ - Launch your resume website to the Cloud for free
2321

2422
### Prerequisites
2523

@@ -29,7 +27,14 @@ After this assignment, you'll learn how to:
2927

3028
**Step 1:** Create a new GitHub Repository and give it a name `my-resume`
3129

32-
**Step 2:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button
30+
31+
**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
32+
33+
Click the `creating a new file` link, type in the name `index.html` and select the `Commit new file` button
34+
35+
![Create a new file on github.com](../images/new-file-github.com.png)
36+
37+
**Step 3:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button
3338

3439
Copy the url to the repository you just created for your resume site and paste it in the input box:
3540

@@ -39,10 +44,199 @@ _Replace `your-username` with your github username_
3944
https://github.com/your-username/my-resume
4045
```
4146

42-
✅ If succesful, you'll see all files for this repository loaded in the text editor.
43-
44-
![Create resume project outline](../images/resume-website-project.png)
45-
47+
✅ If successful, you'll see your project and the index.html file open up on the text editor on the browser.
48+
49+
![Create a new file](../images/project-on-vscode.dev.png)
50+
51+
52+
**Step 4:** Open the `index.html` file, paste in the code below on your code area and save
53+
54+
<details>
55+
<summary><b>HTML code responsible for the content on your resume website.</b></summary>
56+
57+
<html>
58+
59+
<head>
60+
<link href="style.css" rel="stylesheet">
61+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
62+
<title>Your Name Goes Here!</title>
63+
</head>
64+
<body>
65+
<header id="header">
66+
<!-- resume header with your name and title -->
67+
<h1>Your Name Goes Here!</h1>
68+
<hr>
69+
Your Role!
70+
<hr>
71+
</header>
72+
<main>
73+
<article id="mainLeft">
74+
<section>
75+
<h2>CONTACT</h2>
76+
<!-- contact info including social media -->
77+
<p>
78+
<i class="fa fa-envelope" aria-hidden="true"></i>
79+
<a href="mailto:[email protected] domain">Write your email here</a>
80+
</p>
81+
<p>
82+
<i class="fab fa-github" aria-hidden="true"></i>
83+
<a href="github.com/yourGitHubUsername">Write your username here!</a>
84+
</p>
85+
<p>
86+
<i class="fab fa-linkedin" aria-hidden="true"></i>
87+
<a href="linkedin.com/yourLinkedInUsername">Write your username here!</a>
88+
</p>
89+
</section>
90+
<section>
91+
<h2>SKILLS</h2>
92+
<!-- your skills -->
93+
<ul>
94+
<li>Skill 1!</li>
95+
<li>Skill 2!</li>
96+
<li>Skill 3!</li>
97+
<li>Skill 4!</li>
98+
</ul>
99+
</section>
100+
<section>
101+
<h2>EDUCATION</h2>
102+
<!-- your education -->
103+
<h3>Write your course here!</h3>
104+
<p>
105+
Write your institution here!
106+
</p>
107+
<p>
108+
Start - End Date
109+
</p>
110+
</section>
111+
</article>
112+
<article id="mainRight">
113+
<section>
114+
<h2>ABOUT</h2>
115+
<!-- about you -->
116+
<p>Write a blurb about yourself!</p>
117+
</section>
118+
<section>
119+
<h2>WORK EXPERIENCE</h2>
120+
<!-- your work experience -->
121+
<h3>Job Title</h3>
122+
<p>
123+
Organization Name Goes Here | Start Month – End Month
124+
</p>
125+
<ul>
126+
<li>Task 1 - Write what you did!</li>
127+
<li>Task 2 - Write what you did!</li>
128+
<li>Write the outcomes/impact of your contribution</li>
129+
130+
</ul>
131+
<h3>Job Title 2</h3>
132+
<p>
133+
Organization Name Goes Here | Start Month – End Month
134+
</p>
135+
<ul>
136+
<li>Task 1 - Write what you did!</li>
137+
<li>Task 2 - Write what you did!</li>
138+
<li>Write the outcomes/impact of your contribution</li>
139+
140+
</ul>
141+
</section>
142+
</article>
143+
</main>
144+
</body>
145+
</html>
146+
</details>
147+
148+
Add your resume details to replace the _placeholder text_ on the html code
149+
150+
**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
151+
152+
**Step 6:** Open the `style.css` file, paste in the code below and save
153+
154+
<details>
155+
<summary><b>CSS code to format the layout of the site.</b></summary>
156+
157+
body {
158+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
159+
font-size: 16px;
160+
max-width: 960px;
161+
margin: auto;
162+
}
163+
h1 {
164+
font-size: 3em;
165+
letter-spacing: .6em;
166+
padding-top: 1em;
167+
padding-bottom: 1em;
168+
}
169+
170+
h2 {
171+
font-size: 1.5em;
172+
padding-bottom: 1em;
173+
}
174+
175+
h3 {
176+
font-size: 1em;
177+
padding-bottom: 1em;
178+
}
179+
main {
180+
display: grid;
181+
grid-template-columns: 40% 60%;
182+
margin-top: 3em;
183+
}
184+
header {
185+
text-align: center;
186+
margin: auto 2em;
187+
}
188+
189+
section {
190+
margin: auto 1em 4em 2em;
191+
}
192+
193+
i {
194+
margin-right: .5em;
195+
}
196+
197+
p {
198+
margin: .2em auto
199+
}
200+
201+
hr {
202+
border: none;
203+
background-color: lightgray;
204+
height: 1px;
205+
}
206+
207+
h1, h2, h3 {
208+
font-weight: 100;
209+
margin-bottom: 0;
210+
}
211+
#mainLeft {
212+
border-right: 1px solid lightgray;
213+
}
214+
215+
</details>
216+
217+
**Step 6:** Open the `codeswing.json` file, paste in the code below and save
218+
219+
{
220+
"scripts": [],
221+
"styles": []
222+
}
223+
224+
225+
**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 😃
226+
227+
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.
228+
229+
![Install extensions](../images/install-extension.gif)
230+
231+
This is what you will see on your on your screen after you install the extension.
232+
233+
![Codeswing extension in action](../images/after-codeswing-extension-pb.png)
234+
235+
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.
236+
237+
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.
238+
239+
Congratulations 🎉 You have just created your resume website using vscode.dev in few steps.
46240
## 🚀 Challenge
47241

48242
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.

‎8-code-editor/images/new-file-github.com.png

159 KB
Loading

‎8-code-editor/images/project-on-vscode.dev.png

64.7 KB
Loading

0 commit comments

Comments
 (0)