Google is a Girl’s Best Friend: My First Attempt at Coding

This week’s prototype homepage assignment was my first attempt at creating a webpage using HTML and CSS. It would be a huge understatement if I said that I struggled with this assignment. I decided to create a prototype homepage for a personal portfolio site/blog, and creating just a single page with HTML and CSS took a great deal longer than I had anticipated it would. I was grateful that I had completed the Codecademy lessons 3-8 earlier in the week, as it gave me more time to work on creating the homepage over the weekend.

I encountered a number of issues when coding the HTML and CSS for my homepage, the first being perhaps the most simple element of all—linking my CSS stylesheet to my HTML code. I’m going to be honest and say that it took me more than an hour-and-a-half of troubleshooting to resolve the issue and to correctly link my style sheet. This brings me to the title of this blog post—Google really is a girl’s best friend when attempting to code. I cannot begin to explain how many times I Googled various aspects of HTML coding and CSS styling while working on this assignment. I found that referring back to the Codecademy lessons was often not enough, and that I needed additional assistance from the w3schools site and other sources to correct my code. Some of the issues I struggled with included figuring out how to add margins around the text and image on my homepage; applying the classes, IDs, and div concepts to my HTML; and creating and styling a navigation bar. The latter concept was referred to during the Codecademy exercises, but I had to enlist the help of Google, a w3schools tutorial on navigation bars, and a classmate (thank you, Amalia!) to fully comprehend how to create a navigation bar at the top of my site. I’m still not entirely pleased with the formatting of my navigation bar, as I wasn’t able to figure out how to increase the space between the various links/tabs. I hope to resolve this issue in the coming weeks. I also want to figure out how to get my h1 headline and navigation bar to appear on the same line, rather than stacked as they currently appear on my homepage. Does anyone know how to do this?

I read the articles on responsive web design after I had begun working on my homepage. These articles reiterated the “mobile first” mentality that seems to be pervasive among programmers and developers. With the majority of sites being accessed on mobile devices such as phones and tablets, it is important that a site’s design accounts for the different screen sizes that viewers are using to access the information. This “mobile first” mentality is also something that public relations and marketing practitioners consider when creating content for their target audiences. Making your client’s or brand’s content easy to access from a variety of devices ensures that your audience will be able to access the content using the method that is most convenient to them, thereby allowing it to reach a broader audience. I’m still a bit confused about the concept of media queries and how to apply them in my code, but I am sure this is something we will cover in class in the coming weeks.

I was able to upload my prototype homepage without issue using the GitHub desktop app, but I did find that the interface of my desktop app was different from what was featured in the “Getting Your Project on GitHub” article. Despite this, I found creating a new repository and adding my code files via the GitHub app to be relatively straightforward.

Here is my GitHub prototype homepage repository.

1 thought on “Google is a Girl’s Best Friend: My First Attempt at Coding

  1. Greg Linch

    “I wasn’t able to figure out how to increase the space between the various links/tabs.”
    – Wrapping those in a div with the same class, setting the width of the div and/or using margins should help:

    https://www.w3schools.com/css/css_navbar.asp

    “I also want to figure out how to get my h1 headline and navigation bar to appear on the same line, rather than stacked as they currently appear on my homepage.”
    – Check out floats:

    https://css-tricks.com/all-about-floats/

    “I’m still a bit confused about the concept of media queries and how to apply them in my code, but I am sure this is something we will cover in class in the coming weeks.”
    – This course has no requirement to write media queries, although you certainly could as part of the final project. Here’s another resource with examples:

    https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.