Dog Party

Overview

It’s a dog party! The reality is, as a frontend developer, you’re going to be building out a lot of the UI on websites and apps. This can be a lot of fun, and you definitely want to get good at it! One of the beginning pieces is using semantic html and writing clean CSS. Similar to what you might do in a job, you’ve got a comp and need to build it out.

Steps to setup

  • Using your terminal, create a directory called dog-party
  • Inside of your dog-party directory, create a sub-directory called images
  • Also create two files called index.html and styles.css
  • You will also need to download the assets and insert them into your images directory

Note: Do not use CSS flex-box or grid for this project (If you don’t know what this is, no worries. You’ll learn more about this in the future!)

Next Steps

  • Start out focusing on the HTML using semantic tags and creating a clean structure.
  • Then focus on styling your site like a boss :smirk:
  • Finally, create a README.md file making sure to include the comp as well as a picture of your site

Submission Details

After you have completed your project and are happy with it, we want you to push it up to GitHub. You’ll learn more about Git & GitHub soon, but essentially, it’s a service/website that allows developers(you) to host your code/sites. Pretty cool right!?

Add a public key to your github account

In order to push up your work to GitHub, you’ll need to generate an SSH key. SSH keys are a way to identify trusted computers without involving passwords. You can generate an SSH key and add the public key to your GitHub account by following the procedures outlined in this tutorial from GitHub. This video will walk you through the process and likely save you time.

Setting up Repository on GitHub and Pushing up

  1. Create a new repository on GitHub by clicking that green button on the home page that says New Repository
  2. Enter in a relevant name for this project (i.e. Dog Party)
  3. Do NOT initialize the repository with a README. You have already created one locally on your computer.
  4. Leave it set as public because you want to others to see your work and then click Create Repository!
  5. Follow the steps on the next page and enter each command into your terminal
  6. Once you see your code up in your repository, go to Settings and publish your site on GitHub pages!
  7. Finally, place your links in the appropriate tab of the Submission Sheet

Example Steps for Part 5

  1. git init inside of your dog-party directory
  2. git add .
  3. git commit -m "Initial commit"
  4. git remote add origin git@github.com:Kalikoze/Dog-Party.git
  5. git push -u origin master

Extensions

  • Make your Dog Party site mobile. Experiment using your DevTools and media queries
    • How could you handle the nav bar? Maybe change it into a menu icon?
    • How will you handle the columns? Will they still fit if they are in 3 columns?
  • Make the What Is Dog buttons horizontally aligned no matter how much text is in each column.

Dog Party

Peer Review (10 min each)

With your partner, go through the list of questions below. Take note of the different or similar ways you may have approached the comp focusing on the structure of your HTML and how you implemented your styles. Taking a moment to reflect can help you strategize what you can improve on and how you can perform even better for your next project.

  1. What was your biggest win? Biggest struggle?
  2. What is something you are still working on or struggling with? Maybe your partner has advice?
  3. How did you implement the background image?
  4. How did you approach the header?
  5. What was your strategy for setting up each column?
  6. How did you center the main image?
  7. What was your thought process in centering the logos in the footer?
  8. What are three tips you would have told yourself a week ago?
  9. How did your partner do things similarly/differently from you?
  10. What are some things you would like to continue to work on?

Journal Writing (5 min)

Take a few minutes and write out an action plan for the next few days.

  • This can include restructuring your HTML layout.
    • Making it cleaner
    • Using more semantic HTML over divs
    • Making sure it follows the styleguide
  • How you could refactor your CSS?
    • Making sure classes are named appropriately
    • Organize your styles according to sections
    • Alphabetizing style properties
    • Grouping classes together that share similar styles

Peer Review

Use this template

Lesson Search Results

Showing top 10 results