This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

CSS Exercises


Beginner Exercise#1

  1. Create your style sheet reference link within your HTML document
  2. From your external style sheet select the body element and add a background-color
     

 

Advanced Exercise#1

Here is a great demo/exercise in both Responsive Web Design and how to build a really great HTML/CSS starting platform for your website (using HTML5 Boilerplate as the foundation). This exercise is based on one I received from a secret company (who was hiring) looking for me to copy their .psd mockup. I was to complete the execise in a timed situation of 60minutes. When I was first given the files the CSS was all pixels. I have since changed the CSS to be more reflective of Responsive Design using percentages and em's. This approach is not only something we should be practicing more, but the measurement units are more robust and flexible for a medium that has no fixed canvas.

Help your fellow classmates and post your solutions to the problem(s) at hand. If you are stuck make sure to ask for help using this area as your sounding board. Let's see those solutions CSS'ers. Post your links below in the comments portion.

EXTRA SPECIAL BROWNIE POINTS FOR THOSE THAT DO THE JQUERY REQUIREMENT

 

GITHUB REPOSITORY EXERCISE FILES https://github.com/grayghostvisuals/psd2HTML

 


Task Discussion


  • Anonym   Sept. 16, 2011, 9:47 a.m.

    For all exercises please post solutions in this reply comment section below. Please do not attach any zip files.

    Some suggested tools to share or linked  files with your peers: