The difference between “
Resetting and normalizing CSS are two approaches to managing the base styles on a web page, but their goals and methods are different.
• Resetting is the process of removing all browser default styles. The goal of resetting is to create a completely “clean” page, where all elements, such as padding, fonts, and margins, will have neutral values to
• Normalization is an approach that aims to
. It corrects styles so that they look the same in all browsers, but does not remove all customizations, as is the case with resetting.
In summary, resetting completely resets styles, while normalization tries to align styles without disturbing the base settings.
@etwebs #css
reset” and “normalize”Resetting and normalizing CSS are two approaches to managing the base styles on a web page, but their goals and methods are different.
• Resetting is the process of removing all browser default styles. The goal of resetting is to create a completely “clean” page, where all elements, such as padding, fonts, and margins, will have neutral values to
eliminate differences between browsers.
• Normalization is an approach that aims to
ensure uniformity in the display of elements across browsers
. It corrects styles so that they look the same in all browsers, but does not remove all customizations, as is the case with resetting.
In summary, resetting completely resets styles, while normalization tries to align styles without disturbing the base settings.
@etwebs #css
🔥3
🖐5 Reasons Why Your Layout Is “Messy”
1 No box-sizing: border-box;
Your padding is messing up widths.
Add this
2 Fixed widths everywhere
Avoid things like
Use
3 Not using Flex or Grid
Still using floats, margins, and absolute positioning?
Use
4 No CSS Reset
Every browser has default margins.
Use normalize.css or a simple reset to start clean.
5,No central container
Layouts break without structure
Use a
If it that useful don't forget to react
@etwebs
1 No box-sizing: border-box;
Your padding is messing up widths.
Add this
* { box-sizing: border-box; }
2 Fixed widths everywhere
Avoid things like
width: 1200px.Use
max-width + width: 100% instead.3 Not using Flex or Grid
Still using floats, margins, and absolute positioning?
Use
display: flex or grid for better control.4 No CSS Reset
Every browser has default margins.
Use normalize.css or a simple reset to start clean.
5,No central container
Layouts break without structure
Use a
.container like .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem; } If it that useful don't forget to react
@etwebs
👍7❤2
Frosted Glass from Games to the Web
A UI games developer (who worked on the Forza series) shares the process of translating in-game ‘frosted acrylic’ design elements to HTML. The end result is nice!
read the article 👈
@etwebs
A UI games developer (who worked on the Forza series) shares the process of translating in-game ‘frosted acrylic’ design elements to HTML. The end result is nice!
read the article 👈
@etwebs
Which CSS units are you familiar with
Anonymous Poll
67%
px (Pixel)
10%
rem (Root em)
7%
em (Element em)
13%
% (Percentage)
3%
ch (Character)
0%
ex (x-height)
0%
vw (Viewport Width)
0%
vh (Viewport Height)
What are CSS units, and how do they work?
CSS units allow you to modify a website’s design, so it’s important to understand how they operate There are three different types of CSS units
Absolute Units: px, pt, PC, in, cm, mm
Relative Units: em, rem, %, ex, ch, fr
Viewport Units: VW, vh, vmin, vmax
Read more 👈
@etwebs
CSS units allow you to modify a website’s design, so it’s important to understand how they operate There are three different types of CSS units
Absolute Units: px, pt, PC, in, cm, mm
Relative Units: em, rem, %, ex, ch, fr
Viewport Units: VW, vh, vmin, vmax
Read more 👈
@etwebs
Namecheap Blog
16 CSS units that every developer should know - Namecheap Blog
In this article, we’ll look at 16 distinct absolute, relative, and viewport units in CSS and how they operate.
👍2
cursor in CSS
indicates a link or clickable item
@etwebs
cursor: property name; auto – Browser decides the cursordefault – Default arrow cursornone – Hides the cursorhelp – Displays a question mark, used for help/tooltipscontext-menu – Suggests a context menu is availablepointer – Hand icon; usuallyindicates a link or clickable item
progress – Shows loading but interaction is possiblewait – Shows loading; interaction not possiblecell – Shows a small cross; used in tables/gridscrosshair – Cross icon; often used in graphics appstext – Indicates selectable textvertical-text – Indicates vertical text selectionalias – Indicates a shortcut or alias actioncopy – Indicates the element will be copiedmove – Indicates the element can be movedno-drop – Drop not allowed (like when dragging an item)If it helpful don't forget to react
@etwebs
🔥3👍2🫡1
How do you prefer to learn new web tech?
Anonymous Poll
65%
Video tutorials
19%
Documentation
16%
Trial and error
❤1
The best way to improve is by BUILDING
Here are 10 projects to practice
https://dev.to/bigsondev/10-projects-to-master-frontend-web-development-acm?context=digest
@etwebs
DEV Community
10 Projects to master Frontend & Web Development
Introduction Learning by hands-on code from day 1 is one of the coolest methods of getting...
👍5
🚀 Check out this amazing website developed by us!
🔗 Website KNM Training
They offer various courses to boost your skills Visit the site, explore the courses and let us know what you think! Drop a comment about your experience. 😊
💬 Join there Telegram channel
@Marveloues401
@etwebs
🔗 Website KNM Training
They offer various courses to boost your skills Visit the site, explore the courses and let us know what you think! Drop a comment about your experience. 😊
💬 Join there Telegram channel
@Marveloues401
@etwebs
🏆4🔥2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Check out this tool for mastering flexboxes!
Flexer is a CSS sandbox that makes it easy to create and arrange flexible layouts. Simply adjust element sizes and spacing, and the site generates clean flexbox CSS code for you.
🔗 flexer.dev
Perfect for quick prototyping or learning flexbox concepts
If it is interesting don't forget to react
@etwebs
Flexer is a CSS sandbox that makes it easy to create and arrange flexible layouts. Simply adjust element sizes and spacing, and the site generates clean flexbox CSS code for you.
🔗 flexer.dev
Perfect for quick prototyping or learning flexbox concepts
If it is interesting don't forget to react
@etwebs
🔥3
Powerful SEO extension for web developers
Meta Explorer is a FREE chrome extension that allows you to check SEO meta tags of any site you browse without any clicks
🔗 metaexplorer
@etwebs
Meta Explorer is a FREE chrome extension that allows you to check SEO meta tags of any site you browse without any clicks
🔗 metaexplorer
@etwebs
Looking for quick syntax reminders?
#Cheatography has over 6,000 cheat sheets covering programming languages, tools, and frameworks perfect for fast reference
🔗 Visit👉 cheatography.com
@etwebs
👍4❤1🔥1🤝1