The First Step in Web Design: From Getting Started to Giving Up

Hi! Welcome to Levi’s journal. When you are reading this, I’ve already finished my assignment and started to ‘Lie Down’ ^o^. You can visit my page by clicking here.

Designing a website from zero for the first time was a much more challenging process than I expected. To clear my mind, I chose to start by building the framework of the web page. I envisioned dividing the page into 4 sections, header, sidebar, main part, and footer.

To begin with, I used a grid first for page layout and divided the page into two columns and three rows, so that sidebar was fixed on the left side of the screen, occupying the left side of the three spaces, while the other three parts are arranged in the order in the right part. As the following picture shows:

To add to the website’s richness, I inserted a free image downloaded from Pexels.com in the entire body section and used the functions “background-size: cover” and “background-repeat: no-repeat” to make the image better fit the screen size and to prevent the image from repeating due to the size issue.

After building the HTML framework, I started to decorate it with CSS.

Sidebar: This part is responsible for linking to other pages of the assignments and I chose a fixed ratio instead of “px” as the width unit, to better adapt to the screen size. 5 options I arranged by unorder list, and added some design for the button, to avoid looking monotonous.
-Use the “a: visited” function to make the font color change when the link is clicked.
-Add a hover effect to make the font Italicized and larger when the mouse is over a button.
-border to make the corners rounded with the “border-radius” effect
-Add a “hover: after” effect to make a horizontal line appear below the button when the mouse is placed on it and control the time of transition to make it dynamic.
At the bottom of the sidebar, I also inserted a hyperlinked image of the logo, which can lead to the official website of the college.

Header: Setting the box range and font of the header to be very large so that it spreads over the whole screen and highlights the theme. At the same time, I also applied external fonts to modify the title through the “@font-face” function.

Main part: I adjusted the opacity of the text box to make it blend better with the background image while not affecting the reading effect of the text. Also, I added a Journal button for easy access.

Footer: Inserted google icons represent my email and GitHub page in this section. Since the google icon is inserted as a “span”, I set the two info as two icon classes, and use the “float” function to put them side by side; then use the ” position: relative” to adjust the position to make it centered.

After completing the above sections, I checked the site via live-server and discovered that the list boxes in the sidebar, which should be centered, had been shifted to the right – but their position appears to be centered in the parent box.

I was very confused and first checked the size of the box, which was normal, but the list was not centered in its box, as I assumed. When I checked the parent box, I noticed that the list had been centered by mistake by adjusting the left padding during the resizing process. Then I removed the padding from the sidebar and “text-align: center” the position of the child box in that element; and added a display setting of “display: inline-block” to the child box so that I could adjust his position. This demonstrates that I was thinking incorrectly when creating the box framework and used the incorrect method to achieve the desired effect.

My first programming experience was a bit flustered, with many steps not following the standard order, but rather making random changes as I saw fit, which often confused me. To realize that sometimes, even though the website looks perfect, there are some inconspicuous mistakes hidden in it, and these mistakes can cause a great impact when the site or product is released publicly.

At present, the effect of my website is still quite ordinary, after watching some YouTube tutorials about some animation method effects, I realized that most of them require JavaScript and plug-ins, which is what I desire to learn later this semester. Hope my ideas can help you avoid making the same mistakes as me.

The title is just kidding. Let’s struggle together in coding!