• Navigate to your “assignment1” folder that you created in the first assignment and duplicate then entire folder. On a Mac, you can right-click the folder and choose “Duplicate”. On a PC, you can right-click the folder to Copy it; then click next to the original folder and “Paste”.  Rename the newly duplicated folder “assignment2”.
• Change the title tag to <title>YOURNAMEHERE: Assignment 2</title>
• Follow exactly the video demo that accompanies Exercise-2, called “Basic Styling with CSS.”
• Upload it to the server using SFTP (Secure File Transfer Protocol)
• IMPORTANT: name the file “index.html”
• BE SURE to upload all assets (index.html, images folder, and css stylesheet)
• To test the proper structure of the document, you can use the the Firefox Developer Toolbar using Firefox, or you can also use the Chrome Web Developer plugin. It is simple to download and install on either Mac or PC. To view your heading outline from this toolbar, click “Information > View Document Outline.” Make sure that tags are nested appropriately.

Assignment Resources

---

Primary Tutorial

Basic Styling with CSS

Class Lecture Review

• CSS Foundations In-Depth:
  • View video lecture with instructor explanation (required)
  • PDF version of slides
• CSS Box Model / Chrome Inspector Introductions
  • CSS Box Model / Chrome Inspector Introductions (2 videos in a playlist) – required
  • CSS Box Model lesson website (you can use this to follow along later if you want to)
  • Instructor’s CSS Properties Compilation page

Textbook Reading Reference

READ pp.207-263 of required text, Learning Web Design (Robbins)

• “Cascading Style Sheets Orientation” – Chapter 11
• “Formatting Text” – using CSS – Chapter 12

CSS3 Design Tools

Here are some good CSS3 resources to help you design quickly.

• Eric Meyer’s reset code file
• http://html5css3box.com/rgba/  ***This one is awesome and links to a lot of other tools, too!
• http://css3generator.com/
• http://border-radius.com/
• http://www.colorzilla.com/gradient-editor/
• Font Shorthand Order
• CSS3 Transitions

Understanding CSS Properties

• ‘font’ property
• ‘border-radius’
• margin
• box-sizing

Free Web Fonts

https://fonts.google.com/

Background Image Patterns:

• http://www.transparenttextures.com/
• http://subtlepatterns.com/
• http://webdesignledger.com/freebies/200-beautiful-seamless-patterns-perfect-for-web-design/
• http://designmoo.com/category/patterns/
• http://www.dinpattern.com/category/patterns/

Free Stock Images (great for textures, etc.):

http://www.morguefile.com/
http://unsplash.com
https://archive.org/details/image
https://images.google.com/
…(upon getting Google search results, use “Search Tools” button to then filter by “Size” to get only large images or ones with open “Usage Rights.”

Awesome Color Palette Tool

http://paletton.com/  ***This site will generate hexadecimal values for you for all color samples.

 

Upload

---

• Upload to our class server making this the parallel directory path:
  Lastname_Firstname/assignment2/
  • What does that mean? Remember, if you are working inside of a folder on your computer called “assignment2/” then you would drop the entire folder into the server’s “Lastname_Firstname/” directory.
  • Here’s the path you are REQUIRED TO USE:
    YES! … Lastname_Firstname/assignment2/
• Please test it in a browser before submitting your work through Blackboard. Go to the following address and navigate to the folder where you uploaded work.
  • If you are in the ONLINE class, go to:
    http://mat.miracosta.edu/MAT125_Cotnoir/studentwork_online
  • If you are in the onsite class, go to:
    http://mat.miracosta.edu/MAT125_Cotnoir/studentwork_onsite
  • HINT: for additional help using an SFTP program to upload your work, please watch the demo using SFTP to log into the mat.miracosta.edu server.