Design Portfolio


Hackbright Front-End Web Development | Week 1

So I just completed my first week in Hackbright’s Front-End Web Development course. I’m excited to learn all these new things! So, here’s what I learned in week one:


  • Command line
    • How to make/remove directories, change directories, etc.
  • Introduction to Git/GitHub
    • How to create a new repository (repo), push to the repo, create a README, create an issue, etc.
  • Exercises:
    • GitHub exercise – practice using GitHub, create a repo and add pair programming partner as contributor, create .txt outlining desired outcomes from class.


  • HTML – Hyper Text Markup Language
    • HTML is text with links, provides structure to the webpage, like a skeleton to a body.
    • Words between the <title> tag are the words that appear on the browser tab.
    • View HTML of a webpage by right clicking on the webpage, then clicking Page Source.
  • How to create a GitHub project site
    • Create a specialized GitHub pages branch
      • git checkout -b gh-pages
      • git push origin gh-pages
      • needs index.html file
  • Exercises:
    • Create first webpage – use HTML to create a webpage for a recipe
    • Create webpage about your favorite city

In-class exercises are all done with pairs; homework assignments are done individually.

This week, our homework assignment was to create the beginnings of our portfolio on GitHub pages. See mine here. Our portfolio page was to include: only html, a picture, a short bio, and social media links.

I didn’t know how to write a short bio, so I googled it. Below are the elements a short bio could contain.

How to write a short bio:

  1. Use 3rd person.
    • “Sally is ... ” versus “ am ...”
  2. State what you do.
    • “Sally develops software for X company.”
    • Include area of expertise (ex: JavaScript, Front-End)
  3. Education and Credentials
    • Name of degree earned
    • Institution attended
    • Other relevant experience
    • Certifications
    • Relevant organizations
  4. Notable Achievements and Awards
  5. Closing Statement
    • Current/upcoming projects
    • City, state of residence. “Sally lives in Miami. ”
  6. Notable Achievements and Awards
  7. Closing Statement

Also, how to add a screenshot to your repo’s README:

So, the <branch name> would be screenshots and the “path to image” bit for me was just the name of my screenshot. And that bit of code goes in the README. FYI, I got this answer from Stack Overflow.