Sun, Aug 4, 2024
Today, I completed my final project for the first of six courses in the Codecademy Full Stack Engineer path. The project is a promotional site for a fictional old west ghost town named “Bobcat Junction.” Responsive Design turned out to be a much bigger lesson than I anticipated, but it was incredibly rewarding. The magic of this project lies in how the layout adapts to various device widths.
After completing this project, I feel like I’m truly coding again, picking up from where I left off in college, with a fresh perspective and many improvements. Codecademy’s lessons are comprehensive, but there’s always more to learn, which is exciting because it means I can continue to iterate and grow quickly.
I’ve been using Copilot and Perplexity for AI-assisted pair programming, and recently added Codeium, which have all been a helpful for providing additional insights. AI is really good at programming and always ready to help, although it is not always right, and learning is only achieved by coding.
Cross posted: Dev https://dev.to/jacobsternx and LinkedIn https://www.linkedin.com/in/jacobsternx
Top comments (2)
thats a great website, one thing you can do is to add the font height as 1.5 the body of the font that is 150%. anything between 150% to 200% is great as it is appealing to the reader.
great the hear that you have optimized it for all the devices. that is one of the big tasks. i would suggest that you should also create a sheet where you have fixed padding and margin for each of the elements that are being used and just use them for reference so as to maintain a sanity in the design aswell.
[Edit: 8/8/24 I found that in Responsive Design, for small element sizes like margins, padding, borders, and browser widths breakpoints where there are differentials used in media queries, absolute element sizes, such as pixels, are preferred over relative units such as rem. So, I don't need 4 decimal place rem values in my code!]
You're reading my mind about tracking all the layout element sizes! My only thought is most of this is css, and to make use of DRY (don't repeat yourself), or code reuse. I suspect first that I'll pick this up over time, but also that layout frameworks like React and Bootstrap may have standard values. Also, we'll follow our employer's practices.