Learning website development and website design brings frustration and joy for beginners. Today, knowing how to code at least some front-end is necessary as a UX/UI designer because most job offers seek expertise in developing and designing a website.
We will discuss nine lifesaving HTML/CSS tricks for you. We hope you are feeling well, knowing that you can use tricks at the time of your need.
1. Start with Gatsby.js in the first place:- t-shirts will teach you coding from a “Vanilla” point of view. For example, they will open eclipse and run simple and useless code to teach you the basics of Java coding. I think this is not the right way of learning.
In this case, I suggest beginning with Gatsby in the first place. You will have to code HTML and CSS anyways, but at the exact time, you’ll understand the basics of React.
This allows you to investigate a lot more and access complicated animation libraries like Framer-Motion.
Since Framer-Motion in Gatsby is a bit distinct, I strongly suggest following this tutorial.
2. Use a CSS preprocessor:- Less, Sass, SCSS are CSS preprocessors. You have to choose one of them. Less is not always the worst. Learn to use them immediately. This will help you to declare colours, sizes, etc one single time. It’s one of the mandatory skills developers need.
3. Smooth Scrolling:- I hope you have looked for “smooth scrolling” numerous times after ending CSS lines. Nowadays, modern websites copy the mobile battery scrolling on the desktop too. Smooth scrolling is also known as “momentum scrolling” or “Inertial scrolling. Try to find the script that suits your development techniques and, often, pre-made websites.
Lorenzo and luxy.js are standard for smooth scrolling.
Also Read: How to Create a User-Friendly Website
4. Splitting both HTML and CSS:- Create different CSS files ( one for desktop and one for mobile) while developing. Then, merge them. This will help you to minimize the number of HTTP requests your website does.
You can use PHP to include and require pieces of HTML code if you are not developing in SPA environments.
For example, if you want to keep a folder with the navigation bar, the footer, etc in separate files. So, you have to make one change rather than editing it on every single page.
5. The overflowing text effect:- Modern websites often use this kind of overflowing text, appearing from the bottom. Here is an example:-
.parent {
height: /*something similar to child’s font size*/;
overflow-y: hidden;
display: block;
}
.parent .child {
animation-name: appear;
animation-duration: …s;
}
You can use transitions too.
6. HTML IMG backgrounds:- You can create a container with an image background. Do not make the background image with CSS property.
- You lose SEO.
- You have to edit CSS every time.
- You can not re-use code.
.background {
position: relative;
}
.background IMG {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top:0;
left:0;
}
This is a simple img inside HTML.
7. Explore CSS blend modes:- Duotone imagery and colourizer effects are some of the hottest web design trends. They are very common across the web. Spotify helps to implement them cohesively. Now you can finally stop developing numerous different coloured editions of your assets and connect the effects directly in the browser. I hope these nine lifesaving tricks will help you as a saviour. You can convert html websites to WordPress using these significant tricks.
Using CSS blend modes is not only a tremendous way to strengthen the look of the content across websites, but it also facilitates you to set several colour versions of an image, changing only one value in CSS: the colour. There are 15 apparent blend mode values available including screen, overlay, lighten and darken.
To accomplish a pleasant duotone effect, you can use a high-contrast black and white image. You can do this by assigning CSS filters to set grayscale and a high contrast level.
8. Animated lines and decorations:- You need to integrate interesting effects like animated underlines, appearing and disappearing backgrounds with websites.
You do not have to create new elements time and again. You can utilize:: after and:: before pseudo selectors.
The content property setting is necessary. Don’t forget to set that. Otherwise, the pseudo-element will not be rendered.
.item::after {
content: “;
position: absolute;
top: XYZ;
left: XYZ;
… properties you want;
}
9. The magic setup:- You can prevent most of the bad layout problems you encounter in HTML.
We do not want sliders and other items to do what they want with margins, and padding randomly everywhere.
* {
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 a specific item.
Sometimes “display: block” could be dangerous, but in most cases, you are going to deal with <a> and <span> as blocks like others.
Conclusion:-
Author Bio –
Hermit Chawla is a MD at AIS Technolabs which is a Web/App design and Development Company, helping global businesses to grow by Global Clients. He love to share his thoughts on Web & App Development, Clone App Development and Game Development.
For More:
LinkedIn: https://www.linkedin.com/in/hermit-chawla-lion-82b6513b
Twitter: https://twitter.com/aistechnolabsFacebook: https://www.facebook.com/aistechnolabs