├── .gitignore ├── README.markdown ├── app ├── README.markdown ├── assets │ ├── images │ │ ├── header.jpg │ │ ├── header_text.jpg │ │ ├── headings │ │ │ ├── heading_bs1.png │ │ │ ├── heading_bs2.png │ │ │ ├── heading_bs3.png │ │ │ ├── heading_bs4.png │ │ │ ├── heading_bs5.png │ │ │ ├── heading_bs6.png │ │ │ ├── heading_bs7.png │ │ │ └── headings.png │ │ ├── icons │ │ │ ├── icons.psd │ │ │ ├── individual │ │ │ │ ├── icons_large_bs1.png │ │ │ │ ├── icons_large_bs1_blue.png │ │ │ │ ├── icons_large_bs2.png │ │ │ │ ├── icons_large_bs2_blue.png │ │ │ │ ├── icons_large_bs3.png │ │ │ │ ├── icons_large_bs3_blue.png │ │ │ │ ├── icons_large_bs4.png │ │ │ │ ├── icons_large_bs4_blue.png │ │ │ │ ├── icons_large_bs5.png │ │ │ │ ├── icons_large_bs5_blue.png │ │ │ │ ├── icons_large_bs6.png │ │ │ │ ├── icons_large_bs6_blue.png │ │ │ │ ├── icons_large_bs7.png │ │ │ │ ├── icons_large_bs7_blue.png │ │ │ │ ├── icons_small_bs1.png │ │ │ │ ├── icons_small_bs1_blue.png │ │ │ │ ├── icons_small_bs2.png │ │ │ │ ├── icons_small_bs2_blue.png │ │ │ │ ├── icons_small_bs3.png │ │ │ │ ├── icons_small_bs3_blue.png │ │ │ │ ├── icons_small_bs4.png │ │ │ │ ├── icons_small_bs4_blue.png │ │ │ │ ├── icons_small_bs5.png │ │ │ │ ├── icons_small_bs5_blue.png │ │ │ │ ├── icons_small_bs6.png │ │ │ │ ├── icons_small_bs6_blue.png │ │ │ │ ├── icons_small_bs7.png │ │ │ │ └── icons_small_bs7_blue.png │ │ │ └── sprites │ │ │ │ ├── icons_large.png │ │ │ │ └── icons_small.png │ │ ├── shadow_bottom.jpg │ │ ├── shadow_left.jpg │ │ ├── shadow_left_nav.jpg │ │ └── shadow_right.jpg │ ├── javascripts │ │ └── .keep │ └── stylesheets │ │ └── .keep ├── baby-steps.json └── index.html ├── package.json └── resources ├── annotated-mockup.jpg ├── body-copy.txt ├── mockup.jpg └── transition-example.gif /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | Front-end Developer Exercise 2 | ============================ 3 | 4 | Copyright © 2014 Lampo Licensing, LLC. All rights reserved. 5 | 6 | Objective 7 | --------- 8 | 9 | Build a web page that will provide information about The 7 Baby Steps. 10 | 11 | Requirements 12 | ------------ 13 | 14 | * Fork this repository and submit your finished work as a pull request. 15 | * Your submission should look like the provided mockup. 16 | * There should be an animation when navigating between the baby steps. You are free to come up with what this transition looks like (and an example has been provided). 17 | * The "Dynamic Content" user story included at the end of this README should be completed as a part of your submission. 18 | * Treat your final deliverable as if it were going to be deployed to production. 19 | * Instead of code comments, please document your submission by creating a README in the `./app/` directory. Feel free to include anything in it that you think might be helpful in evaluating your work. 20 | * If you use a preprocessor or some kind of build tool, include the source code as well as the compiled output. 21 | 22 | Success Criteria 23 | ---------------- 24 | 25 | * The markup should be semantic and accessible. 26 | * The page should be presentable in all modern browsers as well as IE 9+, though not necessarily visually identical across the board. Please document intentional deviations. 27 | * You should __not__ create a mobile/responsive version, as we will not be giving any credit for it. 28 | * The page should be usable without JavaScript, though not necessarily functionally identical (e.g. the Dynamic Content user story requires JavaScript). Please document intentional deviations. 29 | * You should __not__ use a single-page application framework (e.g. Angular, Ember, React), though you can use any other libraries that you need (e.g. jQuery, Lodash, etc.). 30 | 31 | Resources 32 | --------- 33 | 34 | The visual design team has provided several deliverables to help with construction of the page: 35 | * a mockup of what the finished product should look like: `./resources/mockup.jpg` 36 | * an annotated mockup for more detailed information on fonts/measurements/etc: `./resources/annotated-mockup.jpg`. 37 | * an example of a possible transition for the navigation menu: `./resources/transition-example.gif`. 38 | 39 | All of the copy can be found at `./resources/body-copy.txt`. 40 | 41 | Any image you need can be found in the `./app/assets/images` directory. Some images have been sliced in multiple ways, so use whichever you feel make the most sense to use, or not at all if you feel you don't need to. 42 | 43 | Server 44 | ------ 45 | 46 | This package is configured with a basic web server. You'll first need to install [Node.js](http://nodejs.org/). Once you have Node.js installed and have cloned this repo, then you can run the following commands to start the server (on port 8080 by default). 47 | 48 | ```sh 49 | npm install 50 | npm start 51 | ``` 52 | 53 | You should see "The server is running!" when you visit http://localhost:8080. Use CTRL-C to stop the server when you are done. 54 | 55 | Feel free to add any additional build infrastructure that you would like, as long as the page is still accessible by running `npm start`. Tests and linters, for example, are welcomed (but not required). 56 | 57 | Dynamic Content 58 | --------------- 59 | 60 | As a user I want to be encouraged by how many friends of mine are also going through the selected baby step. I don't need to see all my friends; just a summary of who is in the same baby step. 61 | 62 | You should make an AJAX request for the data from `/app/baby-steps.json`, which includes a list of friend objects. Each object contains names and their baby step. Based on the data returned, you will need to show the following information to the user, sorted by last name ascending. 63 | 64 | ### Message Logic 65 | 66 | * if 0 friends, then don't show any message 67 | * if 1 friend, then show "Paul Taylor is also in Baby Step 2" 68 | * if 2 friends, then show "Thomas Harris and Sharon Thomas are also in Baby Step 3" 69 | * if 3 friends, then show "Deborah Lee, Shirley Perez, and 1 other friend are also in Baby Step 4" 70 | * if 4 or more friends, then show "Patricia Allen, Matthew Garcia, and 2 other friends are also in Baby Step 5" 71 | 72 | Consult the mockups about where to put this information and how to style it. 73 | -------------------------------------------------------------------------------- /app/README.markdown: -------------------------------------------------------------------------------- 1 | Document your submission here (optional, but recommended) 2 | -------------------------------------------------------------------------------- /app/assets/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/header.jpg -------------------------------------------------------------------------------- /app/assets/images/header_text.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/header_text.jpg -------------------------------------------------------------------------------- /app/assets/images/headings/heading_bs1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/headings/heading_bs1.png -------------------------------------------------------------------------------- /app/assets/images/headings/heading_bs2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/headings/heading_bs2.png -------------------------------------------------------------------------------- /app/assets/images/headings/heading_bs3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/headings/heading_bs3.png -------------------------------------------------------------------------------- /app/assets/images/headings/heading_bs4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/headings/heading_bs4.png -------------------------------------------------------------------------------- /app/assets/images/headings/heading_bs5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/headings/heading_bs5.png -------------------------------------------------------------------------------- /app/assets/images/headings/heading_bs6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/headings/heading_bs6.png -------------------------------------------------------------------------------- /app/assets/images/headings/heading_bs7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/headings/heading_bs7.png -------------------------------------------------------------------------------- /app/assets/images/headings/headings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/headings/headings.png -------------------------------------------------------------------------------- /app/assets/images/icons/icons.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/icons.psd -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs1.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs1_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs1_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs2.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs2_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs2_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs3.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs3_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs3_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs4.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs4_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs4_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs5.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs5_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs5_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs6.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs6_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs6_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs7.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_large_bs7_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_large_bs7_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs1.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs1_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs1_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs2.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs2_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs2_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs3.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs3_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs3_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs4.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs4_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs4_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs5.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs5_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs5_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs6.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs6_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs6_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs7.png -------------------------------------------------------------------------------- /app/assets/images/icons/individual/icons_small_bs7_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/individual/icons_small_bs7_blue.png -------------------------------------------------------------------------------- /app/assets/images/icons/sprites/icons_large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/sprites/icons_large.png -------------------------------------------------------------------------------- /app/assets/images/icons/sprites/icons_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/icons/sprites/icons_small.png -------------------------------------------------------------------------------- /app/assets/images/shadow_bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/shadow_bottom.jpg -------------------------------------------------------------------------------- /app/assets/images/shadow_left.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/shadow_left.jpg -------------------------------------------------------------------------------- /app/assets/images/shadow_left_nav.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/shadow_left_nav.jpg -------------------------------------------------------------------------------- /app/assets/images/shadow_right.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/images/shadow_right.jpg -------------------------------------------------------------------------------- /app/assets/javascripts/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/javascripts/.keep -------------------------------------------------------------------------------- /app/assets/stylesheets/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/app/assets/stylesheets/.keep -------------------------------------------------------------------------------- /app/baby-steps.json: -------------------------------------------------------------------------------- 1 | { 2 | "friends": [ 3 | { "firstName" : "Paul", "lastName" : "Taylor", "babyStep": 2 }, 4 | { "firstName" : "Sharon", "lastName" : "Thomas", "babyStep": 3 }, 5 | { "firstName" : "Thomas", "lastName" : "Harris", "babyStep": 3 }, 6 | { "firstName" : "Deborah", "lastName" : "Lee", "babyStep": 4 }, 7 | { "firstName" : "Mark", "lastName" : "Young", "babyStep": 4 }, 8 | { "firstName" : "Shirley", "lastName" : "Perez", "babyStep": 4 }, 9 | { "firstName" : "Joseph", "lastName" : "Lee", "babyStep": 5 }, 10 | { "firstName" : "Mary", "lastName" : "White", "babyStep": 5 }, 11 | { "firstName" : "Matthew", "lastName" : "Garcia", "babyStep": 5 }, 12 | { "firstName" : "Patricia", "lastName" : "Allen", "babyStep": 5 }, 13 | { "firstName" : "Larry", "lastName" : "Robinson", "babyStep": 6 }, 14 | { "firstName" : "Kimberly", "lastName" : "Lopez", "babyStep": 6 }, 15 | { "firstName" : "Jose", "lastName" : "Martinez", "babyStep": 6 }, 16 | { "firstName" : "Deborah", "lastName" : "Walker", "babyStep": 6 }, 17 | { "firstName" : "Joseph", "lastName" : "Lopez", "babyStep": 6 }, 18 | { "firstName" : "Dorothy", "lastName" : "Moore", "babyStep": 7 }, 19 | { "firstName" : "Jose", "lastName" : "Jackson", "babyStep": 7 }, 20 | { "firstName" : "Karen", "lastName" : "Lee", "babyStep": 7 }, 21 | { "firstName" : "Paul", "lastName" : "Taylor", "babyStep": 7 }, 22 | { "firstName" : "Amy", "lastName" : "Gonzalez", "babyStep": 7 }, 23 | { "firstName" : "Richard", "lastName" : "Martinez", "babyStep": 7 } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | Front-End Developer Exercise 3 | The server is running! 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "front-end-developer-exercise", 3 | "version": "1.0.0", 4 | "repository": { 5 | "type": "git", 6 | "url": "git://github.com/developwithpurpose/front-end-developer-exercise.git" 7 | }, 8 | "scripts": { 9 | "start": "http-server ./app -d false" 10 | }, 11 | "devDependencies": { 12 | "http-server": "^0.8.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /resources/annotated-mockup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/resources/annotated-mockup.jpg -------------------------------------------------------------------------------- /resources/body-copy.txt: -------------------------------------------------------------------------------- 1 | The Seven Baby Steps 2 | 3 | Baby Step 1 4 | $1,000 Emergency Fund 5 | 6 | An emergency fund is for those unexpected events in life that you can’t plan for: the loss of a job, an unexpected pregnancy, a faulty car transmission, and the list goes on and on. It’s not a matter of if these events will happen; it’s simply a matter of when they will happen. 7 | 8 | This beginning emergency fund will keep life’s little Murphies from turning into new debt while you work off the old debt. If a real emergency happens, you can handle it with your emergency fund. No more borrowing. It’s time to break the cycle of debt! 9 | 10 | Baby Step 2 11 | Pay off all debt using the Debt Snowball 12 | 13 | List your debts, excluding the house, in order. The smallest balance should be your number one priority. Don’t worry about interest rates unless two debts have similar payoffs. If that’s the case, then list the higher interest rate debt first. 14 | 15 | The point of the debt snowball is simply this: You need some quick wins in order to stay pumped up about getting out of debt! Paying off debt is not always about math. It’s about motivation. Personal finance is 20% head knowledge and 80% behavior. When you start knocking off the easier debts, you will see results and you will stay motivated to dump your debt. 16 | 17 | Baby Step 3 18 | 3 to 6 months of exepenses in savings 19 | 20 | Once you complete the first two baby steps, you will have built serious momentum. But don’t start throwing all your “extra” money into investments quite yet. It’s time to build your full emergency fund. Ask yourself, “What would it take for me to live for three to six months if I lost my income?” Your answer to that question is how much you should save. 21 | 22 | Use this money for emergencies only: incidents that would have a major impact on you and your family. Keep these savings in a money market account. Remember, this stash of money is not an investment; it is insurance you’re paying to yourself, a buffer between you and life. 23 | 24 | Baby Step 4 25 | Invest 15% of household income for retirement 26 | 27 | When you reach this step, you’ll have no payments—except the house—and a fully funded emergency fund. Now it’s time to get serious about building wealth. 28 | 29 | Dave suggests investing 15% of your household income into Roth IRAs and pre-tax retirement plans. Don’t invest more than that because the extra money will help you complete the next two steps: college savings and paying off your home early. 30 | 31 | Baby Step 5 32 | College funding for children 33 | 34 | By this point, you should have already started Baby Step 4—investing 15% of your income—before saving for college. Whether you are saving for you or your child to go to college, you need to start now. 35 | 36 | In order to have enough money saved for college, you need to have a goal. Determine how much per month you should be saving at 12% interest in order to have enough for college. If you save at 12% and inflation is at 4%, then you are moving ahead of inflation at a net of 8% per year! 37 | 38 | Baby Step 6 39 | Pay off your house early 40 | 41 | Now it’s time to begin chunking all of your extra money toward the mortgage. You are getting closer to realizing the dream of a life with no house payments. 42 | 43 | As you attack this last debt, you will gain momentum much like you did back in the second step of the debt snowball. Remember, having absolutely no payments is totally within your reach! 44 | 45 | Baby Step 7 46 | Build wealth and give! 47 | 48 | It’s time to build wealth and give like never before. Leave an inheritance for future generations, and bless others now with your excess. It's really the only way to live! 49 | 50 | Golda Meir says, “You can’t shake hands with a clenched fist.” Vow to never hold your money so tightly that you never give any away. Hoarding money is not the way to wealth. Save for yourself, save for your family’s future, and be gracious enough to bless others. You can do all three at the same time. 51 | -------------------------------------------------------------------------------- /resources/mockup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/resources/mockup.jpg -------------------------------------------------------------------------------- /resources/transition-example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developwithpurpose/front-end-developer-exercise/035b41660475410903743d534093a98a27e048c6/resources/transition-example.gif --------------------------------------------------------------------------------