Submitted about 1 month ago

Skilled E-learning Landing Page

@RiickyRiick

A solution to the Skilled e-learning landing page challenge

Solution retrospective

What are you most proud of, and what would you do differently next time?

This project design had me in a twirl. The background image was a hassle! I couldn't get it to work until I used @media queries, but I feel this was a bit messy since my design ended up being very glitchy.

I managed to make it work somewhat, but in the end, I need to find a better approach and/or figure out how to correctly use @media queries with background size and position.

Another mistake I made was not making my text and text containers responsive. I accidentally added px instead of % so that they could size correctly with the viewport.

What challenges did you encounter, and how did you overcome them?

Coming into this project, I learned that setting up a background image can be very difficult. I struggled to position the image correctly within all the viewports, which meant not having fluidity when changing throughout all the viewport sizes; instead, it had a glitchy, small-to-big change in size.

I got some good responsiveness after I used the % and vw to get a responsive outcome.

I also made the mistake of not using px instead of % on my .main-header, which created an unresponsive box.

What specific areas of your project would you like help with?

If you can give me any advice or tips for a better solution with background-image positioning or another better option instead of the background image, please do. I would appreciate it very much!

Happy coding and blessings to all!

Code

Please log in to post a comment

Community feedback

P
Michael•180
@Networksentinel
Posted about 1 month ago
Hey man! 👋

Just wanted to say—I really love seeing the effort you put into this challenge. I totally get the struggle you're talking about. I go through the same rollercoaster with every project 😂. Frustration, confusion, a bit of despair... and then boom—“Yo, I got this!” That feeling when it finally clicks is the best. And yeah, every time it gets a little easier and cleaner.

Anyway, I think your final result turned out awesome! It looks clean and works well on all screen sizes. Great job on that 🙌

I checked out your code and had a couple of small suggestions—nothing major, just stuff that might help you level up a bit:
1. You’re using a lot of <div>s. Totally fine, but here’s an advice that stuck with me: "If there’s a more meaningful HTML tag, go for it-avoid using <div> as much as possible. Your accessibility and SEO will thank you latter." 😂. Like this bit:
```
<div class="nav-header">
  <h3 class="nav-title">skilled</h3>
  <button class="nav-btn">Get Started</button>
</div>
```
That could easily be a <nav> (which is what it's doing anyway), or maybe even a <header>. Speaking of <header> brings me to the next point...
1. You’ve got classes like nav-header and main-header, which is totally cool, but there's actually a <header> tag you can use. Every section can have its own <header> and <footer>, and your main one can sit right at the top of <body>, outside of <main> for stuff like - logo, navigation, call-to-action button, etc.
2. Your CSS is all in one big file, which works, but splitting it up with some comments (like /*GENERAL STYLES*/, /*NAVIGATION*/, /*MAIN*/, etc.) helps tons when you come back to it later or if someone else checks it out (especially when working in a team).
- Also, something to look into: MODULAR CSS. You can have a separate file for each section (like general.css, nav.css, main.css, etc.) and import them all into one main CSS file - and only that one will be linked to your index.html. It keeps things clean and more readable, especially if you ever start using Sass or another preprocessor.
- NOTE: Modular CSS is a little harder on performance, but on small projects it's absolutely fine — on bigger or more complex projects, the best way is to use a pre-processor (like Sass or Less) and even better, pair it with a build tool (like Vite).
1. Tiny detail, but adding a couple of <meta> tags in your <head> (like description and author) is a nice touch—makes your project feel more complete.
Overall, it really looks like you’ve got a solid handle on HTML and CSS, and it’s obvious you care about getting better.

Just wanted to share a few tips that helped me too. I hope this will be of some value to you. Keep it up, man—you’re doing awesome! 💪
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord