>> Hello everyone,
and welcome to VS Code Day 2022.
I hope you're enjoying the day so far.
My name is Ornella Altunyan
and I'm a Cloud Developer Advocate here at Microsoft.
You've seen us talk a lot about vscode.dev,
but today I'm going to show you
what you can actually accomplish using it.
I'm going to give you a crash course
in how you can create a resume website
completely in the browser using the power of HTML,
CSS, vscode.dev, and GitHub pages.
Having your personalized resume website
is a great way to stand out to recruiters,
and you may even learn a thing or two in the process.
Let's go ahead and get started,
and the first thing we're going to do
is create a new repository on GitHub.
Let's call it resume.
Let's make it public and add a README
and we are going to create this repository
and then open it in vscode.dev.
An easy way you can do that
is just to put vscode.dev in front of GitHub URL,
but you can also go to vscode.dev
and then use the GitHub extensions to open your remote repository.
We're going to be working with HTML and CSS files in this session.
To do that, we're going to download the CodeSwing extension,
which is this really awesome extension
that lets us live preview the files.
Once we have that installed,
we're ready to create our first page.
If we open the command palette,
we'll initialize the workspace as a Swing, HTML-Only.
Then we have an index.html file
and we're going to put
the skeleton of our resume in here, so all of the content.
I'm going to go ahead and paste in this skeleton HTML
and you'll get to see it pretty immediately
on the right hand side of the pane,
which I think is really cool.
Another awesome thing about CodeSwing is that
as you update this HTML,
for example, if I put my name in right here,
you'll be able to see that instantly on the right hand side.
If you're new to HTML, it can be really fun to play around,
get it to be in exactly the structure that you like
and then get to see the preview immediately on the right hand side.
You'll notice that it's not the prettiest resume in the world.
The next thing that we're going to do
is add a little bit of CSS to spice it up.
We'll go over to the File Explorer
and just create a new file called style.css.
Then into that file, we'll drop some styling code,
which will make our resume look really pretty.
There we go, boom,
so now we have a pretty good looking resume.
We are now going to just commit those changes to GitHub.
Obviously, if you're working on this
for your own personal resume,
you're going to want to actually go in
and add the about section
and all of your job experience and stuff like that.
For the purposes of this session,
we're just going to move on
to how we can make that into a web page.
Let's commit our changes,
head over to service control
and just type in a little message,
add resume content, maybe not in caps,
and then we're going to commit that.
Those changes will go directly to your repository on GitHub,
which is really nice.
To make the web page,
we're going to go over to GitHub,
open that repo once more,
and we're going to use a built-in GitHub functionality
called GitHub Pages.
Once we get over to our resume repo,
we're going to head over to Settings
and you'll see all of the content we just added.
It's right there.
We'll go over to Settings and then we'll go to Pages,
and then we'll set the source of our GitHub Pages
to the main branch
because that's where we wrote all of our code,
in the root directory, and just hit "Save".
You automatically will get a link
to where your website is going to be published.
Let's just copy that real quick.
Then the way that GitHub Pages works
is actually through GitHub Actions.
If we go over to Actions,
we will be able to see the workflow running.
Right now, it's in progress
and we'll just need to wait until there's a little green check.
Then that means our web page is ready to view.
This workflow will kick off every time you commit a change.
Let's hop over to our web page and boom,
there is our resume.
You can send anyone that link
and they'll be able to access your beautiful online-hosted resume.
Thanks so much for joining my session.
We're so excited to continue enabling you to do awesome things
with vscode.dev completely in the browser.
Now I'm happy to answer any questions.