Similar to what you might be asked to do on the job, we’ve given you a comp with a set of technical specs to go along with it and your challenge is to build it.
- practice accurately building a comp
- write well structured, semantic HTML
- craft clean, DRY CSS
Steps to Set Up Your Project Files
- Using your terminal, create a directory called
- Inside of your
dog-partydirectory, create a sub-directory called
- Also create three files called
- You will also need to download the image 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 these techniques in the coming weeks!)
Phase One: Basic Requirements
Start by building the HTML and using semantic tags to create a clean structure for your page. Work to craft your HTML according to the Turing HTML Style Guide
Style your site using CSS – aim to get it as visually close to the comp as possible. Work to craft your CSS according to the Turing CSS Style Guide
README.md file that gives a brief overview of your project (don’t forget to make sure to include the comp as well as a screen grab of your finished site!)
Phase Two: More Better
We won’t cover how to do these in class before this project ends – challenge yourself and investigate how to tackle these tasks. And remember: it is ok if you’re not sure how to do these so take a crack at it and experiment, we’ll go over this material together soon!
- Make your Dog Party site mobile. Experiment using your DevTools and
- How could you handle the links in the nav bar? Maybe change them 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.
Some Dogsin the main
A Site About Some Dogsheader and clear out the input field. For example: if I typed
Fidointo the input, when I click the button the main header of the page should change to read
A Site About Fido.
After you have completed your project and are happy with it, 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
- Go to Github and create a new repository, also called a repo, by clicking that green button on the home page that says
Newon the left
- 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 the repo set as
publicand then click
- In your terminal, follow steps below in order and enter each command into your terminal
git initinside of your
dog-partydirectory (Side Note:
git initcreates a hidden
.gitdirectory that’s used to track changes. Run
ls -ain the project directory to ensure your
.gitdirectory exists. )
git add .
git commit -m "Initial commit"
git remote add origin firstname.lastname@example.org:Kalikoze/Dog-Party.git(but use the origin of your own GitHub repo that you just created rather than
email@example.com:Kalikoze/Dog-Party.git– this step makes the connection between your local files and the repo that lives on GitHub)
git push -u origin master(this step pushes your local code up to your GitHub repo)
- Once you see your code up in your repository on GitHub, go to
Settingsand publish your site on GitHub Pages, a great way to host static sites directly through GitHub
- Finally, place the links for both you GitHub repo and the live GitHub Pages site in the appropriate tab of the Submission Sheet
- Light blue: #75e2e6
- Dark blue: #048eaa
- Background color: #ffffff
- White text: #ffffff
- Body text: #000000
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
Final Eval Peer Review
Use this template