What are you most proud of, and what would you do differently next time?
A straightforward component that required minimal markup and styles. I've enjoyed working on these smaller projects to focus on fundamentals and be reminded that there's value in keeping solutions simple and easy to understand.
What challenges did you encounter, and how did you overcome them?
Even with this simple component I initially added more markup than was necessary. It felt good tearing things down to the studs.
You should reduce the line of comments in css file because its not a good practise to have comments for block of code or line code that is auto explanatory.
What are you most proud of, and what would you do differently next time?
A straightforward component that required minimal markup and styles. I've enjoyed working on these smaller projects to focus on fundamentals and be reminded that there's value in keeping solutions simple and easy to understand.
What challenges did you encounter, and how did you overcome them?
Even with this simple component I initially added more markup than was necessary. It felt good tearing things down to the studs.
Auto-close tags that isn't mandatory to have a close tag to improve the acessibility e.g: <Link rel="icon" href="" />
Headings should follow a logical order without skipping levels (e.g., don’t jump from <h1> to <h4>). Proper nesting helps screen readers and search engines understand the structure of the content.
Dispite of some tag are auto closed (Link, img and so on) you should close in openning tag in order to appilication with focus on accessibility like screen reader can index your app properly and improve your app semantic.
Eg: <link rel="preconnect" href="https://fonts.googleapis.com" />
Add alternative text with alt attribute in img tag
Eg: <img src="./user.webp" alt="user image profile" />
If a tag doesn't have a child element you should close in the openning tag.
Eg: <i class="fa-brands fa-facebook-f p-3 rounded-full cursor-pointer text-Blue hover:bg-Blue hover:text-white transition-all duration-300" />
Add the script tag in the begnning of your code so this way you guarantee that it will run when your application is loaded and not only when it called.
Good job, but you should consider remove the unnecessary comments.
There no need the add comment for a block of instructions or a line of code if it explain for itself e.g:
<!-- Form to subscribe--!>
<form>
<label>Add your email to subscribe</label>
<input type="email" placeholder="Your email" />
<button type="submit">Subscribe</button>
</form>
Write a comment for complex block of code that it isn't auto explanatory, is a good practise and help to leave de code more readble and clean, instead of write a commento of every block of code.