Simple Dynamic Mobile/Desktop Design

What are you most proud of, and what would you do differently next time?

This is the first guided project I've completed. I'm quite content with the outcome, and I felt that it was a good start to learning the bare basics of HTML and CSS, and putting them together in one coherent webpage.

I'm most proud of the organization. Although I'm certain there is a plethora of bad habits and not-exactly-the-best-practices in my writing, in comparison to my initial attempts at creating a webpage, this is much more coherent, readable, and modular. I don't feel "afraid" to make adjustments, even if quite major. This was something I worked intentionally on, and even restarted a few times to make sure I was being diligent about my practices. I think it paid off for sure!

One thing I wish I did differently was to rely more on community-trusted resources as I was working through rough patches and hurdles. I found myself working through this largely on my own with the knowledge I have acquired through beginner courses (namely Codecademy's HTML and CSS basics), but for some concepts (@media, display, :root, etc.,) I would look to AI resources such as ChatGPT, Claude, Gemini, and so on. Although I think these have value in teaching me how to write better code, I fear that I might be learning processes that aren't aligned with best-practices, or the most efficient and logical solutions to my problems. If I referred more heavily to resources like W3Schools or MDN Web Docs to dig deeper and more hands-on into the fields I was looking to learn more about, I would feel that I could learn more effectively and more in line with better-written code.

What challenges did you encounter, and how did you overcome them?

One of my biggest struggles is just knowing where to start. In the beginning, I poked around and wrote a few lines of CSS to try and figure out where to go, but I found myself floundering and not exactly making much progress.

After going back and reviewing content from Codecademy, inspecting webpages and reading through their HTML/CSS, I tried to critically think about how the webpage I was tasked with recreating might utilize the tools and techniques I learned about. Starting with just getting simple things locked in like fonts, colors, and the bare bones HTML made me feel more confident in my next decisions, and ultimately, helped propel my motivation for this project to completion.

What specific areas of your project would you like help with?

One thing I found myself asking throughout the entire process was: "is this how I'm supposed to do this?" I was often second-guessing decisions and my methodologies. Because of this, I would love to learn more about two main pieces of HTML and CSS, although, any advice is accepted and greatly appreciated:

Best practices in formatting and writing:

1. What order should my CSS be in (e.g., elements first, then classes, then IDs, etc.,) Does it matter?

2. Is my HTML written how a "pro" would write it? Are there more efficient ways to use the elements I did? Are they "wrong" by industry standards?

Common patterns or solutions:

1. When writing and reading CSS, are there any default "patterns" I should keep an eye out for (e.g., I see a lot of "containers" looking quite similar, is there a standard for this?)?

2. Are there any default CSS templates that people commonly use to start off developing a webpage, or do most custom projects start from scratch?