This morning I put the finishing touches on my landing page project for The Odin Project’s Fundamentals course. We are about 60-65% through the fundamentals course by this point and have had a healthy dose of HTML and CSS content to learn. Below you can find a link to my project:
Github link: https://github.com/aaronmccollum/odin-landing-page
Page link: https://aaronmccollum.github.io/odin-landing-page/ (desktop only right now)
Thanks to freeCodeCamp, I already knew most of the concepts needed to complete this project, however I wanted to review the HTML and CSS content that TOP has for two reasons: (1) to hear the same thing explained a different way, and (2) to see if TOP includes other bits of knowledge that freeCodeCamp does not have. I found that both do a really good job presenting the basics of HTML and CSS, however The Odin Project focuses mostly on learning Flexbox only while freeCodeCamp has a section on the Grid Layout for CSS.
Flexbox is something I had not had a lot of practice with, and before doing this project I could say I did not feel confident in my abilities. I knew a lot of people loved it, however I felt it was sort of a pain. And if Flexbox is a pain, I can say from experience that working with CSS in general is a pain.
The Landing Page project really helped me here. Because of the design, you are forced to use the Flexbox model to place various elements on the page in certain areas relative to others. I learned to structure my HTML first, create my containers and parent/child containers, then use CSS to focus on certain sections at a time. If you take a look at my page, you’ll find there are five sections total from top to bottom, which I split up into micro-projects.
The hardest one was the top section, with the navigation bar at the top and the header and top image. Thinking back on it now, I should have split this section into two sections (the navigation bar at the top and the header/image section below it), and I’ll probably go back and do that later. I have started a Github projects Kanban board with ideas to make the page better in the future. A few other future ideas is to make it mobile friendly with media queries, and to replace the boilerplate content with an actual page theme. If you have any other ideas, feel free to contribute them to me in the comments section or raise an issue on Github.
Looking back on it, I feel more comfortable using Flexbox now and actually look forward to working with CSS again. More specifically I feel better with justify-content and align-items rules in Flexbox, as those are what I used a lot to place elements where I wanted them.
It was also nice to take someone else’s design and make it happen with code, as this is something that will be common when I work at a company. For me, I’m not much of a designer when it comes to webpages, and it was relaxing to already have the design completed and just focus on writing the code.
That’s all for now. I’m looking forward to the JavaScript sections next. I plan on working through freeCodeCamp’s JavaScript lessons in parallel to The Odin Project, similar to what I did with HTML and CSS. I’ll be sure to write soon on how this goes and what my first JavaScript project is.
Top comments (2)
Keep up the good work!
Thanks Alkis!