@hectorlil48
@Gehad28
Submitted
What are you most proud of, and what would you do differently next time?
Using JS to validate the form and apply style for errors
What specific areas of your project would you like help with?
Any feedback is appreciated :)
@hectorlil48
Posted
You did a good job. I noticed that your image disappears when you reach your breakpoint. I recommend making the breakpoint larger and keeping it in the mobile design. I added a breakpoint at 1000px so that when it switches, it would look good without affecting the image. Also, when it's on desktop, you should add a min-width so it won't stretch with larger screens.
Marked as helpful
@Medido1
Submitted
any feedback is welcomed
@hectorlil48
Posted
Great work on this, but you may need to adjust the spacing. On desktop, there's too much space between the share div and the paragraph. Also, don't forget to change the border-radius on the image.
Marked as helpful
@hectorlil48
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud that I was able to make it responsive. And finally getting to use the calc() function, makes me understand it better.
What challenges did you encounter, and how did you overcome them?
I don't have much experience making a website responsive. I got to work with media queries and use the CSS calc() function to make my fonts responsive.
What specific areas of your project would you like help with?
All feedback is welcomed!
@hectorlil48
Posted
Thank you for the comment. When I was doing the project, I looked up how to make my font sizes more responsive and that's what I found. But from doing more projects I discovered that just using media queries to change the font will be easier and confusing. For the box shadow, I use this generator online and try to make it look as close as possible, they provide it with the -webkit and the -moz. I will look into my project's height but have begun using clamp and media queries to make my projects more responsive.
@Stephanie-Dennehy
Submitted
What are you most proud of, and what would you do differently next time?
I am proud that I was able to make the design adjustments as the page shifts from desktop to tablet and to mobile.
What challenges did you encounter, and how did you overcome them?
I had some issues with getting the correct images to show up on the correct layouts. I was able to hide the images using media queries so that I only got the images needed based on the layout size.
What specific areas of your project would you like help with?
I would love to know if there is a different way to lay out the images and have them swap at the different size breakpoints. (I used media queries and hid images at different breakpoints). Any suggestions for other ways to do this would be appreciated!
@hectorlil48
Posted
Great work on this project. I encountered some difficulties with the images when trying to hide them. I noticed that the dividers expand based on the screen size in your solution. I suggest putting step one and two in a div that wraps both the number and the bar. After making this change, I set the circle's height and width to ensure it stays the same size.
Marked as helpful
@Ayyubiy90
Submitted
@hectorlil48
Posted
Hey, it's looking good. Good job! You might want to add another breakpoint. Maybe make it a 2-column layout for tablet size. Using animation will help smoothen the transition between breakpoints.
@DiegoAlvees
Submitted
@hectorlil48
Posted
It looks good. Good job on making it with React. I just learned it and I hope to use it on my next project.
@TarekGawish1
Submitted
@hectorlil48
Posted
Hey it’s looking good. Just need to make it responsive. Try using responsive units for font sizes with em or rem units. To make the design 1 column, you need to use media queries to set the breakpoints on when you want it to change. Over all it looks good, just keep at it.
Marked as helpful
@MarqCodesFromZero
Submitted
@hectorlil48
Posted
Hey, it's looking good. I would suggest that you wrap everything inside a div like you have but inside of the main tag. Having proper semantic HTML tags will help screen readers navigate through your page. Also taking a look at the style guide and taking the time to add all the colors to a :root tag would be helpful. That way you always know what colors to use from the design.
@FrankBonanno
Submitted
@hectorlil48
Posted
Great job on completing the social links project. I just finished it too and I was looking at your code. I noticed that you have two resets going on and you don't need both. I also noticed that you are targeting some of your HTML tags more than once and that can probably throw you or someone looking at your code off. Try using classes to target some of your tags. And you should look into using semantic HTML tags, that would help a visually impaired person navigate through your website. If you have any questions, please let me know.
@DolbyTheSheep
Submitted
@hectorlil48
Posted
It looks good, you should consider using a div tag to separate the content from the image instead of using another main tag. The main tag is semantic and should be used to separate the main content of the page and the div tag is not semantic and should be used to group content related to each other.
@chrisvn1808
Submitted
What are you most proud of, and what would you do differently next time?
I give myself the second chance to learn to code. And this is the second time to do projects with Frontend Mentor and I feel really excited.
I learned basics of HTML, CSS and JS via The Odin Project (another great site to learn web development). Now I want to use my knowledge to make as much project as I can to cement my skills.
Happy coding guys!
What challenges did you encounter, and how did you overcome them?
I don't have any challenges to complete the project
What specific areas of your project would you like help with?
Feel free to check out my solution and feedbacks are valuable to me.
@hectorlil48
Posted
Nice job, I like the way you set up your code.
@Raul-madero
Submitted
I would gratefully accept every suggestions
@hectorlil48
Posted
Hello Raul, congrats on completing this project. You shouldn’t you the html tag to set global styles like the font family, which should be set using a body tag. When setting font sizes, you should use em or rem units, not percents. Adding 100% to the main container is not doing anything because block elements already occupy all available space. For the paragraph you should not set a width, try adding padding to the right and the left instead.
Marked as helpful
