I've made an Website using CSS and HTML, but this time I implemented
Bootstrap
-> It's premade css code, you download it or link it in your code and then enjoy it. There are A LOT of asthetic designs already premade that you can twist and tweak as you desire, fast and reliable.
But the downside is that it's easy to rely on it too much. I quite frankly forgot that I can also use normal css, I kept looking for some Flex layoud when doing something in simple words, you get a bit ... lazy after finding about Boostrap.
My main goal was to make the page look GOOOOD, at first glance. After finding out you can make GRADIANT colors as I saw in a website I immediatly tested many versions of an gradiant.
At first I experimenting, I looked in w3 (a css help website), asked AI to generate, took some colors and made my own twists. I liked the design, it was kind of golden, but felt a bit ... as if someone simply used an flashlight.
Then I adapted the gradiant based on the chess logo on top. I made a header beforehand and the chess logo happened to be orange so I tried to make an orange/yellow gradiant, this one semed the best out of the gradiants I tried out, but still it blinded me, it was like the color orange tried too much to be bright or impress you.
Then I simply googled "golden gradiant colors" and it gave me some of the most georgous gradiants I have ever seen, I tried a few and fell in love with this one. The highlight that I learned is that you can
- Make a BALL gradiant as if a circle is inside and the gradiants goes outside in layotus like an onion
- Make an linear gradiant from left to right or right to left (simple)
- Make a diagnole gradiant using the degree code changing the linear gradiant into a diagnole one with e.g. 135degre
Then I added some 'svg' into it, quite frankly I felt that using emojis was a cheap trick and after finding out you can pick some *cool symbols * for a calendar or anything you can find from bootstrap I quickly got my hands on some symbols and began my science experimentation.
I REALLY LOVE the golden background on the symbols, I made an extra class just for them, to make them roundy and nice as if made from apple and the golden gradient - Mwah! Just a Chef kiss!
... As you can see I made a testimony. The man in the picture is Hikaru nakamora and he is an GM, but for my learning sake he's Peter from Berlin and he just got 2.000 elo in chess (a chess rating system).
Only after writing this post I kind of realized that I rely too much on breaks
, like if I need space I just paste 3x
and job done, but using margin or padding is even better!
Imma used that next time - Future Me if you reading this then dont use BR! unless you Really need to!
OH! And I also added some touch of gold in many areas, like between the testimony I made
with golden background or in the "for busy people" a bit of golden gradient or in the "With only 30 minutes every day". Having too much gold is not a problem". I wanted to add more gold, but resisted in order to make the gold feel premium and not just scattered around everywhere.
As you can see I made a footer with gray color, it happened on accident but I liked it, it was a perfect match with the gold/white theme I was going for. I made some tabs that you can open with progress bars and overall most things I added here were just to try out "boostrap", they were SOOO MANY things I wanted to try out but it was too much, and for the most part I guess I learned how to use bootstrap, it took quite some time to finish this website.
--- Conclusion.
My biggest lesson I learned here is that it's okay to use AI to learn, I always had the thought 'Don't use ai, it will make you lazy or remove the learning part of programming' but after struggling a lot, AI can be a good tool to have in your toolbox, of course relying solely on AI and making it do everything for you is bad, but sometimes using it can give you some answers you want desperately to be answered, especially if it's about css gradiant.
Also now I get the phrase "google is your best friend". It's true. It's 100% true, you google literally every minute the most simple things or forget how to remove margins at a new website, but then remember how to do a complex code.
But the most *important * lesson is that watching tutorials how to use boostrap or how to code with CSS/HTML isn't learned through 'watching', but by 'building websites', experimenting with flexboxes, trying to make a website using bootstrap, copying a popular news website by focusing on the layout of it.
My name is Mark and this is my second post, thank you for reading <3
Top comments (0)