11.R Inspiration Webpage

Inspiration Webpage for Final Project

Link to the Code

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

1. video: Timelapse of the future: a journey to the end of time
2. article: Small animals live in a slow-motion world
3. 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.