You've taken the first steps. You've had a blast writing up some HTML code.
You even added a nice looking image AND used semantic HTML for improved accessibility and improved browser understanding of your content.
Note: Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content.
But now, it looks poo.
So poo, even you don't want to look at it for longer than you need to. 😄 Know what I mean?
As I write this, this is the situation I find myself in. I don't want to design ugly web pages, so I set myself a challenge of beautifying my Tribute page about Satoshi Nakamoto.
What follows next are a series of screenshots and tips I came across along the way so that if you happen to be in the same situation, you know where to start!
Before
See what I mean by poo? #LetTheTransformationBegin!
- First, I imported a Google Font (VT323 for that "retro code look")
- I then added one more image to spice up the page a little and added the pink border.
- Next, I added the heading with some cool CSS effects.
- Final touches included scaling the images on hover, for some interactivity.
Lessons learnt
- Designing the desktop view was great. It created the feeling of progress, however, I SHOULD HAVE CODED MOBILE-FIRST 😭, especially because I wanted it to look good on mobile.
- Trying to adjust columns and layout after, was a pain in the ***.
- It's still not perfect but I had to move on after spending more time than I needed to on the project.
- If there's one thing I'd say, it would be to start simple. I thought I'd need to do a lot to make it look somewhat presentable.
- Simply adding images, non-boring font, exciting CSS and some layout features were enough for one of my first attempts at beautifying HTML with vanilla CSS on the fly.
What now?
- I came across a resource: frontendmentor.io that aims to help teach how to beautify the front end. I'll check it out and start thinking about learning Bootstrap now that I know the basics of HTML and CSS.
- I'll also finish the remaining practise projects I have lined up.
Final words
I hit some challenges and used Google quite a bit (mainly for some CSS syntax). The feedback from my Bootcamp instructor (Black CodHer Bootcamp!) was also invaluable.
Doing this was a lot of fun, and I'm ready for more!
View the final version
https://zealous-snyder-47096a.netlify.app/
P.s. It's much prettier on desktop mode 😋
Thank you for your time. Please drop your comments below. See you in the next one!
Top comments (0)