A powerful tool to have for CSS/Html

Mark — Fri, 11 Sep 2026 08:46:02 +0000

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

Turning something Ugly into Beautiful

Mark — Wed, 09 Sep 2026 14:43:07 +0000

Recently I have been learning html & css and I build a website:

...
It was not pretty and I knew it. But I was kinda happy, it was something I made. It was like my small baby. So after learning a bit more I improved it. I tweaked a couple of things, added a background and found out how to put objects in different positions which was a major upgrade.

Still, the colors weren't that good. It was half-done, something felt left out. After a couple of more Udemy lectures I decided to actually target my learning about Css and copy a popular German website called "Tageschau", I Agressively copied from the header up to the footer, every single points layout and even added my own twists. I ended up using the colors from discord (as I liked them) in order to finally make this masterpiece.

Looking back on it I spent a big portion of time making it look good, which isn't a normal thing for programmer (in my experience, I'm sorry fellow programmer), but it made the whole process so much more satisfying seeing it so nice!

Suprisingly, the biggest difficulty was making the header actually fixed, I tried various things, lots of things, and I just couldn't fix it. Another problem were the left and right dark gray areas.
I initially used flex to make 3

1x left, 1 right and then the middle for the main body, but every single time I made a long paragraph or increased the image slightly too much the dark gray parts shrinked while the center grew - It looked off and just hated it! Ahhhh

... but after a normal day, some breakfast, I sat down at my pc and simply tried a thing out and it clicked.
I tried replacing the left & right area from

with 'margin-left' and 'margin-right' and it worked!
The dark gray left and right parts stayed the same no matter how big the image in the middle was or the length of an paragraph! That moment I fell in love with the margin and padding code in Css!
After one miracle another one happened - I easily made the header actually stick while scrolling. It was so simple...

Some days I don't feel like coding or think 'maybe it's not for me', but after struggling days and days, trying something out, falining, repeating it, having enormous amount of little problems and somehow getting through them.
You get a website that looks 'less bad' and still 'not professional'. But YOU see it differently, YOU feel something different by just looking at it! You see it as a masterpiece. The best website you have ever seen! Because if theres one thing you are absolutely sure about, it is that YOU WORKED making it AND now FEEL ON TOP OF THE WORLD!! NOW I FEEL LIKE I WAS MADE FOR THIS!
My name is Mark and THIS is my First Blog!

DEV Community: Mark

A powerful tool to have for CSS/Html

Turning something Ugly into Beautiful