The web page layout is created using HTML, CSS, and JavaScript. The page features a visually engaging carousel gallery that displays images of the restaurant's cuisine. The gallery is implemented in JavaScript and utilizes an object to store and access the images. To enable a seamless browsing experience, infinite scroll functionality has been incorporated into the carousel through manipulation of the Document Object Model (DOM).
🌶 Link to live site: https://restaurantlayout-paloma.netlify.app/
🥑 Link to repo: https://github.com/kristenlynne/restaurant-layout
Tech used: HTML, CSS, JavaScript.
🌮 HTML and CSS for content and styling, JavaScript for interactivity.
🌽 Implements CI/CD by utilizing GitHub for version control and Netlify for automated builds and deployments.
🍅 Used JavaScript to implement an image carousel by manipulating the DOM.
As I continue to develop the website, there are several optimizations that I plan to implement to improve its performance and user experience. One of the most important is making the layout responsive so that it adjusts automatically to different screen sizes and device types. This will involve implementing style changes specifically tailored to mobile and tablet layouts, including adjustments to font sizes, margins, and other design elements to ensure that the website is optimized for smaller screens.
Another optimization that I plan to make is to minify my CSS and JavaScript files. This involves removing unnecessary white space and comments from the code, which can reduce file sizes and improve page load times.
In addition, there are several optimizations that I plan to implement to make the website more accessible to users. This could include adding alternative text descriptions to images, ensure the text has sufficient contrast with its background so it's easily readable, and that all page elements have clear and descriptive lables so that users with screen readers can easily understand their function.
Lastly, if this were a real website it would include functionality to book a reservation, order online, create a review, and subscribe to the newsletter.
🍋 The importance of planning and organizing my code before starting to write it to ensure that it's modular, efficient, and easy to maintain.
🍰 The value of testing code thoroughly while designing to catch bugs and errors early on in the development process.
🍉 How to use JavaScript to implement an image carousel with infinite scroll and links to select a specific image in the carousel.