@principlebrothers
@Terminal239
Submitted
Please share feedback on the code structure and design layout and how I could improve things.
Also, am using the rem units for the padding and margin because it helps things on the response side and keeps things clean. This is a controversial choice and after much research on px vs rem, I settled on rem when I found that Kevin Powell, one of the leading CSS professionals, goes for rem as well.
@principlebrothers
Posted
Hello Affan Shaikh 👋🏽,
You have a good job completing this project, congratulations! 🎊
I hope this feedback helps
HTML SEMANTIC
It will be more appropriate to use semantic elements in your code as it will help with Search Engine Optimization (SEO) and accessibility. Example instead of using a lot of <div> you could use <section> tags, also fore accessibility, if you use <div> tags, you could make it accessible and meaningful to screen readers by using accessible elements such as aria-label, role, aria-labelledby etc. You can learn more from W3
README
It's important to update your README.md since that gives first hand information about your project. Hiring manger will get to see how well you document you project from your README.md file. Kindly update the template given by Frontend Mentor to make your project more professional.
FINALLY
There were errors when I input leap year date and the other attach dates29 - 02 - 2016 ,28 - 2 - 2020, 1 - 2 - 2020. Kindly check it out. I think it is the whole of Feb dates.
I hope this helps . In all your I like your code organization 🌟
Happy coding 🫶
Marked as helpful
@ernest-ayitey
Submitted
What are you most proud of, and what would you do differently next time?
everything
What challenges did you encounter, and how did you overcome them?
no challenge
What specific areas of your project would you like help with?
semantic-ui
@principlebrothers
Posted
Hello Ernest Ayitey,
Congratulations 🎊, you done a great job and there is nothing else to say
I am really impressed with use of semantic tag.
Keep it up and Happy coding
Marked as helpful
@SoulRvr29
Submitted
It was a good challenge. The hardest part for me was validating the form. Maybe there is too much redundancy in the script, but it works and I'm happy with the result.
@principlebrothers
Posted
Hello SoulRvr,
You have done an impressive job. **Congratulations! 🎉 **
I personally like the date animation its nice.
A few thing I will like you to look at. I am sure it will help you become a world class developer.
HTML SEMANTICS
It is advisable to use semantic tag as it helps with accessibility and provides meaning. Example instead of using <div>tag around the <main> tag, you could have used the <main> tag as the container for the whole work.
REUSABLE CODE
It is importance to break down codes in smaller functionalities so it can be reused in other project or the same project but in different section. Just as you did for the animation, I think you could have done that for the day, month, and year, validation and call them in the main validation.
You would have implement two of SOLID principles which are Single Responsibility Principle and Open and Close.
FINALLY
I can see you did have issues with the form validation. When I check 29 - 02 -2016/2020 which are leap years and supposed to have 29 days, I get an error. You can use the code below to check for leap year;
function leapYear(year) {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
I must admit you did a great job.
I hope my suggestion helps, Happy coding 🫶.
Marked as helpful
@Queenstreetcoding
Submitted
Hello,
Can you please give me some feedback on what I can do better/more efficient in my code?
Thanks a lot!
@principlebrothers
Posted
Hello Cindy, I think you have done a good job.
One thing I learnt when I posted my is what I want to share with you to do.
Semantics
Instead of using <div> tag around the the <img> tag, you could use <figure></figure> tag for that.
Redundant code
It will be appropriate to remove redundant code from your work to make it look clean. specifically this block of code below
Again, the alt on the <img> tag should not have _ or - or stuffs like that. The reason why underscores and hyphens should not be used in the alt attribute is that screen readers and other assistive technologies may interpret these characters as spaces or punctuation, which can affect the way the text is read out loud or displayed to users. For example, if the alt attribute value is "red_apple", a screen reader may interpret it as "red apple" instead of "red_apple".
Finally,
It will be appropriate to have the README.md file update so it gives full enough information about your work.
I hope it helps
Happy coding
Marked as helpful
@principlebrothers
Submitted
I think this was pretty easy.
Kindly check my code if there is something I could have done better.
@principlebrothers
Posted
Thank you Abdul Khalid for the comment and thank you to everyone who likes my work.
I have fixed all the issues you raised. I hope it looks better now with the semantics.
How do I change the link I submitted since it is a preview link and I have it with a new one in my README.md file
