Welcome to the application for the CEP Software Engineer track! In this assignment, you'll create a simple "About Me" app using HTML, CSS, and JavaScript / jQuery.
To complete the application and submit it, follow the instructions below.
To get started, go to Github.com and sign up for an account. If you're unfamiliar with Github, it may be worthwhile to check out this short article to familiarize yourself with some of the terminology.
This is where you will store your finished application. When you're done with the project, you will submit the link to your repo.
You'll need a code editor in order to complete the project. There are many out there - Sublime, Atom, VSCode etc. If you have a preference, feel free to use it. If not, VSCode is a good choice. Choose your favorite and download it.
All Windows users will need to download bash for Windows to function as their terminal application (Macs come with "Terminal" pre-installed).
You will need to clone this repo.
- Open up your terminal/bash. For Mac can do this with command + space bar and then type 'terminal'. For Windows press the windows key and type 'bash'.
- You can find out the location of your current working directory by typing in
pwd
. - Let's create a new directory to store your coding projects in. Type in
mkdir Projects
. - Type in
ls
and you will see that a new directory called 'Projects' was created. - Switch into that directory by typing in
cd Projects
. - If you type in
ls
again, you'll notice that the folder is empty. - Let's add our first repo to the Projects directory. Navigate to the repo in your browser.
- In the top right corner, click on the button that says "Fork" and then select your github.
- Click on the green button that says "Clone or download" and copy the link.
- On the command line, type in
git clone INSERT LINK
replacing theINSERT LINK
with the link you just copied. - Once it's downloaded, if you type in
ls
again, you'll notice that your project was added to the directory. - Navigate into that project by typing
cd cep-engr-app
. - Open up the project with your code editor.
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.
- Publish your website using github pages. Github Pages
- Pull in data from a public api:
- Find and signup for a free api. List of Public Api's
- Using Ajax or the Fetch API successfully pull in json data to your project.
- Using javascript or jQuery, render the data to the page in a user friendly interface.
- HINT - Not all API's are easy to work with or even functional.
- HINT - Only work with API's that have CORS (Cross-origin Resource Sharing) enabled.
- Extend your design to make it as stylish as possible:
- Draw inspiration from your favorite websites or visit awwards to get inspired.
- Find a fun or interactive jQuery plugin and implement it.
- Think outside the box and push yourself to build something eye catching, interactive and fun.
Once you've completed the above core instructions, you'll need to push up your work to your github repo!
- On the terminal/bash, 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"
replacingMESSAGE
with your commit message. - Type in
git push origin master
to push up all of your work.
Codecademy course HTML Essential Training
Codecademy course JavaScript Essential Training Learn jQuery
Please join the #cep-engr-2019 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.