Project One Reflection

Wow, what a project — in such a good way, and in a somewhat frustrating way, too.

I have a bit of history working on websites, but mostly with user-friendly tools like WordPress, Squarespace, WooCommerce, and the likes. I've never really learned how to code (save for MySpace circa 2006, RIP), much less understand CSS. Because of this, I had big ideas for what I wanted my first project to look like, and these lessons quickly knocked me down quite a few pegs.

First, some things I struggled a lot with:

  • Classes and IDs
    • I understand the gist of them, but I know I still have a lot more to learn when it comes to organizing these.
  • The stylesheet in General
    • WOW, there are so many ways to do the same thing. I had a vision for how I wanted my website to function, and I probably searched for at least three hours reading about 50 million ways to do what I want. It was trial and error for sure!
  • Remembering What I've Learned
    • I felt like I really "got it" doing all the lessons in FCC and in the Web Dev website. But the second it came to building things on my own, I completely blanked. I'm hoping it comes more naturally the more I practice.

Ah, the things I am SO proud of. Be nice! :-)

  • The Parallax
    • Okay, so my vision for the website was to have a static image that eventually gets covered up by the rest of the content when scrolling. I also did not want the nav to disappear through all of this. I spent the most amount of time on this piece of the CSS, testing things and deleting lines and lines of code, and finally (legitimately) screaming when I finally got it looking right. I know why the code works the way it does, but I also know it could probably be worked better.
  • The Cursor
    • Somewhere in the lessons or research, I saw an example of a custom cursor, and I wanted to try it out. I took a free icon from Font Awesome and coded it into the style sheet. It's a bit weird, but I love it!
  • The Font Choices and Styles
    • Transparently, I had to consult ChatGPT when I was going through the Fonts lesson. I wanted to try the Font Effects, but it just wasn't working. I threw the code into Chat and I quickly found out that the code on the Google Font Effects website is outdated, which then led me down a rabbit hole of all sorts of decorations you could do with fonts. I chose a few styles that work together, and then formatted the h1s of each page to make sure the colors were accessible against the photos.

A few last notes about Project One. With the images being part of the stylesheet, I realized that alt tags were not possible. I did, however, find a website that explained for CSS specifically, you could add a the "aria-label" class with the attribute as the alt text, and screenreaders would read it just the same. I think with more time and more understanding, this could be simplified greatly, but for now, I hope this is sufficient for accessibility. I also hope that as I progress through this class, I gain a better understanding of organization for classes, IDs, and sections, and I would love to expand my knowledge on building shapes, designs, and animation through html. The opportunities really are endless!