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

myteam multipage SCSS / Vanilla JavaScript

Elie Bissorβ€’ 265

@ElieB77

Desktop design screenshot for the myteam multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hello, ElieB77! πŸ‘‹

Wonderful job on this challenge! πŸ‘ Everything looks pretty good and responds quite nicely! πŸ‘ As emestabillo mentioned, your attention detail is great! πŸ™Œ

I just suggest adding some alt text to the logos on the page to clear up your solution report a bit. πŸ˜‰

Keep coding (and happy coding, too)! 😁

1

Elie Bissorβ€’ 265

@ElieB77

Posted

Hello @ApplePieGiraffe,

Thanks for the compliments,πŸ˜‰ I'm a little disappointed regarding the margins and padding though, I need to find a tool that give me the exact pixels of white space between elements on the figma design file..

I know, I always neglect the alt, πŸ˜‚ I've tried to edit the sass files directly on github but changes doesn't apply.. Do you know if I can do that or do I have to go back to vs code to edit the files and reupload everything on github ??

Thanks for the feedback ! πŸ˜‰

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@ElieB77

If you use Figma to access and use the design files, you can select an element and then press the alt key and hover over other items with your cursor to see the exact distance between those elements in pixels. Also, check out this Chrome extension called PerfectPixelβ€”it allows you to overlay images over your website to see exactly how your website matches up with the design. πŸ˜€

As for the alt text, all you need to do is edit the HTML file in VS Code and then stage, commit, and push your changes to GitHub. If you linked your project in Vercel to a GitHub repository and you pushed the new changes to the master branch of your project (and it looks like it's set up that way by default), your website should automatically update to reflect those changes in a few minutes.

Let me know if that helps! πŸ˜‰

1
P
Emmilie Estabilloβ€’ 5,540

@emestabillo

Posted

Hey Ellie, awesome work! Love the attention to detail. The only thing I saw was that when I check it on mobile ios, I get a horizontal scroll on the homepage. Would've also been great to see some transitions on the flip cards, but that's a minor thing :-)

1

Elie Bissorβ€’ 265

@ElieB77

Posted

Hey @emestabillo,

I thought I fixed the horizontal scroll by adding <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" /> (even though it's not recommended)

I guess the chrome responsive tool is not that accurate, If you know of a better and more accurate tool for responsiveness, feel free to share ! 😜

As for the flip cards, I got lazy ..

Thanks for your feedback ! πŸ™Œ

1
Jesutofunmiβ€’ 80

@tofydebo

Posted

You did a good job there

1

Elie Bissorβ€’ 265

@ElieB77

Posted

Thanks @tofydebo ! πŸ‘

0
Elie Bissorβ€’ 265

@ElieB77

Posted

Yes it does ! Thank you !πŸ™Œ

0

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