Final Project: Website Redesign

The website can be access through this link.

https://osisimperium-valerius-ethan-w.netlify.app/

The website is a redesign of the official OSIS Imperium site, offering the same pages and features with added enhancements like an image carousel and mobile responsiveness. The design follows an easy-to-operate principle, focusing on user accessibility. It includes five main pages, consistently displayed in the top-right navigation bar and the bottom-right section of the footer. The clean and simple layout allows visitors to quickly grasp key information about the student council.

Major Problem Faced and Solutions

The major problem during this assignment was that the carousel, which includes JavaScript, often overwrote the CSS defined in the HTML. This caused issues on affected pages, such as incorrect fonts, font sizes, padding, margins, and text decorations. To fix this, I explored several debugging solutions with the help of friends and guidance from the lecturer.

1. In the CSS document, !important should be used after each property value and before the semicolon (;) to ensure that the styles are not overridden by inline styles or JavaScript modifications. This is especially useful when certain elements, such as those affected by the carousel JavaScript, do not follow the expected styling. Example:

margin: 0rem 5rem 0rem 5rem !important;

2. Some styles can be written inline in the HTML to ensure they are not overridden by external CSS or JavaScript. This method is especially useful for critical styles such as text decoration, font size, or padding on elements affected by script conflicts. It provides a direct and reliable way to apply specific styles when CSS specificity issues occur. Example:

<a class="stacked" href="vision-mission.html" style="text-decoration: none !important"><div>VISION &</div><div>MISSION</div></a>

Header Section

The header section features a navigation bar and a wordmark that reads OSIS Imperium in uppercase letters. The navigation bar contains five main pages: About Us, Vision and Mission, Social Media, Our Events, and Alumni. This header remains visible across both desktop and mobile views, ensuring consistent and easy access to all sections of the website.

Every anchor tag in the header uses the class name "stacked" to arrange the text in a vertical column layout using flexbox. One of the navigation links is underlined to show which page the user is currently on. The underline style is applied directly in the HTML to prevent it from being overwritten by the carousel styles on certain pages.

Main Section

Each section has its own highlights to effectively convey a message to the viewer. The most challenging part of the project was creating the carousel, as it required working with JavaScript and managing many complex CSS styles to ensure smooth functionality and visual consistency across different devices.

Below is an example of the CSS used for the alumni carousel. It includes card components that contain images and navigation buttons. The active class was originally intended to enlarge or scale up the center card, making it the main focus of information, similar to how the events carousel functions. However, I ultimately decided not to activate the JavaScript that applies the active class for the alumni carousel. This choice was made to present the carousel as a cohesive gallery rather than highlighting individual sections.

Other than the carousel, the website mostly consists of basic text and images. The text content follows a clear hierarchy with three heading levels: h1, h2, and h3, followed by paragraph text. Layout adjustments are made using paddings and margins depending on the display mode, primarily using flex and inline block. Most of the structure is arranged in flex rows and flex columns. All text is styled in white (#FFFFFF) to maintain contrast against the dark background. Since flex display is commonly used throughout the site, properties like flex start and flex end are frequently applied to control alignment.

Footer Section

The footer section is wrapped within the rectangle-bg class, which gives it a blue background. The footer layout uses a flex row to divide the left and right sections. Inside each section, flex columns are applied to arrange the content vertically. The styling of the footer uses simple CSS properties such as margin, padding, flex settings, and text decoration to ensure clear structure and readability.

Responsive view

The responsive view is handled through the meta tag in the HTML header and the @media max-width rules in the CSS. Since desktop screens generally use widths between 992px and 1200px, I used 992px as the breakpoint. This means the responsive layout will activate on screens smaller than 992px.

It is crucial to input the meta as in the image below because it is compulsary to make the responsive css work, I made several mistakes that i forgotten to put the meta, resulting an unresponsive website.

Brief Report on Student Council Website Redesign Project

Introduction

For my final project, I redesigned the official website of OSIS Imperium, the student council at my school. The original website, while informative, felt outdated and lacked accessibility, especially on mobile devices. My aim was to create a clean, simple, and user-friendly website that better represents the student council and serves the needs of both students and staff. Since I am the former Head of Media and Publication for this council, this project was more than just an academic task, it was a chance to apply real web design and coding skills while improving a site that is important to my high school community.

Development Process

I kept the overall structure of the website intact, maintaining five main pages: About Us, Vision and Mission, Social Media, Our Events, and Alumni. Navigation links were positioned both at the top and bottom of each page to provide consistent and easy access across devices, whether on phones or desktops. The design focused on simplicity, using a dark background with white text for readability. A key addition was an image carousel to highlight events and alumni, which involved implementing JavaScript carefully to avoid breaking the website’s style. I consulted various resources and also used AI assistance to solve JavaScript challenges related to the carousel. To ensure responsiveness, I applied CSS flexbox for flexible layouts and used media queries to adjust the design for screens narrower than 992 pixels. Adding the viewport meta tag to the HTML was crucial to make the website scale properly on mobile devices and tablets.

Challenges Faced and How I Overcame Them

One of the biggest challenges was that the JavaScript carousel often overrode parts of my CSS styling, causing fonts, margins, and text decorations to behave unpredictably across pages. To fix this, I applied !important declarations in my CSS to force styles to take precedence, and sometimes I included inline styles directly in the HTML to prevent overrides. Another early hurdle was forgetting to include the viewport meta tag, which initially caused the site to look broken on mobile devices; adding this tag fixed the responsiveness problem. Throughout the project, I relied on feedback and help from classmates and my lecturer, especially to fine-tune alignment with flexbox. Managing time effectively was crucial for breaking down tasks into smaller steps helped me stay organized and avoid feeling overwhelmed, even though flexbox alignment adjustments took significant effort.

Conclusion

This project was an invaluable learning experience that expanded my understanding of how web design involves more than just appearance; it requires mastering the interaction between technologies like CSS and JavaScript. I learned how essential CSS specificity and responsive design fundamentals, such as media queries and the viewport tag, are in building solid websites. Flexbox proved to be a powerful tool for layout design, but it demanded careful attention to detail. Regular feedback helped me spot and fix problems I initially overlooked. Overall, I gained confidence in designing and coding websites that are both visually pleasing and functional across various devices. What began as a final project turned into something meaningful for the student council, resulting in a modern, accessible, and responsive website that enhances how they communicate and represent themselves online. Overcoming technical obstacles and refining the design significantly contributed to my growth as a web developer and designer.

An additional insight from this project was the importance of clear communication whether explaining design choices or seeking technical help. These will improved collaboration and boosted my confidence. I also realized how even small details in design and code greatly influence the user experience by making the website feel polished and professional. Reflecting on the process, I feel proud that the site meets both academic goals and real community needs. Moreover, I learned the value of thorough testing across devices and browsers to catch issues early, further improving the site’s reliability and my problem-solving skills. These lessons will shape my future projects, enabling me to work more efficiently and create even better digital solutions by combining technical ability and good communication.

3. FEEDBACK

Week 11

Mistakes and problems help us learn and improve. Using AI can be efficient, but it is important to have a deep understanding of the code to apply and modify it effectively.

Week 12

The website's layout is mostly well-structured, but some adjustments are still needed, particularly in padding and margin spacing.

Week 13

Start focusing on responsive design by learning how different screen sizes affect layout. Improve your understanding of HTML and CSS, especially flexbox, grid, and media queries, to create more adaptable and polished designs.

Week 14

Consultations focused on technical issues related to the website, especially troubleshooting problems with the carousel functionality and ensuring the design remains responsive across different devices.

4. REFLECTION

Experience

Throughout this project, I gained valuable hands-on experience in web design and development by redesigning a functional student council website. I was responsible for planning the layout, structuring content, styling with CSS, and integrating JavaScript for interactive features like the carousel. One of the most challenging yet rewarding parts was troubleshooting unexpected behavior caused by script conflicts, especially when JavaScript interfered with the CSS. Despite facing technical difficulties, I was able to implement a fully responsive website with a clean and accessible interface.

Observation

During the development process, I observed that JavaScript can often override or disrupt CSS styles if not managed carefully, especially when working with components like image carousels. I also realized how crucial proper HTML structure and CSS organization are for maintaining consistency across different screen sizes. Without a clear plan and attention to detail, small issues like missing meta tags or inconsistent margin values can lead to significant layout problems. Flexbox was particularly helpful in achieving layout flexibility, but it required careful use of properties like flex-start, flex-end, and justify-content.

Findings

I found that using !important in CSS and applying some styles inline in HTML were effective solutions when facing issues with JavaScript overwriting styles. Additionally, responsiveness relies heavily on correct use of media queries and understanding device breakpoints. I learned that a strong foundation in HTML and CSS is essential for debugging and customizing templates. Most importantly, I discovered that web development is not only about making things work, but also about ensuring design consistency, clarity, and usability across all devices.

Search This Blog

Valerius Ethan Wirawan (0372774)