@Code-Beaker
Posted
Hi there, congratulations on completing this challenge...You've done a great job! 🎉
I have visited your live site URL and checked your source code. I found some areas where you can possibly improve. Let me share some of my suggestions regarding your solution.
- Split your CSS into multiple files to keep it cleaner. You can have different files to store fonts, variables, etc. Here's a simple example:
style.css
variables.css
fontImports.css
As a side note, while working on larger projects, you will usually split your CSS into many files.
- Disable the default validation done by the browser. When entering an email without the
@symbol, the browser gives the invalid popup. If you're using JS to validate your form, then this will probably be useless. Add thenovalidateattribute to theformtag to disable it. - It looks like the input and the button doesn't use the Roboto font. You can fix that and make it better as well.
- In the
assetsfolder, you will find two versions of the cover image.- one for desktop screens
- one for mobile screens
You have to use the
pictureelement along with thesrcsetattribute on thesourcetag. Here's an example for this method:
<picture>
<source media="(min-width: 50rem)" srcset="folder/desktopImage.jpg"/>
<img src="folder/mobileImage.jpg" />
</picture>
This benefits the performance of the website as you don't have to load both of the images and make use of CSS to swap them. Everything is done by the HTML itself.
I hope you found them helpful to you 😄
Marked as helpful
@temesgen-982
Posted
- I used novalidate attribute on the form element and it works better. I was considering turning it off earlier but I thought it could help in some way.
- I think the font family is working now for the button and input
- The thing with using
<picture>element for responsive image is it won't sense resize. It will load the right picture for the screen size but if I resize the screen it won't sense it. So I thought it would be better to use javascript. - My question is does separating the css into multiple files help with the performance of the page in any way or is it just for organizing the css. @Code-Beaker
@Code-Beaker
Posted
@temesgen-982 Hey there! Thanks for sharing your reply.
- Larger CSS files take longer to load. So, by splitting CSS files, it might be a good take on improving the performance.
- About the responsive images, you need to use the
sourceelement as well. I have shared an example syntax I my original comment.
Good day!
Marked as helpful
@temesgen-982
Posted
Thanks so much. The picture element is now working as intended and I deleted the javascript file that I used to change images with. @Code-Beaker
