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

Challenge completed with HTML, CSS, BEM, Flex, CSS Grid and responsive

#accessibility#bem#progressive-enhancement

@viniciusshenri96

Desktop design screenshot for the Typemaster pre-launch landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any tips to improve my code are welcome. Thanks!

Community feedback

Fatβ€’ 850

@Fahatmah

Posted

Hello @viniciusshenri96 Your works are awesome. I want to learn how did you code it or any tips to code the exact design (I'm not that perfectionist haha) or make the design very similar in sizes and padding or spaces like that.

1

Prantikβ€’ 660

@prantiknoor

Posted

@Fahatmah As he is a pro member, he has access to the design files. By this, he can know the sizes of components (div, img). With this facility, he made this as pixel-perfect. It's my thought. πŸ˜…

1
Fatβ€’ 850

@Fahatmah

Posted

@prantiknoor oh I didn't notice that. Thank you for replying :D

0

@viniciusshenri96

Posted

@Fahatmah Thanks, yes I'm a pro member, but you can use the extension Pixel Perfect Pro extension to help you design.

1
Fatβ€’ 850

@Fahatmah

Posted

@viniciusshenri96 Really?! Thank you very much!

0

@chukwudobe-Micah

Posted

@viniciusshenri96 firi reals? How does that work? It helps you calculate the pixels of each container?

0
Jeanco Volfeβ€’ 460

@engsofjvolfe

Posted

@Fahatmah I'm a begginer.. even if I have sketches or figma I can't put pixel by pixel on screen. I don't know if my basics are still weak or... Idk hahaha.

I'd really like to know how to put things together while using figma, because my projects never match that way...

0
Fatβ€’ 850

@Fahatmah

Posted

Hi @engsofjvolfe 😊

I feel you πŸ˜„ I am too, a beginner. I also want my website to be pixel perfect but I thought along the way while I am learning that it is not to be worried about.

I learned to focus more in learning and improving code as a beginner. You can still improve on making pixel perfect website but I recommend to study, learn and apply in coding such as maintaining, readable code and accessible website as a beginner.

That's a kind of summary of what I learned here in FEM Challenges 😁

Don't worry about it. Enjoy the process and happy coding! ✌🏼 πŸ˜„

0
Jeanco Volfeβ€’ 460

@engsofjvolfe

Posted

@Fahatmah

You know haha.... That's the point, even though i have learned about Look & Feel in my early days of programming and writing code and it (Look & Feel) means to be worried if the website transmits the sensations proposed by the professional designer, (more than pixel perfect); sometimes i feel frustrated that i can not get the identical results as in figma hahahaha.

Let's try to enjoy the process. Happy coding for us all. See you around

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