Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

E-learning (I Hate Images Edition)

#tailwind-css#typescript#react

@dorian-edwards

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Dear god working with the images drove me crazy. I went from trying to get it to stay in the corner so I made it a background image, but that looked weird on the widest screens (in retrospect I realize I could've just given that portion of the site, what I called the header, a max width as well 🤦🏾‍♂️. At any rate, I built an image component instead and used an image tag. I positioned it's wrapper with flex box and the image within with absolute positioning. I also didn't make it responsive so that it didn't shrink with the screen which looked weird. If anyone out there has a better solution, I'm all ears 😂

Community feedback

enochlee 600

@iamenochlee

Posted

lol, i don't have access to this course but i believe you have an horizontal scrollbar at some point due to the fact that you used top: xxx, right: xxx, and position: absolute to fit it, this can be fixed with more media queries, but the way i will approach this design is to not add a general margin or padding to the header, or absolute position to the image , then just give the header a {display: flex; justify-content: space-between} then apply a max-width to the image. for the content (i.e class of heading card) I would apply it a margin-left, and some margin and padding to the nav, imo making sure that my body has a width and max with of 100%. nice work, keep it coding.

1

@dorian-edwards

Posted

@iamenochlee Yeah flexbox was my first approach but the image provided doesn't look like the design, it has to be offset from the screen to achieve that effect. I readjusted some positioning and just disabled horizontal setting my main tag to overflow-x: hidden; on my second attempt. Thanks for the advice!

1
Adarsh Rai 560

@AdarshRai0

Posted

Hi Dorian, congratulations on your new challenge!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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