Nail Salon website acting as a demo for potential clients.
To get a copy of this project, you can fork the repo then clone it as your own.
- A Github Account
- Your local Git CLI, Git Bash comes with the windows Git installation.
All image optimizations done. Planning to implement booking in some form in the future. Need to copywrite and replace lorem, as well as think of a new name. Another optimization would be keyboard accessibility for the testimonials carousel as well as the gallery images.
Learned how to draw inspiration from other designs. Also learned what the structure of an HTML document should look like for a standard business website. Learned the semantics behind using fieldsets and legends, and how to ensure that forms are up to WAI-ARIA standards. Figured out a way to use the ::before pseudo element when using background images to make text more legible. Learned A LOT about layout modes(algorithms) specifically regarding the table layout algorithms. Using a table-layout value of fixed will use the fixed algorithm, allowing the author to define the widths of the table, and its rows and columns. First time hosting fonts locally, also first time converting ttf to woff2. Got intersectionObserver API to work! First time using it as well, lets go! Got more experience implementing babel and webpack/configuring webpack to work with babel. Used embla to create a testimonial carousel, along with media queries for a responsive carousel. First usage of data-attributes to define a state for the navigation bar and hamburger menu. First time creating my own SVG for a hamburger icon, played around with strokes and dasharrays/offsets. Learned that an on keypress event is not needed as when an element is focused and space or enter is press, this will fire the click event for that element. Learned how to convert images to webp using the TERMINAL!!! Learned how to use srcset and sizes to serve responsive images. Learned how to preload fonts to avoid FOUT(Flash of Unstyled Text) Learned that you can transition VISIBILITY!!! First usage of the load event on an image to hide images until they have been fully loaded to prevent the progressive loading of images. Learned that width/height attributes are mainly for the browser to get the intrinsic aspect ratio of images, used to prevent CLS. Learned alot more about the font display property and what the difference is between the values.
Honestly in building this one project, I have learned so much. I am so proud of how it turned out and that I built it from scratch :D. This has motivated me to build more and more projects in the future. Got my first perfect lighthouse score!!Lets go!!