All comments

P
JJorgeMS13• 250
@JJorgeMS13
Submitted 18 days 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• 280
@raficode2303
Posted 17 days 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 '[email protected].'

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• 90
@Jstickz
Submitted about 2 months ago
Article Preview Master Component
1
rafi b• 280
@raficode2303
Posted about 2 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
P
pablodev• 430
@Pabloodev
Submitted 4 months ago
What are you most proud of, and what would you do differently next time?

Hello guys ❤️

This was the biggest challenge for me so far, I still didn't know how to use the CSS grid and this challenge made me chase that knowledge!

Little by little I'm getting better at reading documentation, as I had to read a lot, but I learned and got along well with CSS Grid

What challenges did you encounter, and how did you overcome them?

CSS Grid columns widths At first I only knew how to define the column size in CSS grid using ''1 fr'' which left me very limited and I had difficulty with this when adjusting the window size

A bad css? As I didn't know exactly what I was doing, maybe my lines of code were messed up?

Anyway, I hope that you can helpe with some tips 🤓🧠

What specific areas of your project would you like help with?

Any tip is very welcome and valuable, thank you!
pablodev | Testimonials Grid Solution
1
rafi b• 280
@raficode2303
Posted 4 months ago
the layout looks good, i noticed some little things:

the page max-width need to be smaller => smaller cards.

jeanette card should not be the 2nd card at mobile/tablet mode.

there is no need .cards{min-width: 375px;}, just remove the body{ margin: 6vw 10vh;} and leet css to do it responsive thing. try to avoid fixed sizes. the center of the page horizontally and vertically shouldn't be depend on fixed margin. not all screen the same. try to find a better way to center the page.

try to avoid things like: .kira {grid-area: kira;} and <div class="card kira">. the names is to specific. think what will happen if you was told to replace kira card with john card.. it was meanning that you was needed to change many HTML and CSS lines. better way is something like: .card-5{grid-area: card-5;} and <div class="card card-5">. try to keep it modular /component that can fix to wide possibilities.

great work, keep to build! 👷‍♂️
Marked as helpful
0
Urias Ramos• 170
@Urias-Ramos
Submitted 4 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• 280
@raficode2303
Posted 4 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
@Mys1337
Submitted 5 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• 280
@raficode2303
Posted 4 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• 190
@MattJM1007
Submitted 4 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• 280
@raficode2303
Posted 4 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
@andiaz
Submitted 4 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• 280
@raficode2303
Posted 4 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
Julian Reyes• 130
@Julian17xd
Submitted 5 months ago
recipe page with html and css
1
rafi b• 280
@raficode2303
Posted 5 months ago
1.font-weight of most of the site is too bold - use only where it needed

use the colors like in thes design to all the elements.

<li> tag text alwys need to start from the same place no matter how many rows there is. try diffrent way to handle it. remember: too-much-css create more issues to handle.

at mobile mode you need to vertically centering the ::marker pseudo-element so it will be at the middle of the <li> text

yoy did a great job. keep to build 👷
Marked as helpful
0
P
Abouelhouda Iliass• 480
@ilyesab
Submitted 5 months ago
What are you most proud of, and what would you do differently next time?

I'm proud of using a native API for the form validation as it does some heavy lifting.

I also tried to write the html / CSS / JS in a structured / readable / understandable matter.

Next time I'd like to try out form validation using a well known library or framework.

What challenges did you encounter, and how did you overcome them?

The main challenge was the form validation. for that I relied on the Constraint Validation Native API.

When the form is submitted we call form.checkValidity() native method which returns if the form is valid based on the controls attributes / types. and trigger invalid events on any controls that don't pass validation.

We listen for the invalid and change events on the inputs and we call a function that adds the errors indicators based on why the input is invalid or remove them if the input is valid. also relied on the :invalid pseudo class selector for styling the invalid inputs.

What specific areas of your project would you like help with?

I would like to know if my code is readable and understandable by other developers.

Thank you for viewing my solution!
Intro Component With Signup Form
1
rafi b• 280
@raficode2303
Posted 5 months ago
i like the :invalid pseudo class selector for styling the invalid inputs. the native API for the form validation works great but it not good for space characters the solution looks like the design 👏 keep to build 👷
1
Rod• 90
@RodRyan19
Submitted 6 months ago
What are you most proud of, and what would you do differently next time?

I did this fast! Hopefully I can code faster haha

What challenges did you encounter, and how did you overcome them?

to use ul list or anchor

What specific areas of your project would you like help with?

would love feedback on everything
Social Links Profile- Responsive
1
rafi b• 280
@raficode2303
Posted 6 months ago

the avatar image should be a little bigger

the font-weight of the loacation should be bolder 👍this is good solution, keep build 👷

0
Timelessgreed• 70
@Timelessgreed
Submitted 6 months ago
What are you most proud of, and what would you do differently next time?

It was fun project.

What challenges did you encounter, and how did you overcome them?

Margin and paddings. JUST TRY A LOT OF MARGINS AND PADDINGS, it will eventually work.

What specific areas of your project would you like help with?

NA
Blog-preview card
1
rafi b• 280
@raficode2303
Posted 6 months ago

there is no :hover and :focus animation

the card don't responsive for mobile and small devices -- example: all text is fix widt and not reponsive, be awate that css is respnsive by default -- the text paragraph should be a little small on mobile mode

the paragraph text isn't the same as the design 👷keep to build

Marked as helpful
0
Miguel Angel Barahona• 20
@miguel0920
Submitted 6 months ago
What are you most proud of, and what would you do differently next time?

learning css flexbox and grid

What challenges did you encounter, and how did you overcome them?

organize the html

What specific areas of your project would you like help with?

CSS
QR usando css Grid y Flexbox
2
rafi b• 280
@raficode2303
Posted 6 months ago
the last paragrph is not 3 lines at the design
0

rafi b

All comments

Pagina responsiva creada con HTML5, CSS y validada con JavaScript.

Article Preview Master Component

pablodev | Testimonials Grid Solution

Four card feature section

Recipe Page With HTML & CSS

Responsive Product Card

Product preview card

recipe page with html and css

Intro Component With Signup Form

Social Links Profile- Responsive

Blog-preview card

QR usando css Grid y Flexbox