Balancing Act


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:

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


Lesson Search Results

Showing top 10 results