Interactive design-final project
Name: TANG YUYING
Student ID: 0370676
Programmed: Interactive special design
Module name: Interactive Design (202504-Lecture)
Introduction:
In this assignment, we are required to write code based on the prototype we designed in Figma. The assignment should include the use of HTML, CSS, JavaScript, and Bootstrap.
It must also include the approved prototype, including typography, color schemes, imagery, and layout.
Chosen Website to refine: The State Council of the People's Republic of China
Process:
In this section, I will mainly document the challenges or difficulties I encountered, how I solved them, and the step-by-step process I followed.
The first step I took was to review my Figma design to check if there were any parts that needed modification or if the lecturer had given any feedback.
index.html and the corresponding CSS file. Following this structure, I then created the HTML and CSS files for the other pages in order: news, policy, about us, and content.
<head> section of my HTML. Doing this helped me avoid issues where Bootstrap components wouldn’t work properly when I copied and pasted the framework code later on.Since I needed to build a responsive website, using Bootstrap’s grid system was essential. This framework allows my webpage content to adapt well when switching between different screen sizes.
At first, I found this part a bit difficult to understand because I didn’t have a clear concept of grid sizes and layout dimensions. So, I took time to carefully read explanations about terms like “row” and “container.” After understanding them better, I decided to use two main components from the grid system in my layout: container-fluid and row.
When I first started working on the logo, I found it very difficult to adjust its size and position. Some text also needed to wrap at specific points, which added to the complexity. (I didn’t create a new logo for this website, because the original site is an official government website, so out of respect, I chose not to change the logo design.)
Later, when I tested how the site responded to different screen sizes, I noticed a serious issue: the logo and its contents weren’t adjusting properly with the screen size, which broke the responsive layout.
<head>, I didn’t actually use its layout framework. Instead, I was manually positioning everything using plain <div> tags, which didn’t provide any responsive behavior. As a result, the logo’s position didn’t change properly in mobile view. So, I deleted the code I had originally written for the logo and replaced it with Bootstrap’s grid system using <div class="container-fluid row col-*"> to automatically align the layout. I also used col-6 col-sm-6 col-md-4 col-lg-1 to make the layout adapt to different screen sizes.
During this process, I learned a lot. I took the initiative to look up what each part of the code meant and what its function was. I also added comments in my code to remind myself how to use them during future layout work.
One of the most valuable lessons I gained here was learning how to adjust element positions directly by using col-sm, col-md, and col-lg.
- col-lg-12: Occupies the entire row (100%)
- col-lg-6: Occupies half the row (50%) - most commonly used when two columns are placed side by side
- col-lg-4: Occupies one-third of the row (33.33%) - three can be placed in each row
- col-lg-3: Occupies one-fourth of the row (25%) - four can be placed in each row
- col-lg-2: Occupies one-sixth of the row (16.66%) - six can be placed in each row
- col-lg-1: Occupies one-twelfth of the row (8.33%) - up to twelve can be placed in each row
So, I decided to go to the official Bootstrap website to study and understand how to use it properly, including the specific layout styles and usage methods for cards.
The reason I chose this block of code is because it allows Bootstrap to automatically handle the layout, making each column in the same row have equal width. For example, using two "col" classes means each one takes up 50% of the row’s width.
By using this code, I didn’t need to spend extra time manually adjusting the layout or constantly tweaking the positions. At the same time, it adapts automatically to different screen sizes, adjusting the position and size of each card accordingly.
col-12 col-sm-6 col-md-4 col-lg-3, so that the layout adjusts to different screen sizes with different proportions. I also used card-img-top to fix the image at the top of the card, making it easier to place text underneath. This part was closely related to what the lecturer had taught in class, so I had a reference to follow, which made it much quicker for me to complete.Another challenge I faced was with the search bar. Since I wasn’t very familiar with how to write the code for a search bar, I directly used the code provided by ChatGPT. However, this caused alignment issues and layout misplacement.
I tried adjusting the position using CSS on my own, but I found that it still didn’t fix the alignment issue. So, I asked one of my friends who studies programming for help. He pointed out that my code was missing a list element.
He explained that I needed to first add a list structure in the HTML, and only after that could I adjust the positioning properly in the CSS.
<ul class="horizontal-list">,so that the three elements inside the search bar (the icon, the hint text, and the search button) could be aligned in a single horizontal row. In addition, I needed to use <li> elements to arrange each part of the search bar in an orderly way. In the CSS, I styled these <li> elements to display horizontally instead of the default vertical direction.
All of this was taught to me by my friend, and I’m very thankful to him. At the same time, it also helped me learn some other ways to use lists. In my previous understanding, lists were mainly used to clearly display names or items on a webpage. I had never thought of using them for layout purposes. So this was my first time using a list in this way, and it turned out to be a great learning experience.
As for the rest of the webpage, most of it had already been taught by the lecturer in class, so it only required minor adjustments and wasn’t too difficult.
I couldn’t figure it out on my own, so I had to turn to ChatGPT for guidance.
First, I selected the dropdown icon I wanted to use from Bootstrap.
<div class="dropdown">, which is used to wrap the entire dropdown menu structure.<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">. This code was actually provided by ChatGPT. It perfectly included the button style I wanted and the color I chose.<div class="collapse" id="XXX">Collapsible content</div>.Then I inserted this block into my code and set a custom
id name and the label for the collapsible content.
id and data-bs-target), otherwise the connection won’t work and the toggle won’t function properly. I also came to understand the standard pairing required for Bootstrap Collapse: as long as I include data-bs-toggle="collapse" and data-bs-target="#targetID", the content will expand or collapse when the button is clicked. As long as I remember this pairing, I’ll be able to build it on my own next time.
- Some of the text elements need to be changed to
<p>(paragraph) - The position of the hamburger button on the mobile view needs to be adjusted (sometimes it appears on the left, sometimes on the right).
In my code, I removed "fs-4" to use the default font size. After testing, I noticed that the font size did change, but it still appeared bold.
So, I went into the CSS and changed the original font-weight: 600 to normal, and that solved the issue.
Another issue was on the policy page, where the same problem occurred — the text appeared too bold and large, making it look very similar to a heading.
fs-6 to fs-4.
fs-4 was a more suitable size）
fs-4, the overall appearance looked much more comfortable and balanced） There was a CSS rule that affected all <button> elements across the pages, including the navbar-toggle, which is the hamburger button. This rule caused every <button>, including the hamburger, to shift 10rem to the left.
In mobile view (where the container is narrower), this 10rem offset made the hamburger appear “shifted toward the middle” from the left side.
.cont3 area, and no longer affects all buttons. The second line specifically sets margin-left: 0 for the navigation <button> (i.e., the hamburger bar), ensuring that it always stays aligned to the left and isn’t affected by other styles.This part of the code actually took me the longest to fix, because I kept assuming the problem was in the HTML. I completely overlooked the possibility that it could be caused by the CSS.
Since I was using the Bootstrap framework, I kept thinking the issue must be with how I applied it or with the size settings I chose. That’s why I assumed the hamburger bar misalignment was caused by a mistake in using Bootstrap components. So when I finally realized that it was a CSS issue, it honestly came as a bit of a surprise.
Because when putting together different parts of a webpage, you have to consider various issues. Honestly, it was quite a challenge for me, but luckily I had enough time to slowly adjust things. When I didn’t know how to do something, I could ask ChatGPT directly or consult my friends. They gave me a lot of help during the process, especially when I was first getting to know and understand Bootstrap. In some areas, like the dropdown menu, I truly didn’t know how to do it, so I copied and pasted code from the internet.
But even though the process was full of bumps, I still managed to finish it bit by bit on my own. I realized that the most important thing in learning code is constant practice and attention to detail. I found that many of my mistakes were due to small details—sometimes an extra character, sometimes forgetting to add </>. So many times, it wasn’t that my code was wrong, but that I overlooked details, which caused the problems.
Therefore, I feel that this learning process not only trained my understanding and use of code, but also helped me practice being careful. It helped me stop thinking that doing things roughly was good enough. Instead, I’ve learned that if you’re going to do something, you should do it well and not let something that could have succeeded fail just because of small details.
Google Drive Link: html + css file
Web link: https://wondrous-liger-9332b2.netlify.app/
评论
发表评论