The Browser History series of workshops provided a progressive journey into webpage development. Browser History 1 introduced an easy way to set up a web page through HTML using vs code. Browser History 2, builds on Browser Hist. 1, taught us how to use cascading style sheets to apply different fonts, change the background color, resize images and their positions. Browser Hist. 3 builds off of the previous two Browser Histories and combines both html and css to rearrange the layout of the webpage by adding a horizontal navigation bar and dividing the content into 3 separate columns.
This WOD took me 2 attempts. I used a Doc Emmet to start off the WOD. This saved me an immense amount of time on typing out all of the basic html tags to make a web page. I highly recommend using chatgpt as a research tool even if it is to remember certain HTML tags. If you use chatgpt I would recommend taking notes on the code it gives you that way you learn how to properly use the tags. I also recommend helping people with their WOD or getting help from others when you are trying it out first. Then I would go to the screencast. I also recommend attempting the first WOD before the day it is due. That way you are not freaking out while you are frantically trying to complete it under the recommended time.
Also strongly recommend making friends for this course. That way you can compare and contrast your code with one another and you can learn faster this way in my opinion especially if you take notes on their tags and how their code functions.
This WOD was the easiest of the three for me. What I like to do for my WODs is to play around with the file and the tags before recording. This way I can see how it displays and fix any mistakes before recording the video. Working with CSS was fairly intuitive; the only hard part of this lab was finding the url to the Oswald font. I would recommend doing a google search on how to add the Oswald font to your css. I ended up writing the process of finding the url on a separate sheet of paper.
In this WOD I experienced some difficulties especially in how to generate the three columns similarly to how it was displayed in the image we were comparing it to. I also experienced some issues in getting the images for the sections to appear in line with their associated paragraphs. I highly recommend getting help from a classmate or a friend that knows how to code. For me I was lucky enough to know a friend who knows a css and he taught me how to make my middle column appear next to the other. I also highly recommend this one to play around with where the img references are in the html file. If you are having trouble and don’t know anyone in your class I would go check out the demonstration because they explain the lab but I would do this as a last resort.
The last WOD we performed in this class was to make a sample of a receipt for a purchase order. We did this by using expressions & variables in JavaScript. It was setup by using simple tables in html and document.writes along with script string templates and assigning variables with let to complete this WOD. If you want a more in depth description of the WOD and what was expected of us click here : Invoice 1. One struggle I had durring this lab was writting some of the document.write functions because I wrote my let variables in a seperate javascript file so I didn’t have to worry about having a lot of Javascript in my html and I could later refer to parts of my javascript incase anything went wrong. Like other WOD’s before I decided to RTFM on certain things. One of the things I read up on, was how to link a javascript file to an HTMl. One thing Which I did differently in this WOD was to set up a type of prep file for the WOD and it was just formatting for the table because I didn’t enjoy the look of the table if I just kept it like a raw table which is what you get when you inspect the Invoice 1. What I might try and do for the next WOD is to have two different Screens for editing my VS code which would make bringing my let variables over into the document.writes much easier and I might implement a loop for this document.write which would be pretty interesting to implement.