创建使用vscode.dev的简历网站

文档摘要

创建使用vscode.dev的简历网站如果招聘人员要你的简历，而你给他们发送一个网址，那该有多酷？目标完成此任务后，您将学习如何：创建一个展示您的简历的网站前提条件一个GitHub账户。访问 GitHub 并创建一个账户（如果还没有的话）。步骤步骤 1: 创建一个新的GitHub仓库并为其命名步骤 2: 在您的仓库中创建一个文件。由于您不能在vscode.dev上打开空仓库，因此我们需要在这个阶段添加至少一个文件。点击链接，输入名称，然后选择按钮。在github.com上创建新文件步骤 3: 打开 VSCode.dev 并选择按钮。

创建使用vscode.dev的简历网站

如果招聘人员要你的简历，而你给他们发送一个网址，那该有多酷？

目标

完成此任务后，您将学习如何：

创建一个展示您的简历的网站

前提条件

一个GitHub账户。访问 GitHub 并创建一个账户（如果还没有的话）。

步骤

步骤 1: 创建一个新的GitHub仓库并为其命名 my-resume

步骤 2: 在您的仓库中创建一个 index.html 文件。由于您不能在vscode.dev上打开空仓库，因此我们需要在这个阶段添加至少一个文件。

点击 creating a new file 链接，输入名称 index.html，然后选择 Commit new file 按钮。

在github.com上创建新文件

步骤 3: 打开 VSCode.dev 并选择 Open Remote Repository 按钮。

将您刚刚创建的简历网站仓库的URL复制并粘贴到输入框中：

将 your-username 替换为您的GitHub用户名


https://github.com/your-username/my-resume

✅ 如果成功，您将在浏览器中的文本编辑器中看到您的项目和index.html文件。

创建新文件

步骤 4: 打开 index.html 文件，在代码区域粘贴下面的代码并保存。

负责您简历网站内容的HTML代码。


    <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>您的名字！</title>
        </head>
        <body>
            <header id="header">
                <!-- 包含您的名字和头衔的简历头部 -->
                <h1>您的名字！</h1>
                <hr>
                您的角色！
                <hr>
            </header>
            <main>
                <article id="mainLeft">
                    <section>
                        <h2>联系方式</h2>
                        <!-- 联系信息，包括社交媒体 -->
                        <p>
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                            <a href="mailto:username@domain.top-level domain">在这里写您的电子邮件</a>
                        </p>
                        <p>
                            <i class="fab fa-github" aria-hidden="true"></i>
                            <a href="github.com/yourGitHubUsername">在这里写您的用户名！</a>
                        </p>
                        <p>
                            <i class="fab fa-linkedin" aria-hidden="true"></i>
                            <a href="linkedin.com/yourLinkedInUsername">在这里写您的用户名！</a>
                        </p>
                    </section>
                    <section>
                        <h2>技能</h2>
                        <!-- 您的技能 -->
                        <ul>
                            <li>技能1！</li>
                            <li>技能2！</li>
                            <li>技能3！</li>
                            <li>技能4！</li>
                        </ul>
                    </section>
                    <section>
                        <h2>教育背景</h2>
                        <!-- 您的教育背景 -->
                        <h3>在这里写您的课程！</h3>
                        <p>
                            在这里写您的机构！
                        </p>
                        <p>
                            开始日期 - 结束日期
                        </p>
                    </section>            
                </article>
                <article id="mainRight">
                    <section>
                        <h2>关于我</h2>
                        <!-- 关于您自己 -->
                        <p>在这里写一段关于您自己的介绍！</p>
                    </section>
                    <section>
                        <h2>工作经验</h2>
                        <!-- 您的工作经验 -->
                        <h3>职位名称</h3>
                        <p>
                            组织名称 | 开始月份 – 结束月份
                        </p>
                        <ul>
                                <li>任务1 - 写下您做了什么！</li>
                                <li>任务2 - 写下您做了什么！</li>
                                <li>写下您的贡献成果/影响！</li>
                                
                        </ul>
                        <h3>职位名称2</h3>
                        <p>
                            组织名称 | 开始月份 – 结束月份
                        </p>
                        <ul>
                                <li>任务1 - 写下您做了什么！</li>
                                <li>任务2 - 写下您做了什么！</li>
                                <li>写下您的贡献成果/影响！</li>
                                
                        </ul>
                    </section>
                </article>
            </main>
        </body>
    </html>

将您的简历详细信息替换掉HTML代码中的 占位符文本

步骤 5: 将鼠标悬停在My-Resume文件夹上，点击 新建文件... 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扩展 to visualize the resume website on the code area.

Click the 扩展 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. Immediately after installing the extension, observe your code area to see the changes to your project

Install extensions

This is what you will see on your on your screen after you install the extension.

Codeswing extension in action

If you are satisfied with the changes you made, hover on the 更改 folder and click the + button to stage the changes.

Type in a commit message (A description of the change you have made to the project) and commit your changes by clicking the 检查。完成项目工作后，单击左上角的汉堡菜单图标返回GitHub上的仓库。

恭喜您已经使用vscode.dev创建了您的简历网站。只需几步！

挑战

打开一个您有权限修改的远程仓库，并更新一些文件。接下来，尝试创建一个包含您更改的新分支并发起一个Pull Request。

复习与自学

阅读更多关于 VSCode.dev 及其其他功能的信息。

声明:
本文件灏天文库团队进行了翻译。尽管我们力求准确，但请注意，翻译可能包含错误或不准确之处。原文档以其原始语言为准。我们不对因使用此翻译而产生的任何误解或误译负责。