Skip to content

big-griff/burkhour-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Problem Set 3½

Problem Set 3½ allows you to continue exploring your creating side. Having already designed and built your first website, we'll now be using CSS to make it look much nicer.

Getting Started

To get started, you'll need to create a GitHub repository to store your Problem Set 3½ code. After cloning my skeleton repository, you'll need to setup a remote to push your code to your repository instead of mine. Steps to accomplish this are outlined below.

Setup

  1. Login to your GitHub account and create a new repository named problem-set-3.5.
  2. In Git Bash, navigate to your APCSP folder.
cd ~/Desktop/APCSP
  1. Clone my skeleton repository from GitHub. This will make a copy of my repository and store it locally.
git clone [email protected]:rwilson-ucvts/principles-pset-3.5-skeleton.git
  1. The cloning process will create a folder named principles-pset-3.5-skeleton. Rename this folder to problem-set-3.5.
mv principles-pset-3.5-skeleton problem-set-3.5
  1. Change directories to get into your problem-set-3.5 folder.
cd problem-set-3.5
  1. The cloning process will add a remote named origin that points at my skeleton repository. Rename origin to upstream.
git remote rename origin upstream
  1. Add a new remote that points at the problem-set-3.5 repository you created earlier. Make sure you replace YOUR-USERNAME with your actual GitHub username.
git remote add origin [email protected]:YOUR-USERNAME/problem-set-3.5.git
  1. Launch Atom, select File and click Add Project Folder....
  2. Navigate to the APCSP folder on your Desktop, click the problem-set-3.5 project folder, and click Open.

You should now see a folder named problem-set-3.5 in the Project panel in Atom.

  1. Expand the Project folder. You should see a file named README.md (which is what you're reading right now!). That's all you get - no starter code this time! That's because you'll be copying over your existing files and folders from your problem-set-3 repository.
  2. To do that, add another remote that points at your previous problem-set-3 repository. Again, make sure you replace YOUR-USERNAME with your actual GitHub username.
git remote add pset3 [email protected]:YOUR-USERNAME/problem-set-3.git
  1. Now, pull down all of the files and folders in your problem-set-3 directory into your newly created problem-set-3.5 directory.
git pull pset3 master --allow-unrelated-histories
  1. You'll need to resolve a conflict by manually merging the README.md files from problem-set-3 and problem-set-3.5. You can do this directly in Atom by clicking the Use me button associated with the README.md file of the problem-set-3.5 repository. Make sure you save it afterwards.
  2. You can now remove the pset3 remote. You won't need to use it again.
git remote remove pset3

Requirements

Modify the website you created for Problem Set 3, and create a new and improved website for Problem Set 3½. You'll be adding CSS to make it look a whole lot cooler. You're free to exercise creative expression and design, but must meet the minimum specifications below.

More specifically, your website must include and incorporate the following features and elements.

  • ###At least 1 externally linked CSS file, which contains the vast majority of your styles.
    • ###Your CSS file(s) should be in a folder named styles.
  • At least 3 inline styles per page (for one-off styles that typically aren't replicated elsewhere).
  • ###At least 3 different type selectors.
  • ###At least 3 different class selectors.
  • ###At least 3 different ID selectors.
  • At least 3 different attribute selectors.
  • ###At least 1 universal selector.
  • ###At least 3 different combinators.
  • At least 3 different pseudo-classes.
  • ###A background-color for each page.
    • If you wish, you may incorporate multiple background-colors on a single page.
  • A font, font-size, font-style, font-weight, color, and text-decoration for at least 1 (though not necessarily the same) text element per page.
  • ###A :hover effect for each link.
  • Appropriate element spacing using margin and/or padding (this is understandbly subjective).
  • A border around at least 1 image per page.
    • At least 1 of your borders must incorporate rounded corners.
  • All img dimensions must be defined in the externally linked CSS page, and not as a tag attribute.

To avoid confusion, your directory structure must match the following. If something is followed with a /, it is a folder; otherwise, it is a file.

problem-set-3/
   images/
<<<<<<< HEAD
      kitchen.png
      meals/
         pasta.png
   index.html
   recipes.html
   ingredients.html
   suppliers.html
   README.md
   styles/
      yourfile.css

Of course, your filenames will be different than mine. They are alphabetized, so they will likely appear in a different order, too. The meals/ subfolder inside of the images/ folder is optional. You might find it useful to further categorize your pictures, but it is not required. The image files inside of the images/ and meals/ folders are examples. Yours, of course, will be named differently.

Deadline

Your Canvas submission is due at or before 11:59pm on Sunday, October 21, 2018. Please make sure you verify how many grace days you have remaining for this marking period.

  myimage1.png
  subfolder/
     myimage2.png

index.html mysubtopic1.html mysubtopic2.html mysubtopic3.html README.md


Of course, your filenames will be different than mine. They are alphabetized, so they will likely appear in a different order, too. The `subfolder` inside of the `images` folder is optional. You might find it useful to further categorize your pictures, but it is not required. The image files inside of the `images` and `subfolder` folders are examples. Yours, of course, will be named differently.

## Deadline

Your Canvas submission is due at or before 11:59pm on your section-specific due date.
* October 9, 2018 (A 3/4 & 7/8)
* October 10, 2018 (B 3/4 & 7/8)
>>>>>>> d80ca60f47a9f8b62a36086741e802b52bf66597

### Submission Requirements

All that is required for submission is the top-level URL to your [GitHub](https://github.com/) repository for this problem set.

About

CSS addition to 3rd problem set

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published