I was recently tasked with the project of making a personal webpage out of HTML and CSS. This is what I ended up with. The following is a little commentary on what I learned and what I will continue working on, amongst other things. Oh, and here's the repo if you're interested in the code. I might add images to this post later on - just gotta find a place to host them.
1) What went well? Key Learning.
The stand-out thing for my webpage is the CSS art. I'm lucky that my name almost sounds like a phrase "Ewe (L)in Loo" so I just went with that. Making the art allowed me to learn a lot about position: relative and position: absolute. I always tend to forget this though - maybe that's a sign that I need to continually be making CSS art.
The second thing I enjoy about this webpage is the sticky navbar. I feel the use of the border styling on the top and bottom ties together the look of the page while providing functionality. It was the first time I've used position: sticky before so it was interesting to see it in action.
2) What could have been improved?
I had to make the two two-column sections of the webpage in two different ways. Have I written 'two' enough? When I made the first two-column section, I was still in the frame-of-mind to make CSS art. This resulted in a position-based layout. For some reason, this wouldn't work on my portfolio section. I have a feeling it has something to do with the positioning of the other elements. With a time restriction, I had to quickly find a way to get the layout looking the way I wanted. That's where display: flex and flexbox came in.
I also wanted to make the back-to-top button sticky at the bottom, however couldn't figure this out. I guess the webpage is pretty short anyways so maybe this would have been redundant.
Lastly, there are some small gaps between the navbar and its borders. I'm not sure why.
3) The key take aways.
One of the key take-aways would be not to underestimate how long it will take to code something. You never know when things won't function the way you expect them to so you should always have your priorities straight.
4) The process you followed?
I started out by creating the CSS piece that's seen on loading the page. I knew I wanted to have something to make my page stand-out and I had this idea of turning my name into a pun. From there, the order of completion was the about section, footer, and portfolio. All throughout the way, I tried to remember to make frequent commits. I only pushed right before I was going to take a break from coding. It was very satisfying to be able to see my changes live.
Anyways, I hope my little project gave you a bit of a laugh. Let me know if there's anything else you'd like me to talk about or show me your own portfolio in the comments!
Top comments (0)