Skip to content

Latest commit

 

History

History
96 lines (68 loc) · 4.21 KB

043-CSS-Portfolio.md

File metadata and controls

96 lines (68 loc) · 4.21 KB

WEB 1.0 - Style your portfolio page

Description

The goal of this assignment is to get started working with styles. You should be applying styles to your work and solving problems along the way.

Why this assignment?

CSS is how the web is styled! Everything you see on the web and much of what you see on mobile is styled with CSS. Better looking projects are adopted by more users and it's more satisfying as a developer to make something beautiful.

Goals

Your goal is to style your portfolio page. You will do this by adding a style sheet and writing CSS.

Keep in mind that CSS is applied to elements on the page through selectors. Selectors target elements on the page either by an identifier:

  • tag name
  • class name
  • id name

Or by the DOM structure using selectors: descendent (section h1) or child (section > h1). Review your selectors here: CSS Diner. You don't have to know all of these now, if you can master the first 9 you're doing great! Look for opportunities to use selectors shown in the CSS diner game in your work.

Personal portfolio site

Use the CSS covered in class to style your portfolio page. Create a styles.css file to put your styles in. For now, you only need to worry about things covered in class, feel free to look up and explore new styles.

Make use of at least these style properties:

  • Typography
    • font-family
    • font-size
    • font-weight
    • line-height
    • color
  • layout
    • flex
    • margin
    • padding
  • background
    • background-color
    • border-color
    • border-width
    • border-style

If you're not sure how to apply these refer to the challenges in class and borrow ideas.

Stretch Challenges

If you've styled your work following the guide above take it further by trying these challenges:

  • Validate your code with the HTML Validator: https://validator.w3.org
  • Validate your CSS with https://jigsaw.w3.org/css-validator/
  • Format and comment your code.
    • Adding comments is profesional best practice and will help you better understand the code you wrote.
    • Formatting your code improves your code craft and quality, and makes it easier to read.
  • Add some images (if you haven't already)
  • Show your work to someone else for feedback. Make changes based on what they suggest.
  • Publish your portfolio to GitHub Pages. https://pages.github.com
    • Be sure to rename your portfolio html file: index.html
  • If you haven't add some navigation to your portfolio.
    • Give each section an id with a name, for example: <section id="about-me">
    • Create a link like this: <a href="#about-me">About</a>
  • Try implementing a custom font: https://fonts.google.com
  • If you haven't, try using two different fonts. One for headings and the other for everything else.

Deliverable

Create a repo for your portfolio

Submit your new portfolio site through Gradescope index.html and styles.css files and submit the zip file in the appropriate assignment

Due date

Tue, Sept 8

Assessing the assignment

Portfolio

Aspect Does not meet Meets Exceeds
Completion Your web site doesn't look complete Your web site looks complete Your web site explores ideas and concepts outside of the project description
Styles Your site is not styled Everything appears to be styled Your design inspires others. People comment on how great it looks!
Code Quality Your code is sloppy and lacks organization Your code uses consistent indentation, spacing, and consistent coding style Your code passes validation