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