Introduction
In summary, the Browser History series of workshops provided a comprehensive introduction to web development. In Browser History 1, participants learned to create a basic webpage using HTML. This involved setting up a directory, launching a browser, running an HTTP server, and structuring the page with subsections and links, including external links to other web pages and resources.Moving on to Browser History 2, the focus shifted to styling the webpage using CSS and Google Web Fonts. Participants learned to link CSS style files to their HTML document, customize fonts, headings, font colors, margins, width, and background to enhance the visual appeal and layout of the webpage. Finally, in Browser History 3, the workshop delved into more advanced techniques using Chrome Developer Tools. Participants gained insights into modifying layout sections, adjusting the width of headings and paragraphs, and refining the navigation bar to display horizontally, thereby honing their skills in fine-tuning and optimizing webpage design and functionality.
In summary, I’ve completed the following WOD modules: Browser History 6, SmartPhoneProducts 1, and Invoice 1. While some took longer than expected, the knowledge gained was invaluable. I highly recommend thoroughly watching and reviewing all notes and modules before beginning. The main objectve I feel like was to create functions annd present data that was organized using HTML.
In WOD1 of the Browser History series, participants encountered various challenges and triumphs while creating their first basic webpage using HTML. Despite initial struggles with starting the server and spelling errors, perseverance led to eventual success. The journey included multiple attempts, with times ranging from 30 to 14 minutes, as participants navigated through the process independently before discovering the instructional video. Despite initial difficulties, the satisfaction of seeing the browser load correctly with all the desired information was a rewarding experience. This initial hurdle served as a valuable learning opportunity, paving the way for further exploration and growth in web development skills.
My first piece of advice would be to start by watching the instructional video. If it’s your first time watching, I highly recommend paying close attention and taking notes on anything you find confusing or unclear. Once you’ve watched the video, take some time to understand what each piece of code or tag does. Don’t rush through this process; it’s essential to grasp the concepts before diving in. Another crucial tip is to ensure that Autosave is turned on. I learned this the hard way when I lost my work due to forgetting to save my server. It can save you a lot of frustration in the long run. Before you start recording yourself working on the WOD, I suggest practicing on your own until you feel confident with the task. Recording yourself can add pressure, so being comfortable with the process beforehand can make a big difference. Lastly, remember these three important words: SAVE, YOUR REPO, and NODE SERVER.JS. These are the key elements you need to prioritize to ensure a smooth experience during the WOD. Keep them in mind and make them a habit to avoid any unnecessary setbacks.
WOD2 of the Browser History series was hands down my favorite. I loved the freedom to play with colors, fonts, and completely change the look of my webpage using CSS. It was a blast, except for one hiccup – getting the fonts just right. Despite everything else working smoothly, the fonts gave me a bit of trouble, so I had to go back to the video to figure out what was going on. Once I sorted out the correct tags, though, I was able to finish in less than 5 minutes. It took me about 4 to 5 tries to get everything perfect. What I discovered during this WOD is that I thrive on the hands-on aspect of creating a website. I’m not a big fan of watching videos because I feel like I can miss important details in just a few seconds. This exercise really reinforced for me the value of hands-on learning and practice when it comes to mastering web development skills.
One important tip I suggest is to have your font downloaded beforehand. From my experience, dealing with the font was the most challenging part. Once you have the font ready, the rest of the process is relatively straightforward, as they provide step-by-step tutorials. Ensure you include the font in your index.html file to avoid any complications later on. This simple step can save you a lot of time and frustration during the customization process.
WOD3 was quite the challenge for me, taking about 8 minutes to complete. It was particularly tough because I had never really inspected elements on the web before. The frustration hit hard when I reloaded my work and found all my HTML code had disappeared. That was definitely unexpected and threw me off track for a bit. One thing that really caught me off guard was the spinning element. It seemed to be out of control, spinning way too fast. I had to figure out how to fix the speed and regain control over it, which took some trial and error. But what I found most challenging was the navigation bar. No matter what I tried, I couldn’t seem to get it to stay horizontal. It was like fighting a constant battle to keep it aligned the way I wanted. Overall, WOD3 pushed me out of my comfort zone and forced me to tackle some unfamiliar territory. Despite the frustrations, it was a valuable learning experience that taught me a lot about troubleshooting and refining the finer details of webpage design.
The most crucial tip I can offer is to fully understand what each HTML tag does and ensure you’re placing them in the correct locations within your document. One of the biggest challenges I faced was when my CSS unexpectedly turned red. It turned out that I had missed adding curly braces {} at the end of my CSS rules. Remember to always include these braces to properly encapsulate your CSS declarations. For instance, when styling the body element, ensure you end the rule with body {}. This simple but essential detail can prevent frustrating errors and ensure your styles are applied correctly to your webpage.
I sincerely hope that the information I’ve provided has been beneficial to you. Learning can sometimes be a challenging and slow process, and it’s crucial to allocate sufficient time for it, rather than leaving everything until the last minute. I highly recommend prioritizing this class and dedicating regular time to it. Personally, I found myself tackling these WODs late at night, often around 2 or 3 AM. If you ever come across my videos, you might catch the soothing sounds of my furry companions—my dog snoring or my cat meowing in the background.Some can get long but I highly recommend trying to do it first wihtout the timer then doing it. My biggest one was the Invoice 1 where I kept on making small mistakes. I feel like my experience with them was time consuming because I kept on making small errors that led to big errors. What I did differently was try to do it before hand and then try the WODS. The other would be making sure I am prepare.Reflecting on the experience, I acknowledge the importance of practicing more complex JavaScript tasks to enhance proficiency. To be better prepared for future WODs, I plan to spend more time exploring advanced JavaScript concepts and practicing problem-solving techniques. Additionally, I aim to experiment with different strategies, such as reading through all instructions before starting and organizing reference materials systematically, to streamline the execution process and improve efficiency.