CSET-110 Week 2

Project: Style a Resume

Now that we have some content in our resume, it's time to make it look like a website! Using the same HTML files from last week, we'll add in some CSS. I'm not grading your ability to make a well designed site, so it doesn't need to look perfect or professional. You just have to show your understanding of the language and how to use it.

Setup

• For repl.it:
  1. Use the same resume REPL from last week.
  2. Make sure a stylesheet file is in the same project. You might have to create a new one if you deleted it last time.
  3. Link the stylesheet to the HTML using the link tag and proper filepath.
• For a text editor like Atom or VS Code:
  1. Use the same resume directory from last week.
  2. Make a new stylesheet file inside this directory.
  3. Link the stylesheet to the HTML using the link tag and proper filepath.

To submit the project:

1. Go to your cset repository on GitHub and navigate to your resume directory.
2. Update your HTML file with any necessary changes.
3. You will also have to create the stylesheet file and add the CSS to it.

I'll download all the repositories at the end of class, just like your assessments.

Requirements

• Your CSS needs to be in an external stylesheet and properly linked to within your HTML file.
• It should be roughly organized from the generic to the specific from top to bottom. Use CSS comments to group sections of related rulesets.
• Using our basic knowledge of the box model, you can create a basic layout with block elements and changing their dimensions, padding, or margin. Use these properties to visually separate and reinforce the different sections of your content.
• It should also contain the following:
  • 10 Rulesets: you should have enough content in your site to define CSS rules for at least ten different groups of elements.
  • 5 Selector Types: ten rulesets means ten different selectors, but you should also show your knowledge of the different types. You should include one example of an element, class, and id selector, plus at least two more types of your own choosing.
  • 10 Properties: in total, your CSS should make use of at least ten different properties that you've learned.
  • 5 Units: these properties will probably allow for varying styles of values using different units for lengths, percentages, or colors. Show your knowledge of at least five of these units, not counting keywords like thin or red.
• Lastly, you should show an advanced topic you learned that wasn't covered in the three articles we read at Interneting Is Hard. Maybe you want to apply some CSS filters to your images, or attempt some responsive design with media queries. Or you could try your hand at a more advanced layout.

Grading

• 3 pts each for following the requirements.
• 6 pts for following code style guidelines.

Total: 30 pts