Something to note is that you will need to style the comp two different ways using two different css stylesheets. This is based off of the CSS Zen Garden site. Although you will need to have two stylesheets, the same HTML file and structure will be used for both layouts (aka even though you’ll have two stylesheets, you’ll have only one index.html file). This is to help you focus on what is necessary for your HTML structure so that it can work for multiple layouts.
Similar to what you might be asked to do on the job, we’ve given you the comps with a set of technical specs to go along with it and your challenge is to build it.
- accurately build a provided comp
- write well structured and semantic HTML
- craft clean and 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 four 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!)
Iteration 0: Build and Style Site
- 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
- Create a
README.mdfile that gives a brief overview of your project (don’t forget to make sure to include the comps as well as the screen grabs of your finished site!). This is great resource for markdown!
Iteration 1: Add some functionality
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.
Iteration 2: Make it responsive
- Make your Dog Party site mobile. We haven’t given you layouts for mobile, so think about how you’ll approach making each layout work best for small screens. Do side-by-side columns on large screens stack when viewed on a phone? What about larger sections of content? Experiment using your DevTools and
media queries! Note - we realize we have not explicitly covered any of this in class; this is a great chance to push yourself and do some independent learning!
Iteration 3: Extensions
- Add functionality to each of the buttons in each column. When the user clicks on the button, it should hide the content in that specific column (still having the picture and button be displayed). When the user clicks the button again, the text should display once more.
- Bonus: add a nice animation to this to give a better transition
- Add a tooltip to each of the elements in the navigation bar. When a user hovers over one of them, a tool tip should appear giving more information as to what that page is about.
- Add another
textareato the form that can update the text in each column. The input should either be a dropdown or radio/checkboxes to specify which column’s text is being updated.
Iteration 4: Zen Garden
Something to note is that you will need to style the comp two different ways using two different css stylesheets. This is based off of the CSS Zen Garden site. This is to help you focus on what is necessary for your HTML structure so that it can work for multiple layouts.
- Create a new CSS file in your dog_party directory.
- Change the
linktag in your HTML to point to this new CSS file.
- Write CSS to recreate Design Comp 2 (comp below).
The challenge is - you cannot change anything in the HTML once you’ve updated the
link tag. This is the point of the challenge! You may find that you need more advanced selectors (wink wink) because you didn’t have a class or id attribute on an element you now need a hook for.
Design Comp 1
- Light blue:
- Dark blue:
- Background color:
- White text:
- Body text:
Design Comp 2
- Light purple:
- Dark purple:
- Background color:
- White text:
- Body text:
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!?
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 email@example.com:Kalikoze/Dog-Party.git(but use the origin of your own GitHub repo that you just created rather than
firstname.lastname@example.org: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, you will submit the project in the Submission Form pinned to your cohort channel
Checkins - 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 style guide
- 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