5.11.2024 - 04.1.25
The first step in the development of the final project was identifying the core features I needed, such as navigation, image galleries, and banners. This step was done at the prototype stage. TO make the feature to be function I chose Bootstrap as my reference, because of its flexibility and pre-designed components, which allowed me to focus on the custom aspects of my website rather than building from scratch.
I referred to Bootstrap’s documentation for inspiration and examples of HTML and CSS components, including the scrollbar menu and image gallery. I customized these components to fit my design vision. This made the development process faster and easier.
One of the most significant challenges I faced during development was ensuring that the banner image filled the available space on the page without distorting its aspect ratio or becoming too small. The banner was an essential visual element of the homepage, and I needed it to be large enough to fill the left section of the screen while remaining responsive.
The banner image was initially placed within a div container that spanned the full width of the page. While the image width was set to 100%, it did not scale correctly to fill the available space because the image’s height was not specified.
While working on the header for my website's different pages, I faced a challenge with positioning the text over the image and aligning it correctly to the bottom-left corner. I wasn’t sure how to make the text overlay on the image in a way that looked clean and professional. After spending some time trying to figure it out on my own, I decided to visit the Bootstrap website for some guidance. I explored their resources to find source code and CSS examples that might help me solve this issue. After looking through their solutions, I found exactly what I needed. The code I discovered allowed me to position the text at the bottom-left of the header, making sure it overlays perfectly on the image. Below is the code I used to make the button overlay work, ensuring it stays fixed at the bottom-left corner of the header, even when the page is resized or viewed on different devices.
To make sure the image and text are aligned properly, I used flex display, which ensures that both the image and text sit next to each other in a clean, organized way. This layout is also responsive, meaning the design adjusts nicely for different screen sizes. The large burger image in hero-section-left catches the eye, while the text in hero-section-right provides more context about the menu, making the page both visually engaging and informative.
div and assigned a class to it, then added the class and the text content inside. After that, I applied some CSS styles to make the menu scrollable. I used overflow: auto to ensure the menu content can scroll when it overflows the container. Additionally, I applied white-space: wrapping to prevent the text from wrapping onto multiple lines, keeping everything in a single row. This combination of styles makes the scrollbar menu functional, allowing users to scroll through the content easily if it exceeds the container’s width. Additionally, I added a hover effect to the button to enhance the user interaction.
