Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀
🛠️ Built With:
- TailwindCSS
- npm - prettier
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊✌️
Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀
🛠️ Built With:
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊✌️
Hi Melvin,
Excelent work! Just to say something: For anchor elements, it is good practice target "_blank" attribute.
Then, for html markup, probably I would split main element to use it only for "join our community" container, and other two being created as section elements...all as the main part of the webpage, not all is the dominant content.
Finally, probably you have used many arbitrary values...then, could be better developing directly with css or with preprocessor. For example, class p-[1.5625rem], that you repeat often, would be faster to create a variable with that value (:root), and then you do not need to write different times.
I repeat, that is an excellent work! Is just to give some extra opinion, not best, but mine! keep working
Hi! Nice result, very good in my opinion.
Only to have some feedback. Between 375px and 520 there's bad summary view.
And the semantic and code structure of html and css files are pretty good. Only to comment the :root variables it is better to have it at the top of the css file. And for semantic probably the alt attribute in images could be better explained, all indicated as "icon" could be confusing for who need some digital assistance.
Any tips/suggestions would be greatly appreciated! I'm not the best at CSS, but I'm trying to get a firmer grasp on cleaner code!
Hi!
Very good design, some feedback: Reverse to use flex at body to place at center the component, and grid for the main container.
Like html and css file structures and writting also hover effect on summary results.
Probably, in terms to be exactly as design proposal, some text colors and lower font sizes could be better. And for classes, using some methodology ( interesting one is BEM por example ) could be better to have those better readable and ordered.
I still have problems with responsive websities
Hi!
Responsive design -> better use lower breakpoints. You have one at 1440px. Try at least two, one at 400-500px, and another at 1200-1400 that's ok.
HTML -> super important to use more specific labels and les "<div>". Example the image, never inside a div, use "<img>" and always with alt atributte ( better accessibility).
CSS Grid -> For that kind of uses better is Grid. With displaying in grid, you can develop one column for Mobile viewports, and two columns for bigger screens.
Design -> correct the margin of big title on desktop viewport. We can create only one container, inside put h2, p, and the stats, and assign a padding or margin once in the main container. With that you would correct and align all the elements correctly as the origin design.
css -> good file structure