Finally Survived ! Creating my first page using HTML and CSS
Hi, this is Shelley. Thanks to god, I’ve finally finished my first HTML pages. It’s not quite an easy process. But gladly, I survived and I do think I have a better understanding about what we’ve learned through doing this project. Also, I’ve got several things to share about my pages. You can view my page here
To begin with, I reckon that the first step of design is to have a clear mind of the framework of your website. At the very beginning, I just sit in front of the screen, feeling all the things we’ve learned regarding HTML and CSS just tangled up in my mind. I don’t know where to start. I took some time to calm down and decided to begin by building the framework. About my index, I hoped to use the layout we learned (including header,aside, main content, footer), so I just write down all the div first, like the Matryoshka doll. Then I started the process of creating the css style, putting the grid and flex in. Finally, I add the content. The process became more logical and clear.
About the navigation, I tried to apply what we learned, and combined it with images.
That’s its original look.
But when your cursor approaches, you may find the picture zoom out. I also use hover to realize this:
Finally, when you click, the one you choose will zoom in:
Also，when designing the assignment page, as it needs a button to go back to the index page. I decided to use the position to create a button that even when you’re scrolling down the page, it will stand still at the position, so you can click to go back to the index whenever you want. I choose fixed position to realize it.
Besides, I also came across a tricky little problem when try to use the link in GitHub to view the website. It failed to load the index, showing 404 on the page.I got quite confused and really didn’t know what the wrong was. After spending half an hour struggling with it, I ultimately found out that it was because i named the index page: Index.html, the problem solved after I changed it to index.html. Still don’t quite understand why this happened, but take it down in case you might have the same problem.lol
