Latest solutions
Age calculator app with React and Vite
PSubmitted over 1 year agoI would appreciate some assistance in optimizing my code further, especially in terms of performance and readability. Additionally, if there are any best practices or design patterns that I could apply to enhance the overall structure of my project, I'd love to learn more about them.
Newsletter signUp with React + Vite and Redux
PSubmitted over 1 year agoMoving forward, I would appreciate assistance in optimizing the project's performance, particularly in identifying and addressing any inefficiencies in Redux state management.
Latest comments
- @aheduardo5P@Creixz
Hello my friend, congratulations for finish this challenge, i like your BEM methodology and the mobile-first design, but i have some suggestions for you:
- It's better to use rem instead of pixels.
- The color of the
<p>
and<li>
are incorrect. - Use pseudo-elements like
::before
, it could help you with yourlist-style
Marked as helpful - @BenheminWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
P@CreixzHello my friend, congratulations for finish this challenge, let me show you some details that can help you to improve your code.
- It's better to use good classnames that can make your code more understandable, I use BEM like this:
<section classname= 'card'> <article classname='card__title'> <p class='card__title-description'>Your text here.</p> </article> </section>
- Use
margin-left=auto
andmargin-right=auto
to center your card. - It's better to use rem instead of % or pixels.
- Use max-width instead of width, it will look better.
- @luizariloP@Creixz
Hello my friend, Congratulations for finish the project, its seems pretty good, but I have some suggestions regarding your solution if you don't mind:
- Use BEM methodology it's a good practice, like this:
<div class="card"> <div class="card__header"> <img class="card__img" src="images/image-qr-code.png" alt="Qr-Code">
- Put the card inside the container, like this:
<section class="container"> <div class="card">
- Don't use and specific
height
for the img, just usewidth= 100%;
to adjust to the container and not use unnecessarymargin-top
.
Thank you for taking the time to read my feedback I hope it helps.
Marked as helpful - @ofekshmuelyP@Creixz
Hello my friend, Congratulations for finish the challenge, its seems pretty good, but I have some suggestions regarding your solution if you don't mind:
- You can implement BEM's methodoly because it's a good practice and its not so difficult. Example: Instead of
<div class="container"> <div dclass="container"> <img class="qrcode" src="./images/image-qr-code.png" alt="">
use this
<div class="container"> <div class="card"> <img class="qrcode" src="./images/image-qr-code.png" alt="qrcode" class: card__image>
- Use
max-width: 350px;
in yourcard
because its a mobile design and then usewidth: 100%
in yourcard__image
to adjust theimage
to thecard
Thank you for taking the time to read my feedback I hope it helps.
Marked as helpful - @MURRAY122P@Creixz
Hi Murray122, first of all contratulations for complete the challenge, I think you do a pretty well job and I have some suggestions regarding your solution if you don't mind:
Instead of put the
icon-view
in your html, I think its better to put in your css code, like this:.card .image::before { content: url(images/icon-view.svg); position: absolute;
I saw that you use BEM's methodology, but i think that instead of this:
<div class="section__content"> <h1 class="section__content__title"><a href="#">Equilibrium #3429</a> </h1>
you can use this:
<div class="section__content"> <h1 class="section__title"><a href="#">Equilibrium #3429</a></h1>
because it's not necessary to repeat all the name, i saw in many post that is not a good practice. Hopefully this feedback helps.