Please watch all the videos for Week 1 on the Tier 1 site before starting the assignment.
These videos contain important information that will help you complete the assignment. Feel free to refer back to the videos whenever you need them!
For the assignment this week, you will practice using the tools you saw in the videos. You should have worked along with them as you watched. If you did, the following should be somewhat familiar.
You're going to:
- use git to fork/clone a repository (aka repo) from GitHub and get your work published back to your GitHub account
- set up files and connect them
- edit the HTML and CSS
- test your work in the browser
- use git to "save" your work
- use the command line and your Mac's built-in Terminal
- turn your assignment in through Prime's Assignment Portal
Using your new git and GitHub skills, Fork this repo to your own GitHub account. Then Clone it to your own computer. You are going to end up cloning 80+ repos at Prime so try to stay organized!
We recommend making a "prime" folder inside your "home" directory, which will be named your username. Inside of this, perhaps a "tier1" folder in which you can keep all of your Tier 1 work.
Wherever you put it, use your Terminal to cd into your new cloned folder of this assignment.
You are going to be writing some code in VSCode, so open this entire folder in VSCode.
Do one of the following:
- Using the Terminal command of
code .OR - Using Finder/folder to drag the assignment folder to VSCode in your Dock OR
- Open VSCode first, then use the File > Open command to choose your assignment folder
Inside of project you just opened in VSCode, is an assignment folder.
Inside of this folder, we've provided you with a few files, some of those files are inside of other folders.
IMPORTANT: Don't edit any files other than those inside of the assignment folder, and you should not need to move files around inside the folder.
- assignment/index.html (base functionality - required)
- assignment/helloWorld.js (base functionality - required)
- assignment/style.css (base functionality - required)
- assignment/checkpoints/terminal.txt (base functionality - required)
Inside of the index.html file are comments with tasks for you to complete. Write the code below the comment (no need to delete the comment), like this:
<!-- Create a header with an h1 containing your name -->
<header>
<h1>Your Name Here</h1>
</header>Feel free to add more content than just what is in the comments (but the content laid out in the comments is required)!
As you make changes, it's important to check your work often. Our mantra is going to be "code a little then test!" Over and over again.
To test your work, open your index.html file in Chrome. You should see all of the content you created in your HTML file.
If you make more changes in VSCode, save your work, then Refresh the browser to see them.
When you're done with your HTML, make a "commit" with git.
Definitly refer to the Git Practical video on this! You'll be making commits all the time so eventually you'll get this memorized. For now, take it one step at a time!
Here is the pattern. Be sure you are in the project folder!
- write some code
- test your code
- in Terminal:
git add . - in Terminal:
git commit -m "what you changed" - back to step 1!
Now that we have content in our HTML file, let's make it look nice with some styling!
- The CSS file is already linked to the HTML file using a
linktag. - There are comments in the
style.cssfile. You can write your styles below the comments. - You can also add more styles if you want, but make sure you include the styles in the directions, those are required!
When you're done, make another "commit" with git.
Here is an example of what your assignment could look like:
The videos this week introduced you to working with the command line through Terminal. Answer the questions below to check how much you learned.
In the checkpoints folder, you will find a terminal.txt file. This is just a plain old file of characters. No code, just text.
- Open the
terminal.txtfile in VSCode. VSCode can open many kinds of files! - In the
terminal.txt, answer all of the questions about the Terminal. All you need to do is type your answer below each question!
If you're unsure, feel free to do some research, or write that you're not sure. All we're asking for is you try your best!
When you're done, make another "commit" with git.
Our assignment also contains a helloWorld.js file. A "hello world" is a common first step in learning to code, and the first program many programmers write.
In the video for this week, we used a console.log() to get messages from our JavaScript file to display in the browser's console interface.
- You will need to source in the
helloWorld.jsfile into yourindex.htmlfile. - Refer back to the video to cover how to source in and get "hello world" to log in the browser console for your assignment! More information on
console.logcan be found here. - Be sure to test your work by opening your browser console for this assignment. You should be able to see the text "hello world" or whatever you logged!
When you're done, make another "commit" with git.
Now that your assignment is done, we'll use git to push your work to GitHub.
You can find detailed instructions on how to do this in this week's video content.
You will need to "submit" a link to your GitHub repo containing your work for this assignment. Prime will then use this link to find and check out your assignment!
We won't know you're done until you Submit it in the Portal.
You can find detailed instructions on how to do this in this week's video content.
Make sure that you answer this week's Slack discussion question (found each week in the left sidebar of the Tier 1 site) in your cohort's Slack channel!