Here’s a detailed look at my development process, the challenges I faced, and how I overcame them.
Development Process
Design Phase
I started by designing two new prototypes using Figma and consulted my lecturer for feedback. After a thorough discussion, I finalized one design that struck the perfect balance between functionality and aesthetics. This initial planning phase was critical as it set the foundation for the entire project.
Initial Setup: Header, Footer, and Menu Bar
I began coding by working on the header, footer, and menu bar, as these elements are consistent across all pages. This approach saved time and ensured a uniform design throughout the website. The menu bar contains ten links, so I carefully implemented hover effects and made sure the navigation bar was intuitive and user-friendly.
Homepage: index.html
The homepage was straightforward to develop since it primarily involved adding images and ensuring they fit the screen size. Instead of including a "Home" link in the menu bar, I made the logo at the top-left corner a clickable button that redirects to the homepage. The main challenge here was ensuring the responsiveness of the images and containers on different screen sizes.
For Sale Page: for-sale.html
The "For Sale" page was similar to the homepage in terms of design. It mainly involved adding images and descriptions while ensuring everything was fully responsive. Since I had gained confidence from building the homepage, this page was relatively smooth to develop.
Helpdesk Page: helpdesk.html
This page included a contact form, which was a bit tricky to implement. Making the form responsive across various screen sizes proved challenging. However, I adjusted the design slightly to align better with the finalized prototype and focused on functionality while maintaining the same aesthetic feel.
About Us Page: about-us.html
For the "About Us" page, the section titled "Meet Our Team" required placing containers within another container. Initially, this caused alignment issues, especially on smaller screens. However, by experimenting with new CSS techniques and conducting online research, I finally achieved the desired layout.
What’s New Page: whats-new.html
This page was one of the simplest to build since it mainly involved structured content and images. By this point, I had become adept at managing responsiveness, which significantly sped up the process.
Challenges Faced and Solutions
1. Header Responsiveness
The search bar in the header initially caused layout issues on smaller screens, with the button appearing too large and misaligned. To fix this, I tweaked the padding and margins and explored tips on YouTube and Google. Eventually, I adjusted the CSS and JavaScript to achieve a clean, responsive design.
2. Menu Bar Alignment
Aligning all ten menu links in a row was challenging, especially while maintaining hover effects and responsiveness. I decided to allow the menu items to stack into rows on smaller screens, preserving the overall aesthetic without compromising usability.
3. Footer Alignment
The footer includes multiple columns and rows, making it tricky to align everything neatly. By carefully organizing the grid layout and experimenting with CSS Flexbox, I managed to create a clean and structured footer design.
4. Contact Form on Helpdesk Page
Making the contact form responsive was one of the most time-consuming challenges. After trying multiple approaches, I realized some design elements from my prototype were impractical. I slightly modified the form design to ensure responsiveness while retaining the intended functionality and look.
5. About Us Page Container Alignment
Placing a container within another container caused positioning problems. The main issue was ensuring that the "Meet Our Team" section displayed correctly on all screen sizes. I overcame this by using advanced CSS techniques like media queries and experimenting with different display properties like grid and flex.
6. General Responsiveness Issues
Ensuring the website’s responsiveness across various devices was a recurring challenge. Through persistent testing and debugging, I adapted my code for different breakpoints and optimized the user experience for desktops, tablets, and mobile phones.
Code & Image used for all pages:
Html,CSS,Images File
Lessons Learned
This project taught me:
The importance of planning and prototyping.
How to prioritize functionality and aesthetics when challenges arise.
The value of research and leveraging online resources to solve coding issues.
How to use advanced CSS techniques and media queries for responsive design.
The significance of testing and refining every detail to achieve a polished outcome
Reflection and Learning Takeaways
This assignment was not just about building a website but also about personal growth and problem-solving. One key realization I had was the importance of balancing creativity with practicality. While my initial designs on Figma were ambitious, translating them into responsive and functional code required compromises. This taught me that adaptability is a critical skill in web development.
Another valuable lesson was the power of persistence. Challenges, especially with responsiveness and alignment, often seemed overwhelming. However, each obstacle pushed me to explore new techniques and learn from resources like tutorials and forums. This iterative process not only improved my technical skills but also deepened my confidence in tackling unfamiliar problems.
Finally, completing this project solidified my passion for creating user-friendly and visually appealing websites. It’s a milestone that motivates me to take on more ambitious projects in the future, knowing that every challenge is an opportunity to grow.
Comments
Post a Comment