10 lifesaving HTML/CSS tricks for begineers

Learning new things brings both joy and frustration, and development sits on the top of the frustration pyramid.

Let me give you some tricks that helped me a lot while developing a couple of websites.

1. The magic setup

This trick helps you prevent most of the bad-layout problems you can encounter in HTML.

Horizontal sliders, absolute-positioned items doing what they want, margins, and padding randomly everywhere: we don’t want them.

* {padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

Then, if you need to change something, you edit it on the specific item.

sometimes “display:block” could be harmful, but in most cases, you’re going to treat <a> and <span> as blocks like others.

2. Reset

body, div, h1,h2, h3, h4, h5, h6, p,ul {margin: 0;padding: 0;}

3. Viewport height as text size

The best way is to use viewport height. Why not the width? because if we set up small fonts based on width, going on mobile they will shrink to “none”.

Let’s see an example:

3vw on a 1920x1080 desktop = 60px. Big.

3vw on a 320x*** mobile = 9px. TOOO SMALL.

Viewport height instead, is extremely more stable between mobile and desktop.

.text {height: XYZvh;
}

4. Use single-line property declaration

.with-border{border-width: 1px;border-style: solid;border-color: red;}/* Simple way to do this */.width-border{border: 1px solid red;}

5. Use text-transform

<h1 class="title">THIS IS TITLE</h1>

You can jsut use the text-transform property:

.title{text-transforom: uppercase;}

6. HTML IMG backgrounds

Often in web design, you want to create a container that has an image background. This was often made with the background-image CSS property, but it’s extremely bad in my opinion:

1. you lose SEO.

2. you have to edit CSS every time.

3. you can’t re-use code.

Let’s use a simple img inside HTML and transform it into a dynamic background!

(as you can see, the relative positioning we set earlier was extremely useful. So not needed if you already did the setup).

.background {
position: relative;
}.background img {width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top:0;
left:0;}

7. The overflowing text effect

Here an example from my portfolio website:

Let’s see the minimal code needed.

.parent {height: /*something similar to child’s font size*/;
overflow-y: hidden;
display: block;
}.parent .child {animation-name: appear;
animation-duration: …s;
}@keyframes appear {
from { transform: translateY(/* parent’s height*/) }
to { transform: translateY(0)}
}

Obviously, you can use transitions too.

8. Splitting both HTML and CSS

It’s important to merge them because you want to minimize the number of HTTP requests your website does.

The same principle can be made with HTML. If you’re not developing in SPA environments like Gatsby, you can use PHP to include and require pieces of HTML code.

For example, you’d want to keep a “/modules” folder, containing the navigation bar, the footer, etc in separate files. So, if you need to make one change, you don’t have to edit it on every single page.

The more you can modularize, the better the outcome.

9. Hover effects

.first h4{font-size:36px;color:#000;font-weight:800;}.first h4:hover{color:#f00;}

10. Use a CSS preprocessor

They will help you declare colors, sizes, etc one single time, and create CSS with for cycles and similar things. Also, it’s a mandatory skill in any developer’s portfolio.

This were some basic CSS tricks i think beginners must know for productivity and doing their projects fast.

keep coding,keep learning!

thank you.

web developer,AI-ML enthusiast,IT student