A New CSS Banner
That banner looks pretty much the same as the previous steps, right? However, the difference here is that the banner is written in CSS, it isn't an image!
If you take a look around the pages on this step, you will also notice that the banner image has been replaced with the fancy CSS banner there too. Cool, huh?
Now we're done we have a site that has achieved the following:
- A website that has been completely handwritten.
- A website that is very light - the entire thing is less than 120KB in size and scores 99% for mobile and a perfect 100% for desktop on Google's PageSpeed Insights.
- A website that contains only a single line of JavaScript (on the close button on the Menu).
- A website that looks good, not only on your computer, but on your mobile too.
- A website that has a blog that you can use to share your thoughts, ideas and knowledge with the world.
Well done folks, you've made it to the end. Now go forth and enjoy your new website, write some content and use what you've learned in this series to make this website your own.
If you do use this site as the basis of your own site, please do get in touch to show me what you've done. I will make sure it's added to the Showcase page.
This step is covered in more detail on my blog post, Making A Light Website 08 - Replacing Images With CSS.
You can download the source code for this step (and all other steps) from the downloads page.