iSalah-YT• 20
@iSalah-YT
Submitted
P
Jack Williams
@Toumari
All comments
- PJack Williams• 270
@Toumari
Posted
Hello!
Firstly great effort on your card it looks great!
Just a couple of pointers for you to help you on your way:
-
The styling of a few elements differs from the original design, things like the size of the avatar and the learning subheading
-
You're using pixel values for some of your padding & margin, I'd recommend getting comfortable with rem / em and the various other units of size. These help with accessibility & with scalability when it comes to responsiveness!
0 -
- PKrishna Vishwakarma• 1,340
@KrishnaVishwakarma1595
Submitted
PJack Williams• 270@Toumari
Posted
Hi there Krishna,
First of all great job on completing the form it looks good!
Just a couple of small things to highlight as potential improvements:
-
You are validating the first and last name fields to not be empty, but you're not validating if it's a garbage entry such as a bunch of blank spaces, I was able to submit the form with no actual characters entered.
-
It would seem that you're unable to submit the form if there's been a validation error and you then go back and fix it and try submit again! Check your code for any errors that may cause this!
Marked as helpful
1 -
- Ryan O'Hanlon• 140
@Ryan-OHanlon
Submitted
What are you most proud of, and what would you do differently next time?
My main takeaway from this challenge was understanding the importance of CSS rules and their priority. Having to make multiple sets of CSS rules with the @media rule is required to design a layout for desktop and mobile.
If I could do something different, it would be to learn more about responsive web design. While I was able to make the mobile design match the requirements. I was not able to make the desktop design fully responsive when the resolution started to become smaller than a certain width as it would be cut off instead of adjust as needed.
What challenges did you encounter, and how did you overcome them?
The first challenge I encountered was making sure that based on resolution size that only the desktop or mobile image would be visible. Not only did it require using @media and (min-width) and (max-width) CSS rules. I had to disable both images from being seen and then have them be visible within the nested @media CSS rules.
What specific areas of your project would you like help with?
What I need help with this project is to understand how to make every element in the HTML framework responsive.
I still have trouble understanding what I should be doing to have the text or images inside an HTML element be responsive as the resolution of the webpage increases or decreases in resolution.
Using div elements as containers and then using flexbox for each div element can't be the only solution. Because I don't know how to set a maximum size and then have it and the elements shrink when the resolution gets smaller. My designs always takes up the entire webpage unless I set a specific width and height in pixels but that removes the ability of the design to be responsive.
PJack Williams• 270@Toumari
Posted
Hello,
Firstly well done on finishing the challenge, it looks great!
Just a few small things that I'd like to think are helpful tips:
-
When you're selecting elements, I'd generally try to avoid selecting actual tag elements such as p or h1,h2 etc. Generally it's best to apply a class to a target element and then apply styles. This is to avoid rigidity if your website or app expands to have p tags that require additional styling and reduces the chance of specificity causing issues!
-
You're specifying fonts like 'Montserrat' etc in your CSS but not providing a fallback font if the browser is unable to pull that resource for any reason, it's best to provide one by doing: font-family: "Montserrat", sans-serif;
Overall though you've done an amazing job and should be very happy!
0 -
