Tag Archives: prototype homepage

Practice, practice, practice!

Leave a reply

As I glanced at the syllabus for this week’s assignments, I could not help but my find myself stressing out about creating a prototype homepage. Might I add, this feeling lasted for majority of the week and resulting in me avoiding Web Development homework at all costs. On Sunday morning, I decided it was time to stop being dramatic and begin digging into Codecademy lessons: “A Closer Look At CSS,” “CSS Visual Rules,” and “CSS Setup and Selectors” before taking a stab at the prototype homepage. Procrastination at its finest? Yes, but I have quickly found that procrastination might not be suited for the newbies of the coding world.

In last week’s post, I compared coding to my experience of learning a new language. I remember it became apparent that I needed to practice Arabic each day to become more proficient at the language. I don’t believe that procrastination is suited for learning languages, and neither is it for learning code. For this upcoming week, I have made it a goal of mine to practice the class material each day of the week to feel more comfortable with the different languages and desktop apps like Sublime Text and GitHub. Once I reviewed Codecademy lessons from last week and completed the new lessons focused on CSS for this week, I felt more confident in testing out some of the tags for my homepage. Honestly, I have a hate/love relationship with CSS. I think it is incredible that I can style the HTML text, but naming some of the HTML text as a class or ID confuses me. I feel like I am having trouble deciphering whether sections of the HTML text should be a class or an ID. I’m hoping to ask many questions in tomorrow’s class about this!

Also, I must owe credit where credit is due and thanks to Susan I was finally able to set up my brand new laptop with Sublime Text and GitHub while understanding how the connection of these apps work. I am still a little confused about the full functions of GitHub even after this week’s readings, but I am excited to become more acquainted with it in the future.

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

1 Reply

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.