Balancing Act

Overview

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 specifications to go along with it and your challenge is to build it.

Note: DO NOT use CSS Flexbox or Grid during Week 1 of this project (If you don’t know what this is, no worries! You’ll learn more about these features of CSS in the coming weeks.)

Learning Goals

  • 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

Set Up

In your terminal, use the necessary 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. If you aren’t sure how to do that, follow the steps in this tutorial.

Progression

Lesson Search Results

Showing top 10 results