11.R Inspiration Webpage
Inspiration Webpage for Final Project
Demo
Fabrication
I began by creating a folder and an index.html file. I used the autocomplete feature in the VS Code to build the basic HTML structure. I then created a CSS folder and linked the style.css file inside to the HTML contents. In this way, I can style the HTML contents with the CSS properties.
I used the <span> tag to highlight the word I wanted to emphasize in the lines:
After the basic set-up, I started to stylize the headings with a colored background:
And I got lines with separated color blocks. However, my intention was to put content lines into one color block. So I put the paragraph into the <div> tag and style the div tag with the “para2”:
Also, I used border properties to highlight certain subtitles:
Though the attempt was successful, I abandoned coloring the background of content texts for aesthetic considerations.
I then created a list for displaying the minimal products:
I tried to align the list to the center by applying the text-align style to the <ul> tag. However, I found that the bullet points remain at the left margin while the texts were moved to the center.
Therefore, I used the margin-left property to move the position of the lists:
I separated “Message” with the following texts so that the page looked more organized:
I moved on to add images to my webpage and added black, round-corner border to the images using CSS properties:
I embedded the link to an article and changed the color of the texts’ background when the mouse moved above it:
I embedded the YouTube video by copying the embed code in the YouTube share button:
Attributes
- video: Timelapse of the future: a journey to the end of time
- article: Small animals live in a slow-motion world
- coding: W3schools
Reflection
In this recitation, I practice using diverse HTML tags (e.g. div, a, span) to add texts, links, images, and videos to the webpage. I also explore a variety of CSS properties (e.g. colors, margin, border, hover, etc.) to style the HTML contents and uniform the aesthetics. However, I only use one font and all the texts are aligned to the center. This makes the webpage dull and stubborn. In the future, I will try to utilize different fonts in displaying the texts. I will also try to rearrange the webpage and include more interactions with CSS animation.