@Ridwan10000
What are you most proud of, and what would you do differently next time?
Nothing
What challenges did you encounter, and how did you overcome them?
The image is abit wonky as its height and width don't really match. If anyone has a good solution to knowing how to fit weird image proportions please show me.
What specific areas of your project would you like help with?
If anyone has a good solution to knowing how to fit weird image proportions please show me.
@Ridwan10000
Posted
@Hexerse Congratulations on completing the project. The design is nice. You are using CSS resets. That's very nice. The design is perfect. Just a few remarks:
<article> tag not the correct one to use to wrap the contentsMarked as helpful
@Satyam-Pandey677
Submitted
What are you most proud of, and what would you do differently next time?
none
What challenges did you encounter, and how did you overcome them?
none
What specific areas of your project would you like help with?
none
@Ridwan10000
Posted
@Satyam-Pandey677 Congratulations on completing the project. You have created a nice design. Just a few remarks:
<main> tag. It's important for SEO purpose.<label> instead in these lines: 17 and 30. Using <p> tag here would decrease the accessibility.<form> tag to take all those inputs. Also It could be coded such way that you will need less lines of code in JS to reset everything. <button type="reset"> is used to reset the form inputs. To avail its functionality You must include this inside your form. So your code could be wrapped into two <div>s and the are themselves wrapped inside the <form> tag. I mean the following code<body>
<main>
<form>
<div>
<!-- You will use this div to take inputs -->
</div>
<div>
<!-- You will use this div to show results.
Using two divs will help you to switch between mobile device to desktop
design using grid layout. -->
<button type="reset">RESET</button>
</div>
</form>
</main>
</body>
@taahir980
Submitted
@Ridwan10000
Posted
@taahir980 Congratulations on completing the project. You have created a nice design. Instead using @import rule you can also link the fonts using <link> tag. You will get the code from google fonts. It's good for performance.
@Rabelahmed
Submitted
What specific areas of your project would you like help with?
feedback is appreciated
@Ridwan10000
Posted
@Rabelahmed Well done. There should be white borders around the avatars. Also rethink of your font-sizing and line-height
Marked as helpful
@TerezL
Submitted
@Ridwan10000
Posted
Nice Code. I had many things to learn from your code.
Marked as helpful
@samir-Deve
Submitted
What 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?
...
@Ridwan10000
Posted
@samir-Deve congratulations on completing the project. Just few remarks
<main> semantic tag for the container<picture> tag to add the image<h1> it's not suggested to use <h2> element. You may change the font-size to get the layout close to the given one.action attribute to the <form> tag.@DiegoAlvees
Submitted
@Ridwan10000
Posted
@DiegoAlvees Congratulations on completing the project.
Inputs related to personal information should have autocomplete attribute set to on.
Like this <input id="email" type="email" placeholder="[email protected]" autocomplete="on">. Notice I changed the id of the input for accessibility purpose. Making the id of input same to the for attribute of label would give the label some powers. Clicking on the label will make the input focused.
@AL-Shimaa-Jamal
Submitted
@Ridwan10000
Posted
@Al-Shimaa-jamal congratulations on completing your first project. You have done a nice design. Just a few remarks:
You don't need too many <divs> to create this design. You could use width:90vw property in the .main rule.
Also set max-width:calc(375px * 0.9) this will fix the width to the highest dimension although the viewport width is expanded. Also don't use the height property in .main rule. You don't need this. Use rem/em units for padding and font-size. You don't need media queries for this project. Also try to rethink of your styling. You don't need transforms or positions to do this. Also check for the background-color.
Happy coding.
@313yaseer
Submitted
@Ridwan10000
Posted
@313yaseer Congratulations on completing the project. Well done.
We must be careful about semantic tags. It is useful to give the browser more information about the page. Also some semantic tags have built -in Accessibility.
Try to use <main> tag. Also the <button> should be wrapped around with <a> tag and not the <a> tag wrapped around with <button> tag. Also please use the style guide to follow on styling. You have been provided with colors and font-family in the file. For this project You don't need any media queries. Also try to get into the habit of using relative units like em and rem. Use these units for font sizes and margin-padding.
Marked as helpful
@centralparkshark
Submitted
@Ridwan10000
Posted
@centralparkshark Nicely coded. Congratulations on completing the project. Clean code. Awesome!
Those icons(facebook, twitter, pininterest) should be wrapped with <a>. Also the share icon would be a button. So maybe we have to use <button> tag for that.
@Ridwan10000
Submitted
What are you most proud of, and what would you do differently next time?
Proud of using grid for the second time as I remember. I think I have successfully used it in this project.
What challenges did you encounter, and how did you overcome them?
It seemed to me simple. I have tried to code my best.
What specific areas of your project would you like help with?
I often use the wrong markups. So please give me feedback on them. Also any other suggestions regarding the project is welcome
@Ridwan10000
Posted
I had issues with adding the images Then I had to do some fixes. But I can not regenerate it being not a pro. You can see it here
@Eslam-Mohamed-G
Submitted
@Ridwan10000
Posted
@Eslam-Mohamed-G Congratulations. That's awesome coding. I really like the responsiveness of your project. You added breakpoints for tabs also. Maybe You forgot to change the title name of the project as I also always do so.
