Day 3: Client Website Progress

Photo of a blurred tabletop, a notebook with goals, and a hand writing a new goal on the list.

This is my first client who currently doesn’t have a website! I’ve made some progress in the last month but I’ve been held back by the uncertainty of some new concepts I haven’t mastered yet. It’s because of them (as well as some future projects I want to implement) that I’m pushing myself to learn JavaScript.

Today, I focused on a few hiccups on gaps in my HTML and CSS as I wanted to fully complete these before diving into JS again. My run-through of progress is as follows:

  • Reviewed DigitalOcean’s “Working with JavaScript across Web Files” (a quick read to ensure I wasn’t missing anything important)
  • Attempted to try a “bottom-up” rather than a “top-bottom” approach to completing my code
  • Reviewing a competitor’s website
  • Considering and applying Bootstrap

As a web developer “magician”, I don’t want to give away all of my secrets. Because of this, I’ll only briefly detail what progress I made today. I will say the last bullet point was a game changer for me. I have a lot to learn about Bootstrap but what I was able to apply today reminded me of how it can transform a boring HTML & CSS page into a highly responsive and cleaner looking page.

One issue that I was able to fix today was an issue with an <img> tag. I couldn’t see what was wrong with my page and why a banner I made wasn’t displaying correctly. Thanks to a W3Schools’ article, I was able to find that I needed the src attribute instead of href. I also made some progress on resizing this photo but I’m not completely satisfied with how it looks. I most likely will revisit later and hopefully find a way to make it responsive with the page.

I was also able to fix some elements in the header and footer. One of these was using Bootstrap classes for the links’ colors instead of my own CSS classes, found here. Ensuring the footer filled the entire width of the browser, regardless of how it was resized, was achieved through the class “container-fluid”, which was described here. The rest of my time was spent trying to apply the <nav> class attribute as well as fixing some issues with the footer text.

Even though my hour whizzed by quickly, I was happy to see I made some more progress today and how Bootstrap was able to help me achieve some of the goals I wasn’t able to determine earlier. I’m looking forward to learning more about Bootstrap and using its documentation tomorrow to get even more done!

Photo by StockSnap on Pixabay.