This project is part of The Odin Project curriculum that I am currently enrolled in.
In this project, I constructed a landing page from scratch to test my understanding of the fundamentals of HTML and CSS, along with concepts like Flexbox, Git, Github, lists, links, the box model, cascade, blocks and inlines. I was given images of the design along with instructions about colors and fonts.
Prior to joining The Odin Project, I felt that my fundamentals were not solid, which was evident whenever I tried to build something. However, during my short time learning with The Odin Project, I've found that my understanding of fundamental concepts has significantly improved. It has changed my approach to coding and I'm already seeing results in how I tackle and solve problems, such as building a landing page like this one.
Before: I frequently encountered flexbox positioning issues, which occasionally led me to modify the design instead.
After: Gaining an understanding of the architecture of flexbox and its mechanisms, I learned how to structure my HTML for flexbox to function as I desired. I also became aware of default properties like flex: 1 that were operating behind the scenes.
Before: My CSS files could be very messy with a lot of duplicated properties, lots of ID beacuse of trobeling to select the right nested element.
After: Learning about what the cascade does, how specificity and combining CSS selectors work, and how inheritance affects certain properties my CSS file seems more structured, easier to understand and has less code.
Before: I had difficulty understanding the hierarchical structure of HTML elements. When I inspected others' code, I couldn't comprehend the purpose of their numerous containers and nested elements.
After: I now understand why containers and nested elements are important, and how they play a role when I move over to CSS.
The most important lesson I learned was to tackle one section at a time. Creating and styling one section at a time, and ensuring it appears as intended before proceeding, can prevent potential issues in the next section. For instance, working on multiple sections simultaneously can make it challenging to detect if a style affects more than one element. When working on a design, it's also difficult to add the correct margins and set the right width and height of elements if the previous section's measurements haven't been set yet.
I also learned a systematic approach to building a website. First, I begin with the HTML elements for one section, style it, then use Git to track changes before pushing it to GitHub. This process is then repeated for each subsequent section. This hinders me from jumping all over the place, thinking ahead and not sticking to the design.
Writing clear and informative Git commit messages is a challenge. Even though I now follow the Conventional Commits method, I still find it odd to write in the imperative mood - using 'add' instead of 'added' or 'adds'. I find it difficult to construct universally understandable messages. I aim to learn more about Conventional Commits, so I can establish a solid standard for writing commits that are useful not just for me, but for others as well.
A key area for improvement is eliminating duplicated properties in CSS and providing descriptive names for selectors. I understand how this will make it easy for anyone to navigate the CSS file and understand the styled elements. I want my CSS and HTML files to mirror each other using descriptive names but I feel like I haven’t yet learned how. This is certainly an area I will be focusing on, to develop a solid standard that mirrors industry practices.