Ella Chiang Ella Chiang

Hackbright Front-End Web Development | Week 3

Monday:

  • Today was our first day of JavaScript.

  • What is the difference between equality == and strict equality ===?

    • Since JavaScript is loose about datatypes, it will change one datatype to another in an expression to what it thinks you mean.

    • It is advised to use the “strict” operations whenever possible.

    • ex: 12 == “12” is true, but 12 === “12” is false.

  • We went over the different datatypes, loops, and functions.

  • Exercises

    • practice writing different JavaScript functions

Wednesday:

  • More JavaScript

    • Can find and create elements using JavaScript.

    • var div = document.createElement(‘div’)

      • This makes a new div!

    • <script></script>

      • Javascript can go in these script tags

    • <script src=”main.js”> </script>

      • Or link to an external .js

    • div_element.appendChild(header);

      • This means header gets appended to div_element.

        • This was mega-confusing for me. Our class slides show document.body.appendChild(div); so I thought the code to append an element was “document.body.appendChild” but really the code is “.appendChild” and the part before “.appendChild” is what will be the parent element. The part that gets tacked on and becomes the child is what is in the ( ), in the bullet point example above, that would be “header”.

  • Exercises

    • part 1 – recreate the example calculator using only JavaScript

Homework:

  • choose 2 in-class exercises: refine/customize these, then add a screenshot to portfolio

  • add a thank you message to contact page after someone submits the contact form

Other things I worked on for my portfolio:

  • picked color scheme

  • added social media buttons

  • chose fonts

  • added placeholder to textarea in contact form

  • decorate contact form

    • resize text areas

    • decorate submit button

    • fonts/colors for text

  • decorate links

    • colors, fonts, hover

  • content p text justified

I found the following useful resources while working on my portfolio this week:

How to add a custom font using CSS
Free fonts for commercial use
How to install web fonts

Read More
Ella Chiang Ella Chiang

Hackbright Front-End Web Development | Week 2

Monday:

  • 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

Wednesday:

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

Read More
Ella Chiang Ella Chiang

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.

Read More