Design Portfolio


Hackbright Front-End Web Development | Week 2


  • HTML should be semantic
    • reinforce meaning of the page, not decorate it
  • CSS

    • end every line with a semi-colon
    • comments in CSS look like /*comment here*/
    • when using developer tools in Chrome to play with CSS, the changes are not saved, it just lets you see what happens in real time
    • fallback fonts - some computers might not have fancy fonts, so use standard ones as a backup

      font-family: FancyFont, Arial, sans-serif;

    • elements follow the box model

    • float - aligns with the edge of the containing element
    • images are in-line elements
    • target an ID with #
    • target a class with .
  • Exercises (done in pairs)
    • The exercises were all editing CSS: 1, 2, 3


  • set <ul> margin to 0 in order to center a horizontal list
  • design the whole web layout before you start to code
  • form - HTML element that let's users input data to a website
  • HTTP to retrieve info
    • GET - passes data in the url
    • POST - passes data in the body of the request
  • <form action="url we are sending data to" method="POST">
    • all form inputs need to have a name attribute
    • name is the same on radio buttons that belong to the same group, this means the user can only pick one from the group



  • Exercises (done in pairs)
    • Make and edit a form.

The homework assignment was to continue working on our portfolio and add a form to it which I did on the “Contact” page. See my portfolio here.