Blog #3: The Google Lookalike
This website was really exhausting yet fun to make. I know the website looks pretty simple in it of itself, but messing around with the div’s, display, percentages, and figuring out the parameters for the JS too. But other than that, the project was pretty enrapturing and a neat test of skills. Some things I struggled with along the way was the header and the footer. Originally, I was going to add them with other elements inside the div so they were actually legitimate copies of the elements on the original google page instead of the a crop. But I struggled with spacing the words of the the footer and the header (later finding out I could have used word spacing) so I kicked the bucket and just decided to make them crops. This was probably the easiest and cheapest alternative as it only took about five minutes with a easy crop of Microsoft Paint.
In the process of making this website, I have learned some pretty neat things. In JS, I’ve learned how to use the keycode value to get a certain key to activate an event. With getting a specific keycode, I struggled in actually getting it as the parameter I put in my function which was “keyPressed” originally wasn’t working as it was not defined. This later came to my realization for in order to get the value of onkeypress, I was suppose to use a specific word in the parameter which was “event”.
In CSS, centering a div within a div was a hard to figure out at first as 0 auto with margins didn’t work. Due to that, I spend some time getting all the elements out of the the main div and just going from there. After doing realigning and changing the tags of elements I moved outta that DIV, I found the answer as displaying the elements as a table actually centered the div within the main. In figuring that out, I reversed me moving all the elements outta the the div and changed the display from the default (inline) to table, it worked. Another thing I figured out that moving div’s within div’s with using a percentages, it would actually move that div on a percentage based on the parent div. Before knowing this, I thought no matter where the div was, whether parent or child, would take move on percentage based on the entire body. This, I was shown recently otherwise.
With HTML, I learned about two new attributes which were onkeydown and onkeyup(probably best to just using onkeypress). Some other things I also learned about HTML is that you don’t need the set the bold and italics in a element with text in it, as changing the font-weight does the exact same thing with specifying the tag of the element or where it is in a parent. On talking about fonts, I learned something new and actually can be pretty useful in future. With the fonts on you’re computer be only so limited, you can use other various and unique fonts on google fonts. I haven’t used it on the current project I am talking about right now, but on other various projects in the future, I’m sure this would come in handy.
So overall, I liked working on this project and also learned some neat things along the way. Based on what I did last year and current year, I haven’t taking a understanding in things that weren’t clear to me before.