TESTING OUT GITHUB DESKTOP

Career Exploration Program - Software Engineer

Welcome to the application for the CEP Software Engineer track! In this app, you'll create a simple "About Me" app using HTML, CSS, and JavaScript.

Getting Started

To complete the application and submit it, follow the instructions below.

The commands and keyboard shortcuts are for Mac users. They may not be accurate for Windows users.

Creating your Github account

To get started, go to Github.com and sign up for an account. If you're unfamiliar with Github, it may be worthwhile to checkout this short article to familiarize yourself with some of the terminology.

This is where you will store your finished application. When you're doing with the project, you will submit the link to your repo.

Downloading an editor

You'll need a code editor in order to complete the project. There are many out there - Sublime, Atom, etc. If you have a preference, feel free to use it. If not, Atom is a good choice. Choose your favorite and download it.

Cloning the repo

You will need to clone this repo.

1. Open up your terminal. You can do this with command + space bar and then type in 'terminal'.
2. You can find out the location of your current working directory by typing in pwd.
3. Let's create a new directory to store your coding projects in. Type in mkdir Projects.
4. Type in ls and you will see that a new directory called 'Projects' was created.
5. Switch into that directory by typing in cd Projects.
6. If you type in ls again, you'll notice that the folder is empty.
7. Let's add our first repo to the Projects directory. Navigate to the repo.
8. In the top right corner, click on the button that says "Fork" and then select your github.
9. Click on the green button that says "Clone or download" and copy the link.
10. On the command line, type in git clone INSERT LINK replacing the INSERT LINK with the link you just copied.
11. Once it's downloaded, if you type in ls again, you'll notice that your project was added to the directory.
12. Navigate into that project by typing cd cep-engr-app.
13. Open up the project with your editor.

Instructions

For an example project, check out example.gif in the root directory.

All of your files are in the src directory. You'll see that you have one file for HTML, one for CSS, and one for JavaScript. You also have an img directory to store any images that you use.

Here are the mandatory guidelines:

• Include a header with an image as the background
• Include an h1 with a title for your website
• Include an image. It can be anything -- a headshot, a picture of your favorite memory, a picture of your last trip, etc.
• Include 5 buttons - First Name, Last Name, Job Title, Home Office, and Tell Me More
• Create a JavaScript object in the init.js file with the following fields: firstName, lastName, jobTitle, homeOffice, tellMeMore
• Using jQuery, as the user clicks on the button, reveal the appropriate information using the values from the JS object

Feel free to take creative license however you want! The point of the exercise is to get a sense that you know the basics of HTML, CSS, and JS, but your page does not need to look like the example.

Finishing up

Once you've completed the above instructions, you'll need to push up your work to your repo!

• On the command line, type in git status. You'll see all of the files that you have created or changed.
• Type in git add . to add all of those files to your commit.
• Type in git commit -m "MESSAGE" replacing MESSAGE with your commit message.
• Type in git push origin master to push up all of your work.

Resources

HTML & CSS

Codecademy course HTML Essential Training

JavaScript

Codecademy course JavaScript Essential Training

Support

Please join the #cep-engr-2018 Slack channel. If you get stuck with any of the pre-work, feel free to reach out here. This channel has your fellow cohort mates, as well as current engineers who are happy to help you get unstuck.