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.
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.
- Login to your GitHub account and create a new repository named
problem-set-3.5
. - In Git Bash, navigate to your
APCSP
folder.
cd ~/Desktop/APCSP
- 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
- The cloning process will create a folder named
principles-pset-3.5-skeleton
. Rename this folder toproblem-set-3.5
.
mv principles-pset-3.5-skeleton problem-set-3.5
- Change directories to get into your
problem-set-3.5
folder.
cd problem-set-3.5
- The cloning process will add a remote named
origin
that points at my skeleton repository. Renameorigin
toupstream
.
git remote rename origin upstream
- Add a new remote that points at the
problem-set-3.5
repository you created earlier. Make sure you replaceYOUR-USERNAME
with your actual GitHub username.
git remote add origin [email protected]:YOUR-USERNAME/problem-set-3.5.git
- Launch Atom, select
File
and clickAdd Project Folder...
. - Navigate to the
APCSP
folder on yourDesktop
, click theproblem-set-3.5
project folder, and clickOpen
.
You should now see a folder named problem-set-3.5
in the Project
panel in Atom.
- Expand the
Project
folder. You should see a file namedREADME.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 yourproblem-set-3
repository. - To do that, add another remote that points at your previous
problem-set-3
repository. Again, make sure you replaceYOUR-USERNAME
with your actual GitHub username.
git remote add pset3 [email protected]:YOUR-USERNAME/problem-set-3.git
- Now, pull down all of the files and folders in your
problem-set-3
directory into your newly createdproblem-set-3.5
directory.
git pull pset3 master --allow-unrelated-histories
- You'll need to resolve a conflict by manually merging the
README.md
files fromproblem-set-3
andproblem-set-3.5
. You can do this directly in Atom by clicking theUse me
button associated with theREADME.md
file of theproblem-set-3.5
repository. Make sure you save it afterwards. - You can now remove the
pset3
remote. You won't need to use it again.
git remote remove pset3
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
.
- ###Your CSS file(s) should be in a folder named
- 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-color
s on a single page.
- If you wish, you may incorporate multiple
- A
font
,font-size
,font-style
,font-weight
,color
, andtext-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/orpadding
(this is understandbly subjective). - A
border
around at least 1 image per page.- At least 1 of your
border
s must incorporate rounded corners.
- At least 1 of your
- 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.
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.