In this assignment you will:
- Install Git and make a Github account
- Install VS Code and some extensions
- Set up and deploy a personal portfolio site to document your work in the class
If you run into any issues, please ask questions in the #questions-and-answers channel on Discord. If you solve an issue or learn something that might help your fellow classmates, please post it in the #tips-and-tricks channel.
Follow the instructions in Canvas to submit a link to your portfolio website.
Make a Github account and install Github Desktop. This should install git, but in past classes some people using MacOS ran into an issue where git did not install correctly. If you are having issues with git, try following this guide for your operating system.
We will be using Visual Studio Code (generally shortened to VS Code). VS Code is a highly extensible text editor. This means that its base function is quite simple: you can open and edit files. You can install extensions via the extension marketplace, which let you add bits of functionality as you need them, such as support for different languages.
Download and install Visual Studio Code..
For this to work correctly on Mac OS, you also need to have XCode installed.
If you have a different editor preference (e.g., Sublime), you are welcome to use it.
Once you have installed VSCode, sign in with your Github account.
Install the following three extensions (helpful for the basic web development we will be doing) from the extension marketplace:
Finally, do a bit of customization and install a color theme! There are many VS
Code themes available. For fun, peruse a few (you can do this by clicking the
"filter" button and choosing Category > Themes) and pick one, such as:
- Dracula - my long-time favorite
- Monokai Pro - a nice-looking option
- Solarized Dark - built into VS Code, used to be my previous go-to
- Nord - Too low-contrast for me, but I use it for other applications
- Gruvbox - A fun retro feel
We will be using Github pages to host the portfolio sites where you will document your work for the class.
- First, create a new repository by clicking the plus button at the top right of the Github page.
- On the repository creation page, name your repository
username.github.io, where username is your GitHub username. IMPORTANT: ensure you enterusername.github.iointo the box - don't just enter.github.io. You can leave the rest of the settings as default. - Ensure that you set the repository to public (this should be the default option).
- Tick the box to "Add a README file"
- Click the "Create repository" button. You should be redirected to your new repository.
If you are comfortable working with git from the command line, feel free to
clone the repository that way (using git clone repositoryname). Alternatively,
you can clone your repo from VS Code's built-in source control interface:
- In VS Code, hit
Control/Command-Shift-Pto open the command palette. Start typinggit:Clone. The autocomplete option should show up quickly, use the arrow keys to navigate to it and hit enter. - Select
Clone from GitHub. Your available repositories should show up; it might take a second. You also might need to sign in to VS Code with your Github credentials. - In the dropdown menu, select the repository you just created and choose a location on your computer to clone it to. I use a folder called "code" in my home directory to store all of my active projects.
- VS Code will ask you if you want to open the cloned repository. Select "Open in new window". VSCode will open a new window.
Copy the contents of this repository (the html files, the image, and the css file) into the your new portfolio repo folder. You can download this repo as a zip file by going to the main page, clicking the green "Code" dropdown, and selecting "Download ZIP".
Once you have copied the files (and assuming you have installed the VSCode Live
Server extension), right click on index.html in the explorer side bar and
click "Open with Live Server". The page should open automatically in your
browser. You can now edit the files containing your site code and your changes
will immediately update the browser - no need to restart the server.
Now let's customize and build your portfolio site! Start by reading through the HTML and understanding how each portion corresponds to what you see in your browser. You can now begin editing your site by tweaking the template.
Edit the index.html file to include your name and 1-2 sentences about yourself. Replace the image of a red panda with an image of yourself (or an avatar).
These are instructions to commit and push your changes using VSCode's built-in source control interface. You can also commit and push your work from the command line if you are comfortable using it (and we encourage practicing this so as to not be overly-reliant on the GUI).
- Open the "Source control" panel in VS Code's left sidebar. You should see a
list of changes you have made. This panel shows information similar to the
output of the command
git status. - Hover over the header that says "Changes". You should see a Plus icon (+)
appear to the right. Click it to stage your changes. This is the equivalent
to running
git add --allorgit add .in the terminal. - Enter a commit message (e.g. "Testing my portfolio site") in the text entry
box above (which should say "message"), and click the "Commit" button. This
is equivalent to running
git commit -m "my commit message"in the terminal. - The "Commit" button should turn into a button that says "sync changes" -
click it. This is equivalent to running
git push. This will push your work to your remote repository that is stored on Github's servers. - Assuming you are successful, you should see the example site online at username.github.io in a few minutes! Turn in a link to your site on Canvas.
Here are some resources you can use while you customize your site. The MDN Web docs are a fantastic resource and one of my personal favorites. Their getting started guide is a great introduction to these various technologies and how they fit together. The "Getting started" covers most of what you might need to know when editing your site to turn in your work, particularly the following articles:
- Dealing with files - to understand how files are structured
- HTML Basics - to get an overview of how an HTML document is structured and what tags are available to you
- CSS Basics - to understand how HTML can be styled
- How the web works - to understand the grand scheme
The following sections on HTML and CSS are much longer. Look at the topics listed in the sidebar and feel free to read any articles that look interesting. The articles that are probably most useful for you in this class are: