Hosted on Netlify: https://hopeful-wiles-c7f7f6.netlify.app/
I only used the bootstrap package and html. For a larger project with components reusability, i'll work with a component library like Storybook and a static site generator like Astro to build all the templates.
- to install bootstrap and the dependencies, use the command
npm install
- to build the main css file, use the command
npm run css
- reducing the leading of the headers, actually at 1.4, easier to read at 1.1
- changing the hover/active/focus effect on the buttons;
btn-white
will be more attractive with abg-dark
andtext-white
on hover instead of a simple darker 10% - adding animations on the different sections but it have to be challenged with the team (components appearance, for example)
- css print is not done and have to be defined too
- a review must be done to enhance the keywords/tags (headings, paragraph, etc.)
- i didn't add meta, OG and Twitter Card to the header; i don't know if with have automated solutions with your cms about it
- w3c validator found an error on an unclosed paragraph (line 236) but i didn't notice any error on source code
- insufficient contrast between the primary and white colors
- i didn't made any optimisation for the images (srcset and responsive img); i don't know if with have automated solutions with your cms about it and there's not information about it in your specifications
- svg source code can be compressed
- the bootstrap components (both css & js) can also be removed if not used in all the theme
- async and defer