paint buckets

A-2: Basic CSS

Assignment 02

Basic CSS (Self Profile…presentation styling)


Requirements

  • 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

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.

Understanding CSS Properties

Free Web Fonts

https://fonts.google.com/

Background Image 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

Digital Art, Design, and Communication Education