Frontend Mentor | rafi b's profile

Latest comments

P
JJorgeMS13•440
@JJorgeMS13Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
Me encanto poder validar mi formulario solo con JavaScript, la proxima vez buscaría hacer mi codigo mas limpio.
What challenges did you encounter, and how did you overcome them?
Encontre el reto de cuando cambiaba de tamaño mi desarrollo y cambiaba de la ventana logueo a la ventana del mesaje de gracias me mostraba las dos ventanas al mismo tiempo y no importaba que tenia una clase para que una de ellas desapareciera lo que hice fue poner a mi porpiedad Display: none !import; para ganarle al display: flex; que le puse en el media query.
What specific areas of your project would you like help with?
Me encantaria que me ayuden a hacer un mejor codigo y poder aplicar las mejores tecnicas de codificación para hacer mucho mas facil una posible cambio en mi desarrollo.
Pagina responsiva creada con HTML5, CSS y validada con JavaScript.
1
rafi b•260
@raficode2303Posted 7 months ago
the solution include semantic HTML. the site looks the same as the solution. the code well-structured, readable, and reusable great for using FormData() at app.js

to improve:

Success message page should be a different html page

the message text need to include the email that the user entered and not always 'ash@loremcompany.com.'

the responsive of the page in the mobile mode need more improves include breakpoints. -- the image at 1023px is still of the desktop, but it need to be of the mobile.

bonus: try to use .card__info__list li::marke with style-image instead .card__info__list li::before keep to build 👷‍♂️
Marked as helpful
0
Jstickz•270
@JstickzSubmitted 8 months ago
Article Preview Master Component
1
rafi b•260
@raficode2303Posted 8 months ago
the page looks great, the tooltip is well done. some notes:

the page shold be centerd horizontally and verticlly

the image view isn't as the design

some colors are not the same as the design

when i resize the width to very small the page breaks up, try to fix it. good job, keep to build 👷‍♂️
Marked as helpful
0
Urias Ramos•170
@Urias-RamosSubmitted 10 months ago
What are you most proud of, and what would you do differently next time?
I feel proud to complete the challenge and improve little by little.
What challenges did you encounter, and how did you overcome them?
I experienced an issue with the page layout where certain sections were hidden and did not scroll correctly when reducing the browser size. However, I managed to solve it by implementing the following CSS properties:

min-height: 100vh; flex-grow: 1;
What specific areas of your project would you like help with?
any help is welcome
Four card feature section
1
rafi b•260
@raficode2303Posted 10 months ago
the solution look great. it almost 100% like the design.

need to add a little box-shadow for the cards

when the cards resize to smaller width, the width is not the same for all of them. and also the image icons shrink to 0 width almost.

tip: when you write parts of code, put it between . like this: min-height: 100vh; flex-grow: 1;` keep to build 👷
Marked as helpful
0
Miarinaly•80
@Mys1337Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
The project didn't take a long time to finish and I'm becoming more faster since my first project.
What challenges did you encounter, and how did you overcome them?
Nothing was really challenging. Just had to do some review for the html table
What specific areas of your project would you like help with?
I don't have any specific questions of feedback. But I would like to have your opinion about my code (quality, reusability, readability,...)
Recipe Page With HTML & CSS
3
rafi b•260
@raficode2303Posted 11 months ago
the most important i noitced is that the site height is too long, try to make it to be no more heigher then the device height with extra padding at the top and the bottom.

Preparation time section need padding

not all the list style colors is the same as the design

there is no color to the Nutrition values

keep to improve and keep to build 👷
Marked as helpful
0
P
Matthew•350
@MattJM1007Submitted 11 months ago
What are you most proud of, and what would you do differently next time?
Overall this was a fairly straight forward build.
What challenges did you encounter, and how did you overcome them?
I am still struggling with getting the spacing just right between elements with padding and margins. I feel like there should be an easier way to do it. I also find that the text doesn't look exactly like the design file, even though I put in the same font and properties that are in the design. I am not sure why this is.
What specific areas of your project would you like help with?
Can anyone provide tips on how to format/layout the text elements? Is there a better option than what I did? Also, how are my media queries? Anything I can improve there?
Responsive Product Card
4
rafi b•260
@raficode2303Posted 11 months ago
as @kodan96 said, try to not use fixed sizes to solve ptoblem. it make the site look like an fixed image and not responsive for all devices, remeber css is responsive by default. by adding fixed sizes you make it un-responsive. you use codes like margin: 19px 19px 19px; in many tags, padding to the parent container is best practice as @kodan96 mentioned. using css flex/grid is more modern soultion. you will achive more with less code. keep to improve and keep to build 👷
1
P
andiaz•150
@andiazSubmitted 11 months ago
What are you most proud of, and what would you do differently next time?
Using SASS for the first time felt good! This made it easier to read CSS variables. Was quite easy to setup together with Node.js.

It also felt good to go through the design section by section and feeling in control when implementing the design.

I did try a new CSS reset that I found which honestly made things more complicated and gave me more things to reset, ironically enough. So in the end I decided to stick with a basic CSS reset that just removed the default margins and paddings on elements, and set the same box-sizing on everything :)
What challenges did you encounter, and how did you overcome them?
The trickiest part by far was making the images responsive, and also swapping the images on desktop vs mobile. I am not sure I have done it in the best way though, but it seem that the images are shown as intended! I also spent some time to test the design in the browser on mobile resolutions and with different screen orientations and found some small bugs thanks to that, which I fixed.
What specific areas of your project would you like help with?
Generally any best practices I should follow, in particular for handling the images. Also general feedback is always appreciated!
Product preview card
1
rafi b•260
@raficode2303Posted 11 months ago
Does the layout look good on a range of screen sizes? the site is almost 100% like the design 👍. good work.

for some reason the site not work wekll as expected at Mozila Firefox browser

need to add focus state for the add-to-cart button interactive element

improvements could be made:

try to use css ::before pseudo-element for adding the cart-icon instead using <img /> tag

try to use <picture> atg with srcset attribute insted using 2 <img> tags for the product image

is better to use css min-height instead height at .container class

try to use CSS custom properties bonus: try to build it with css GRID instesd Flex

keep to build 👷
Marked as helpful
0