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
- Inside of your
dog-partydirectory, create a sub-directory called
- Also create two files called
- You will also need to download the assets and insert them into your
Note: Do not use CSS
grid for this project (If you don’t know what this is, no worries. You’ll learn more about this in the future!)
- Start out focusing on the HTML using semantic tags and creating a clean structure.
- Then focus on styling your site like a boss
- Finally, create a
README.mdfile making sure to include the comp as well as a picture of your site
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
- Create a new repository on GitHub by clicking that green button on the home page that says
- Enter in a relevant name for this project (i.e.
- Do NOT initialize the repository with a README. You have already created one locally on your computer.
- Leave it set as
publicbecause you want to others to see your work and then click
- Follow the steps on the next page and enter each command into your terminal
- Once you see your code up in your repository, go to Settings and publish your site on GitHub pages!
- Finally, place your links in the appropriate tab of the Submission Sheet
Example Steps for Part 5
git initinside of your
git add .
git commit -m "Initial commit"
git remote add origin firstname.lastname@example.org:Kalikoze/Dog-Party.git
git push -u origin master
- Make your Dog Party site mobile. Experiment using your DevTools and
- 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 Dogbuttons horizontally aligned no matter how much text is in each column.
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.
- What was your biggest win? Biggest struggle?
- What is something you are still working on or struggling with? Maybe your partner has advice?
- How did you implement the background image?
- How did you approach the header?
- What was your strategy for setting up each column?
- How did you center the main image?
- What was your thought process in centering the logos in the footer?
- What are three tips you would have told yourself a week ago?
- How did your partner do things similarly/differently from you?
- 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
Use this template