⭐️Px Vs Em Vs Rem
Do you choose the right unit for your CSS?
Understanding px, em, and rem is essential for building scalable and responsive designs.
1. px (Pixels)
- Fixed size.
- Doesn’t adapt to user preferences.
- Ideal for precise measurements like borders.
2. em (Relative to Parent)
- Relative to the font size of the parent element.
- Great for scaling elements within a component.
3. rem (Relative to Root)
- Relative to the font size of the root (:root).
- Ideal for consistent and global scaling.
When to Use?
- Use px for borders or fixed dimensions.
- Use em for local scaling inside components.
- Use rem for global consistency across the app.
💡 Bonus: Combine
rem for base sizing and em for internal adjustments! Next Post: Viewport Units (vw, vh, vmin, vmax)
👍1
Forwarded from Chapi Dev Talks
አ አደራቹህ እንዴ
ኮ ኮደር ነህ እንዴ
... Keep it going 😁
ኮ ኮደር ነህ እንዴ
... Keep it going 😁
CAPTCHA is an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”
@googlefactss #funfact #technology #nowyouknow
@googlefactss #funfact #technology #nowyouknow
Day-01-Social-Links-Profile
Hey everyone! 🎉
I'm excited to share that I've recently completed a front-end coding challenge from Frontend Mentor (:@frontendmentor
the Social Links Media Profile challenge. I'm thrilled with how it turned out and I'm eager to get your feedback.
This project is a social links media profile that showcases my front-end development skills. It's built with HTML and CSS, and I've used media queries to ensure it's responsive and adapts seamlessly to different screen sizes.
Technologies Used:
HTML: I used HTML to create the structure of the page, organizing the content into logical sections and elements.
CSS: I leveraged CSS to style the page, incorporating elements like fonts, colors, spacing, and layout.
Media Queries: To make the page responsive, I used media queries to modify the layout and styling based on the device's screen size, ensuring an optimal user experience on various devices.
Live Demo
Source Code
#DevCommunity
#WebDev
#SocialLinkProfile
#FrontendMentor
❤3👍2🔥1
Day-02(:-Result Summary Components
I've just completed the Day 02 front-end coding challenge from @frontendmentor, building the Result Summary Components. I aimed for full responsiveness across many devices. It was built with HTML and CSS.
Technology Used:
HTML: Used for the webpage structure.
CSS: Used for styling and responsiveness
Live Demo
Source code
#DevCommunity
#FullStackDev
#FrontEndDev
#FrontendMentor
@SelfTaughtDev1
🔥2👍1🥰1
Day-03-Order-Summary-Components
I've just completed a front-end coding challenge from @frontendmentor! 🎉 I built an order summary component using a flexible layout to center it and ensure responsiveness across most devices.
live demo
Source Code
#DevCommunity
#FrontendChallenge
#WebDev
#Day03OrderSummaryComponents
@SelfTaughtDev1
🔥2👍1
Today I coded💻👨💻 for almost 4 hours.I'm tired and I need a rest😔 .After I finish what I'm doing,I'll share it with u.
Have a good day☺️
Have a good day☺️
⚡2👍1
"The only way to do great work is to love what you do." - Steve Jobs🫡
👍1🔥1
Forwarded from Dev Nerd (Roobi)
YouTube
ሳይንቲስቶች ሚጠቀሙበትን AI እንዴት ሰራሁ? Gugut Podcast Ep#178
Meet Dagmawi Babi, a creative content creator, full-stack developer, and podcaster passionate about tech! Whether you're a freelancer, aspiring developer, or just love tech, Dagmawi shares insights, tips, and stories that inspire and inform. Tune in for all…
🔥2
#Day-04-Bento-Grid
Hey guys, I know I haven't been consistent for the past three days because I had some problems. Starting now, I'll try to be more consistent. I've just finished an exciting project called Bento Grid from @frontendmentor.
I'm trying to make it good as much as possible using CSS Grid.
Live Demo
Source Code
#FrontendChallenge
#WebDev
#Day04
#DevCommunity
🔥2