About this project ---- Hand-Written-HTML-Site
Introduction
I started the Hand-Written-HTML-Site project on 2022.2.5. I do have a website (actually two), but they are all generated,
one by Jekyll That's my old website! and
one by Hexo That's my new website!.
When I run generated sites, I can only change some settings and I can't change the source code.
So after I have those two sites, I wonder 🤨 whether I can build websites from pure HTML.
I have tried several times before, but the effect wasn't exactly what I wanted. 😑 But recently I visited
W3School That's a very good place to study Website Building! ,
I found something new. And then the usage of them makes my Hand-Written-HTML-Site become more and more elegant.
The Main Core --- HTML
Well, this site is completely hand-written. I don't use any generators, yes, no Jekyll, no Hexo, and no BootStrap.
I wrote it by hand. I used HTML5 so I can use the <audio> tag. See that <!DOCTYPE html> ?🧐
My server --- GitHub Pages
To deploy the files into a remote site, I'll need a web server. But I don't want to spend any money, so I used GitHub Pages as the server. You can go to
pages.github.com to learn more. You can use it to build your blog or organization site. Isn't that cool?🎬
UI --- CSS and more
About the appearance and animations
If a website is a person, then CSS is his skin. I used CSS3 to create fantastic appearance for this site. All the background, heading,
everything on the page are beautified by CSS.
Try hovering on my photo on the left. It will spin when your mouse is over it. And try those links too! There will be a Tooltip. Some of the animations are created by
CSS. Now let me give you an example:
This makes my photo able to spin.🎨 I also used a third-party package for the icons...
Font Awesome Icons
Wanna know where the icons are from? They are Font Awesome icons. Try them out now:
That equals to: Amazing, right? 😎
I used an online kit for those icons(but sadly I only have a free kit). The package I mentioned
is called l-lin/font-awesome-animation. It allows me to create more kinds of font awesome animations.
See faa-tada! I used it because the original animation
doesn't work for me.😐 Visit their website to see more demos!
The fonts I used
Do you like those fonts I used? I'll give you a list of them:
- Fira Code (that's
Fira Code) - Bigmouth Regular (that's
Bigmouth Regular) - Fabfelt Script (that's
Fabfelt Script) - Gagalin Regular (that's
Gagalin Regular) - Wander Brave (that's
Wander Brave)
Go to my repo and download if you need them!
Mouse Follower!
Now see cautiously at your cursor. Can you see that red dot?🤓 Now try to move your mouse. It will always follow you wherever you go.
I used @bva/mouse-follow-js@0.0.8 to create it. Try this on your website!
All the functions --- JavaScript
The use of JavaScript (actually jQuery) allows me to create beautiful animations and functions. The
Utility Buttons the Survey Banner are built with jQuery. You can Press F12 or
Ctrl + Shift + I to view the source code!😋
JavaScript I wrote
Well, actually I didn't want to learn JavaScript when I started this project... But once I decided to add a
Survey Banner, I realized that I needed to hide it after several seconds. Then I started to write JavaScript.😏
For example:
If you have learned JavaScript for a bit, you will know that $ stands for jQuery.
Third-party packages
I'm not a professional programmer, so I used some npm packages. They are:
- clipboardJS@2
- jquery.scrollTo@2
- jquery-mousewheel@3
- highlightJS@11
- howler@2
ClipboardJS is for the Copy Button. Try them now, then paste in your editor. jQuery.scrollTo
is for creating a linear animation when Back To Top is on. jquery-mousewheel is for listening to mousewheel
events because jQuery cannot listen to mousewheel events!
The package I like most is highlightJS.🧡 It's a package to "highlight" your code on a website. It supports more than 180 languages,
and it provides many themes. I used the Atom One Light Theme. The basics are like this:
Go to their website and learn more!
HowlerJS is for your background music(preloading). I used to use a <audio> tag but it would be very slow. So I used preloading.
Well, I wanted to use XHR but CORS wouldn't let me go pass because I added an Event Listener.😥
JSdelivr --- CDNs
So in order to make my website faster, I decided to use some CDNs. For JavaScript, I used JSdelivr.
It may not be very fast in China, but it's better than hosting myself. For images, I used imgtu.com to upload. Welcome to visit
my album! For your background music, I used BitBucket. It's quite like
GitHub, but it's much faster.✅
Statistics and Counts
When you want to display some data, but you don't want to count it yourself, you can use online projects. They are completely open source so they are safe enough. See them!
shields.io --- badges
The badges (like 
shields.io. It is a professional badge generator. You can create badges however you like and
it's completely free!🤑 Also, it can get information from your social accouts, such as GitHub,
BiliBili and so on. You can also create badges manually:
It's just like filling in the blanks! Go to shields.io and try it yourself!
busuanzi --- count your visitors
Visitor counting isn't that hard. Just put away those expensive APPs!🤚 busuanzi count can easily fulfill your dream.
You can see the statics on the left. Get the magic? It's so easy that you only need one line of code!
There are two display moods. One is Page View, the other is User View. You can choose what you need.
Count your visitors!
So that's all! Thank you for reading~
Tip: This site is tested on Firefox 98.0. It should work well on Chrome too. If you have found some conpatibility problems, please open an issue.
Last Updated:
Last Tag:
Total Languages:
License: