Welcome! These are homework exercises to accompany what you have been learning in class.

Homework: Class 1

Pick a topic for your favorite website: Your favorite hobby? Your favorite sport?

Draw a wireframe for your website. Think about where you want your header, slider/pics, content, and other information to go on the site.

Homework: Class 2

For this class's homework assignment, use your newly aquired skills to add some sweetness to your site.

Here is what I would like to see at minimum on each lovely page:

  1. A heading declaring your favorite hobby or sport (or anything you want!).
  2. A couple paragraphs describing what you chose. Remember to use emphasis on key words!
  3. A list of your favorite things about what you chose.
  4. An image related to what you chose. The image should link back to the source (where you found it). This link should be clickable, but the image doesn't need to be clickable.
  5. A footer at the bottom of the page declaring your copyright on such a wonderful write-up, and make sure you use the copyright symbol!
  6. Your page should validate in this at this link: W3 Validator.
  7. Try out a couple of CSS styles to make your page look nice!

You can always check the Class 2 slides for help.

Homework: Class 3

For this class's homework assignment, we will do some stylin'

Here is what I would like to see at minimum on each lovely page:

  1. I like borders on images, add borders to all images you have. (Hint: border properties look like this 'border: 1px solid black;'.) Experiment!
  2. Your Headings should be in Georgia font.
    Extra Credit! Update your headings with a Google font: https://www.google.com/fonts
    Lost? Try Googling how to do this :)
  3. Your paragraphs should be in Helvetica.
  4. Footers are probably meant to be centered.
  5. Extra points for finding a nice background image.
    Hint: you're going to want to use the url() function to set up a background. If your text becomes hard to read, extra EXTRA points for setting a background color on your text-based elements.
  6. Style your page with some CSS class and/or position selectors along with some divs.
    • Add some color, width/height, different font sizes, maybe some pseudo-classes!
  7. Try to make your borders have rounded corners. Google a bit. CSS3!
  8. Your page should still validate in this at this link: W3 Validator.

You can always check the Class 3 slides for help.

Homework: Class 4

Here are this class's homework activities:

  1. Create several divs of various widths, heights, and colors. Use margin to push them around the page.
  2. Make some of the <div>'s into links (anchors). Then, make the background color of the div change on mouse over.
  3. Try to position some of the <div>'s within a container and add a sidebar with content to your site. (hint: look up the section on floats if you're having trouble)
  4. Create a class that you can use with <span> tags to make certain text twice the default size.
  5. Extra credit: Use images as links and change them on mouseover. This one is challenging BUT VERY FUN! Try searching for "Turn links into images CSS".

You can always check the Class 4 slides for help.

Homework: Class 5

For this class's homework, you have two options. Pick one of the two plugins below and add it to your site. For extra credit, add both!

Option 1: FancyBox, a Lightbox Plugin

Have you ever been to a site where when you click on an image, it appears in a pop-up box on top of the rest of the page? This is a plugin that lets you add this feature to your own site! Check it out! You'll need to select an image (one featuring the celebrity or superhero from your website!) and then follow the instructions below.

  1. Add the plugin via CDN using the links here.
  2. Add a link (an a tag) to your HTML that will open your image when it gets clicked. Remember IDs are unique so don't reuse an ID you've used before! Also give it the class fancybox. Finally, set the href to the relative path of the image you want to pop up.
  3. Initialize your plugin. It's the same as initializing the slick plugin, except instead of .slick you're going to use .fancybox. Fancybox has it's own options you can check out here. Remember to initialize it on the ID you created!
  4. Play with the options until your lightbox is perfect.

Option 2: Awesome Cursor - make your cursor more awesomer!

Awesome Cursor allows you to choose custom cursors for while a user is hovering over certain elements or for your whole site. You really should just check it out to get an idea of what it does.

  1. Add the following inside your head tag:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/jwarby/jquery-awesome-cursor/master/dist/jquery.awesome-cursor.min.js"></script></pre>
  2. Choose an element (or even the whole body tag) where the custom cursor will show up.
  3. Visit the FontAwesome website and choose one of the icons as a cursor.
  4. Check out the Awesome Cursor Usage documentation to see how to make your cursor happen!
  5. If you're still a little confused you can look at a working example of the plugin.
Check out the Class 5 slides if you need a reference!

Homework: Class 6

Here are this class's homework activities:

  1. Style your nav (or menu) to be all on the same line on all pages (if not already).
  2. Create a section of your site with 3 or 4 columns.  
  3. Work with your media queries to make sure you site looks good at narrower widths (try resizing your browser to 320px)
  4. Take a minute to step back and look at what you have so far and:
    • Recognize you are absolutely killing it.  Seriously - you couldn't do this a couple weeks ago could you?
    • Think about where you go from here.  What are you happy with?  What do you want to keep working on?  Do you want/need to revise your wireframes to make sure you know where you're heading for your end result?
    • Set a realistic goal for what you want to have done for your presentation. You'll never feel like it is perfect but make sure you know what parts you can finish and polish up and what parts you may have to save for the next round :)

You can always check the Class 6 slides for help.

Homework: Class 7

Here are this class's homework activities:

  1. Finish up your site and your presentation.  
  2. Things to think about:
    • Is the overall look and feel of your site consistent and clean?
    • Does the layout make sense for the user?
    • Does the site accomplish its purpose?
    • Do all your images work?
    • Double check your code:
      • Do all your opening tags have closing tags?
      • Do images and links have all the necessary attributes?
      • Are there any errors in the console?
  3. Make sure you have something to say for each of the below items for your presentation.
    • Tell us what your site is about and what its purpose is.
    • What is your favorite part of the site?
    • What part would you most like to change?
    • What was the most difficult part?
    • What would you like to do next with the site?
    • Did this give you any ideas for another project?
  4. Still need something to do? You finished during class?  Awesome.  Do some reading

Homework: Class 8

Here are this class's homework activities:

  1. Go forth and code.
  2. Let us know how you're doing (bizstream.academy.staff@bizstream.com)