8-code-editor/1-using-a-code-editor/assignment.md
Transform your career prospects by building a professional resume website that showcases your skills and experience in an interactive, modern format. Instead of sending traditional PDFs, imagine providing recruiters with a sleek, responsive website that demonstrates both your qualifications and your web development capabilities.
This hands-on assignment puts all your VSCode.dev skills into practice while creating something genuinely useful for your career. You'll experience the complete web development workflow ā from repository creation to deployment ā all within your browser.
By completing this project, you'll have a professional online presence that can be easily shared with potential employers, updated as your skills grow, and customized to match your personal brand. This is exactly the kind of practical project that demonstrates real-world web development skills.
After completing this assignment, you'll be able to:
Before starting this assignment, ensure you have:
Let's start by setting up your project foundation. This process mirrors real-world development workflows where projects begin with proper repository initialization and structure planning.
Setting up a dedicated repository ensures your project is properly organized and version-controlled from the beginning.
my-resume (or choose a personalized name like john-smith-resume)š” Repository Naming Tip: Use descriptive, professional names that clearly indicate the project's purpose. This helps when sharing with employers or during portfolio reviews.
Since VSCode.dev requires at least one file to open a repository, we'll create our main HTML file directly on GitHub before switching to the web editor.
index.html as the filename<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Professional Resume</title>
</head>
<body>
<h1>Your Name</h1>
<p>Professional Resume Website</p>
</body>
</html>
Here's what this initial setup accomplishes:
Now that your repository foundation is established, let's transition to VSCode.dev for the main development work. This web-based editor provides all the tools needed for professional web development.
Navigate to vscode.dev in a new browser tab
Click "Open Remote Repository" on the welcome screen
Copy your repository URL from GitHub and paste it into the input field
Format: https://github.com/your-username/my-resume
Replace your-username with your actual GitHub username
Press Enter to load your project
ā
Success indicator: You should see your project files in the Explorer sidebar and index.html available for editing in the main editor area.
What you'll see in the interface:
Replace the placeholder content in index.html with a comprehensive resume structure. This HTML provides the foundation for a professional presentation of your qualifications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 - Professional Resume</title>
</head>
<body>
<header id="header">
<h1>Your Full Name</h1>
<hr>
<p class="role">Your Professional Title</p>
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>CONTACT</h2>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="https://github.com/your-username">github.com/your-username</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="https://linkedin.com/in/your-profile">linkedin.com/in/your-profile</a>
</p>
</section>
<section>
<h2>SKILLS</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript (ES6+)</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
<li>Problem Solving</li>
</ul>
</section>
<section>
<h2>EDUCATION</h2>
<h3>Your Degree or Certification</h3>
<p>Institution Name</p>
<p>Start Date - End Date</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>ABOUT</h2>
<p>Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.</p>
</section>
<section>
<h2>WORK EXPERIENCE</h2>
<div class="job">
<h3>Job Title</h3>
<p class="company">Company Name | Start Date ā End Date</p>
<ul>
<li>Describe a key accomplishment or responsibility</li>
<li>Highlight specific skills or technologies used</li>
<li>Quantify impact where possible (e.g., "Improved efficiency by 25%")</li>
</ul>
</div>
<div class="job">
<h3>Previous Job Title</h3>
<p class="company">Previous Company | Start Date ā End Date</p>
<ul>
<li>Focus on transferable skills and achievements</li>
<li>Demonstrate growth and learning progression</li>
<li>Include any leadership or collaboration experiences</li>
</ul>
</div>
</section>
<section>
<h2>PROJECTS</h2>
<div class="project">
<h3>Project Name</h3>
<p>Brief description of what the project accomplishes and technologies used.</p>
<a href="#" target="_blank">View Project</a>
</div>
</section>
</article>
</main>
</body>
</html>
Customization guidelines:
Professional websites require organized file structures. Create the CSS stylesheet and configuration files needed for a complete project.
style.css (for styling and layout)codeswing.json (for the preview extension configuration)Creating the CSS file (style.css):
/* Modern Resume Styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
max-width: 960px;
margin: 0 auto;
padding: 20px;
color: #333;
background-color: #f9f9f9;
}
/* Header Styling */
header {
text-align: center;
margin-bottom: 3em;
padding: 2em;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 3em;
letter-spacing: 0.1em;
margin-bottom: 0.2em;
font-weight: 300;
}
.role {
font-size: 1.3em;
font-weight: 300;
margin: 1em 0;
}
/* Main Content Layout */
main {
display: grid;
grid-template-columns: 35% 65%;
gap: 3em;
margin-top: 3em;
background: white;
padding: 2em;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Typography */
h2 {
font-size: 1.4em;
font-weight: 600;
margin-bottom: 1em;
color: #667eea;
border-bottom: 2px solid #667eea;
padding-bottom: 0.3em;
}
h3 {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 0.5em;
color: #444;
}
/* Section Styling */
section {
margin-bottom: 2.5em;
}
#mainLeft {
border-right: 1px solid #e0e0e0;
padding-right: 2em;
}
/* Contact Links */
section a {
color: #667eea;
text-decoration: none;
transition: color 0.3s ease;
}
section a:hover {
color: #764ba2;
text-decoration: underline;
}
/* Icons */
i {
margin-right: 0.8em;
width: 20px;
text-align: center;
color: #667eea;
}
/* Lists */
ul {
list-style: none;
padding-left: 0;
}
li {
margin: 0.5em 0;
padding: 0.3em 0;
position: relative;
}
li:before {
content: "āø";
color: #667eea;
margin-right: 0.5em;
}
/* Work Experience */
.job, .project {
margin-bottom: 2em;
padding-bottom: 1.5em;
border-bottom: 1px solid #f0f0f0;
}
.company {
font-style: italic;
color: #666;
margin-bottom: 0.5em;
}
/* Responsive Design */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
gap: 2em;
}
#mainLeft {
border-right: none;
border-bottom: 1px solid #e0e0e0;
padding-right: 0;
padding-bottom: 2em;
}
h1 {
font-size: 2.2em;
}
body {
padding: 10px;
}
}
/* Print Styles */
@media print {
body {
background: white;
color: black;
font-size: 12pt;
}
header {
background: none;
color: black;
box-shadow: none;
}
main {
box-shadow: none;
}
}
Creating the configuration file (codeswing.json):
{
"scripts": [],
"styles": []
}
Understanding the CSS features:
Extensions enhance your development experience by providing live preview capabilities and improved workflow tools. The CodeSwing extension is particularly useful for web development projects.
Installing the CodeSwing Extension:
What CodeSwing provides:
Immediate results after installation: Once CodeSwing is installed, you'll see a live preview of your resume website appear in the editor. This allows you to see exactly how your site looks as you make changes.
Understanding the enhanced interface:
Now that your resume website is complete, use Git to save your work and make it available online.
Committing your changes:
Effective commit message examples:
š” Professional Tip: Good commit messages help track your project's evolution and demonstrate attention to detail ā qualities that employers value.
Accessing your published site: Once committed, you can return to your GitHub repository using the hamburger menu (ā°) in the top-left corner. Your resume website is now version-controlled and ready for deployment or sharing.
Congratulations! š You've successfully created a professional resume website using VSCode.dev. Your project demonstrates: Technical skills demonstrated:
Professional outcomes achieved:
To make your resume accessible to employers, consider these hosting options:
GitHub Pages (Recommended):
https://your-username.github.io/my-resumeAlternative platforms:
Continue developing your skills by adding these features:
Technical improvements:
Content enhancements:
Use the Agent mode to complete the following challenge:
Description: Enhance your resume website with advanced features that demonstrate professional web development capabilities and modern design principles.
Prompt: Building on your existing resume website, implement these advanced features:
Your enhanced website should demonstrate mastery of modern web development practices including responsive design, JavaScript interactivity, and professional deployment workflows.
Ready to take your skills further? Try these advanced challenges:
š± Mobile-First Redesign: Completely rebuild your site using a mobile-first approach with CSS Grid and Flexbox
š SEO Optimization: Implement comprehensive SEO including meta tags, structured data, and performance optimization
š Multi-language Support: Add internationalization features to support multiple languages
š Analytics Integration: Add Google Analytics to track visitor engagement and optimize your content
š Performance Optimization: Achieve perfect Lighthouse scores across all categories
Expand your knowledge with these resources:
Advanced VSCode.dev Features:
Web Development Best Practices:
Professional Development:
Your Next Steps: Share your resume website with friends, family, or mentors for feedback. Use their suggestions to iterate and improve your design. Remember, this project is not just a resume ā it's a demonstration of your growth as a web developer!