My first web-page: A struggling battle with HTML & CSS

Hello,all^_^

I’m very happy that I can start to type this journal, which means I have finished my web coding ultimately. You can access my web here

It’s always simple to just follow what the teacher taught in the class compared with starting a new page myself without any guidance. So I was so confused at first. Then it occurred to me that maybe I could make this assignment easier by doing it in several steps.

As I happened to learn the history of the evolution of computers in another class, I thought I could make the web page in a pseudo-windows 98 style, which is very special and has a retro aesthetic.
To make my page look uniform and uncluttered, I drew out my ideal page elements and overall layout on PowerPoint. Besides, I searched for several icon images of the Windows 98’s style on win98icons.alexmeub.com and also built-in fonts used in the previous Windows 98 system, downloaded the font files and applied them to the whole web page with the statement @font.face as the font family of my web page for a more immersed browsing experience.

But when I indeed type and process the code, I find that “it’s always easier to think than to do.”
I even wanted to make the recycle bin clickable at first, and to make the taskbar and dialogue window hover with a colour change effect. But then I realised that this was getting away from the core requirements of this assignment and maybe I could spruce that up later once I know more about Html.

I need to place all the items in a way that looks like a real computer desktop. For instance, the ‘Recycle bin’, the ‘Taskbar’ as well as the ‘Dialog window’.

I imported a photo of the dialogue window and an introductory paragraph, and then used the attributes of “An element with position: absolute; is positioned relative to the nearest positioned ancestor ” to position the text and the dialogue box image as a whole, in the centre of the page.

Next is the layout of the assignment icons and hyperlink text, which I have arranged vertically down the right-hand side of the page using div to simulate the layout of a windows desktop file. Also, the hover command is used for the reversed colours when the mouse is moved over the file name(hyperlink).

Finally, I’ve done the whole page in a unified classic windows style. Hope you’ll find this interesting and that more elements can be updated next time!