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 (8)
It's a shame that you are finding CSS to be a pain. It sounds like you have possitive feelings for both TOP and FCC.
Your project is going pretty good, but when I look at the code - I'm surprised that semantic elements like header, and section aren't being used. It seems strange that those platforms wouldn't be teaching the proper HTML. I looked into TOP's foundation course and checked out some student work. It led me down quite the rabbit hole, and I ended up spending the rest of the day making a video about it. Here it is! In case you want to check it out. pe/stories/odin-landing-page-proje...
Hey! Thanks for the comment. CSS is getting better as I’ve gotten more used to flexbox. World changer for sure haha.
The lack of semantic HTML is my fault 100%. FCC definitely has a section on it, and I need to do better at using it for accessibility. Part of the reason I am putting my FCC projects on GitHub is to go back and improve them later, and part of that will be accessibility semantic HTML.
Yes, of course! : )
But there's no reason to type
<div id="header">when you can use the<header>element the first time. It's easier - for you! And it's correct. Some things will certainly be refactored later - but I'm just suggesting that you get the muscle memory for the basics - now while you're learning, and you can use that refactoring time for things that are much more complex. ;)Keep up the good work!
Thanks will do!
Also thank you so much for taking a look at my code. I’m always open to feedback and how I can better improve!
Nice to see that you had this nice succsess in.your coding journey :) I am also working through the CSS chapter at freecodecamp now. How much time you spent in a week to working through both coding camps?
Hey @sbstn that's fantastic! Keep it up. It depends on how much time I put into it each day. Some days, personal life and home stuff keep me from doing much and other days I can put 3-4 hours into learning. I take it one day at a time.
freeCodeCamp's CSS course is excellent. A great intro to grid and flexbox. Flexbox is definitely something others say to focus on, and practice as much as possible with that on your final 5 projects. I'm around if you have any questions!
In the event that you pick a quality club, I encourage you to play on the site Gambling club canadacasinosonline.com/game/anaco.... I for one checked this club for me and because of this asset alone, I figured out how to bring in a great deal of cash rapidly and without any problem! Cash is removed easily. so go ahead and play here!