Skip to content

ideascomealive/cep-engr-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 

Repository files navigation

Career Exploration Program - 2019 Software Engineering Application Project

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.

Getting Started

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

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 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.

Downloading a code editor

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.

Downloading a terminal app (Windows Only)

All Windows users will need to download bash for Windows to function as their terminal application (Macs come with "Terminal" pre-installed).

Cloning the repo

You will need to clone this repo.

  1. 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'.
  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 in your browser.
  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 code editor.

Core 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.

Attempt to Complete at Least 1 Challenge Below:

  • Publish your website using github pages. Github Pages
  • Pull in data from a public api:
    1. Find and signup for a free api. List of Public Api's
    2. Using Ajax or the Fetch API successfully pull in json data to your project.
    3. 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.

Finishing up

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" 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 Learn jQuery

Support

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.

About

2019 Career Exploration Program - Application Project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages