ala2233 / HTML-CSS

Pre-course HTML/CSS portfolio assignment

HTML/CSS

Topics:

• Box Model
• Flex Box
• BEM Naming Conventions
• Extra Credit: Media Queries

You’ll be building a portfolio template with HTML/CSS. Apply what you've learned in the Intro to Topic lab and the lecture. The design is up to you, but your project should include the following features:

• Implement Box Model or Flex Box
• Use BEM Naming Conventions
  • http://getbem.com/introduction/
  • http://getbem.com/naming/
• List Navigation
• At least three sections: About Me, Projects, and Contact
  • About Me: Include a paragraph about yourself and/or your professional goals and a photo.
  • Projects: Links to work you have online. If you don’t have any yet, you can leave it as a blank template.
  • Contact: Your contact information and/or a contact form.

If you don't know where to begin, you may follow the mockup below instead of creating your own design, or search the web for examples. Make sure you leave yourself enough time to implement your ideas.

Mockup Details: Single page design Fixed navigation Links are anchored to sections What you'll need to know to reproduce the mockup: Basic HTML document structure HTML tags: a, div, p, h1, image, ul How to reference an external style sheet CSS Selectors margin, padding, display, position

References:
HTML Elements
CSS