As a Front End Developer, you’re going to need to accurately build out the UI (User Interface) for websites based on comps provided by a designer. For your first project, you’ll re-create the Dashboard page of a small budgeting app to practice writing well structured, semantic HTML with clean, precise CSS, as well as take a first crack at adding some user interaction with JavaScript and the DOM.
Similar to what you might be asked to do on the job, we’ve given you the comps with a set of technical specs to go along with it and your challenge is to build it.
Note: DO NOT use CSS flexbox or grid for this project (If you don’t know what this is, no worries! You’ll learn more about these techniques in the coming weeks.)
- accurately build a provided comp
- write well structured and semantic HTML (according to the Turing Style Guide)
- craft clean and DRY CSS
- use JavaScript to interact with the DOM
In your terminal, use the neccessary commands to create a directory called balancing-act with the following file structure:
balancing-act
|_index.html
|_styles.css
|_main.js
|_assets
|_images/icons will be stored inside the assets directory
Find the provided icons here. Download them into your assets directory for this project.
Lastly, create a repository on GitHub and connect to this local repository. 💥update with specific directions on pushing and GH pages💥
Steps 0-3 need to be completed by Friday morning at 9am. Once these steps are completed, we will eventually add more functionality!
Contrary to popular opinion, developers don't spend all their time coding! A significant amount of time should be put into planning (both the visual layout of a page and the logic that makes it function).
DO NOT skip this step! It's placed here very intentionally, and we will ask you about it in your evaluation.
Spend a couple minutes really looking at every little detail of the comp. Consider:
- What HTML element do you think you'll use for the title? For the "Accounts" sub-title?
- Where do you think the CSS property
borderwas used?border-radius? - Will padding, margin, or both be used for the three boxes that have income/expenses/credit score info?
Map it out. Either print out the comp (there is a printer available in the vault), or sketch it out in your notebook.
- Label each part of the page with the HTML element you think is most appropriate to display it.
- For parts of that page that are repetitve (account cards, and more!), decide on a class name that you will use to refer to those in CSS.
- Think about, and possibly research, how will you make sure that the nav bar stays on the left and the recent transactions box stays on the right?
Now that you have a vision and a plan for how to work towards it, it is time to start writing some code.
Write the HTML and CSS necessary to get the general layout of the comp re-created. This step should NOT include worries about fonts, colors, borders, or other small details. It may look somewhat like craigslist right now - kind of boring, but the content is still there for anyone who needs it.
Once you're happy with your general layout, commit this chunk of work. Make sure you are navigated to this project in your terminal, then run the following commands:
git add index.html
git commit -m "Build skeleton of dashboard page"
git add styles.css
git commit -m "Style general layout of dashboard page"
git push origin master
Now, check your project on GitHub. If you click into a file, you should see your recently updated code!
Now that we have the layout in place, it's time to start getting into the nitty-gritty and getting this pixel perfect.
Write the CSS necessary to re-create every little detail of the comp. Keep an eye on font sizes in relation to other pieces of text, padding and margin around content and boxes.
Don't forget to commit your work! If you don't commit until you finish this iteration, that's ok. Ideally, you'd made several commits throughout this iteration. Below is an example of a series of commit messages that someone may write while working on this.
- Add fonts and size fonts
- Style left-side nav bar
- Add padding the cards on middle of page
- Center content vertically on account cards
- Style recent transactions list
- Add final details - hover states to buttons and box shadow to white containers
Once you've pushed your work up to GitHub, check your GitHub pages link. A very common issue is that images look the way you'd expect when running the project locally, but not on GitHub Pages. If you have that problem, it has to do with a file path. As your cohort mates or rock if you're not sure what to do with this info!
It's time to write some JavaScript. Implement the functionality for this user story:
As a user,
- When I click the "x" icon in the top right corner of the banner that says "Welcome, Username!"
- The entire banner disppears
- and the content below it now fills the space the banner previously took up
- so that I have fewer distractions and can view more accounts (if I had more than 3!)
NOTE: We do not expect that you have a fancy animation for this.
Don't forget to commit your work! Push up to GitHub and ensure it's working as expected on your GitHub Pages link.
Steps 4-5 are to be completed over the Week 1-2 weekend. Turing students, on average, work about 20 hours between Friday, Saturday, and Sunday. We estimate that (if you've completed Steps 0-3 successfully), that Steps 4-5 can be completed in about 20 hours.
As a user,
- When I am on the Dashboard and click the "wallet" icon (middle of the three icons on the nav bar),
- The orange highlight to the left of the clipboard icon will disappear, and
- an orange highlight to the left of the wallet icon will appear
As a user,
- When I am on the Dashboard and click the "wallet" icon,
- The content on the main part of the page is cleared out (greeting banner, accounts, recent transactions, etc.)
As a user,
- When I am on the Dashboard and click the "wallet" icon,
- Then click the "clipboard" icon,
- The orange highlight to the left of the wallet icon will disappear, and
- an orange highlight to the left of the clipboard icon will appear
As a user,
- When I am on the Dashboard and click the "wallet" icon,
- Then click the "clipboard" icon,
- The content of the original dashboard shows on the main part of the page (greeting banner, accounts, recent transactions, etc.)
Don't forget to commit your work after you complete each user story! Push up to GitHub and ensure it's working as expected on your GitHub Pages link.
Now that we are able to toggle back and forth between two views, let's provide some content for our user on that second page.
As a user,
- When I am on the Dashboard and click the "wallet" icon,
- I should see a transactions page matching the comp below
💥insert image of transactions detail page💥