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:

Monday:

• 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.

Wednesday:

• 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 by creating a new branch called screenshots to store the images to avoid them being in the master working tree. Then embed the screenshots using:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

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.