Supercharge your Websites

Let's Supercharge your websites by only using few lines of CSS.

Try Mobbin to design top tier websites:

Let’s connect:

---------

#css
#webdevelopment

[Actionme]

Please for the love of god, do not use scroll snapping. It works weird on different devices and messes with different zoom levels.

[Spadacci]

I'm from Brazil and the way you explain sounds like anyone can learn CSS and Design, i'm really grateful people like you exist on Youtube.

[hotlineoperator]

Wow. This is now my favorite YouTube channel. Waiting for JavaScript starter episode.

[cadenchong]

We would definitely love to see you make a video about svg graphic and complex animation!

[CristianKirk]

A web developer that hates CSS is like a car mechanic that hates repairing cars. This is the reality of web development.

[Yensbeat]

CSS Enhancements:

Use CSS variables for consistent color application.
Apply gradients for a dynamic look, especially on borders and buttons.
Utilize flex and grid boxes for layout, with padding and rounded edges for a polished feel.
Responsive Design Tips:

Implement dynamic CSS features like viewport units, clamps, and Flexbox.
Avoid hardcoding pixel values; use ratios for responsive and visually appealing designs.
Interactive Elements:

Enhance user experience with hover effects on images, icons, text, and buttons.
Experiment with background, border, padding, and shadow animations for interactive buttons.
Advanced Animations:

Use keyframes for moving, scaling, or rotating elements to add visual interest.
Combine SVG and CSS for complex animations, employing float, fill, and reveal transitions.
Design Inspiration and Tools:

Look to platforms like Figma, Behance, and Dribbble for design ideas.
Use Mobin for a library of designs and user flows, simplifying the design process with a focus on user experience and implementation ease.

[allenarcher]

Awesome content Sajid, especially for a beginner like myself

[tegathemenace]

Tbh if you're not a UI UX designer. No amount of css would save your website from looking bad. The best engineers know most features but without the architect they won't apply lots of it and won't even know what they omitted.

[phatle]

High quality developer content Bro! Keep it up 😎

[konstidog]

An alternative way to apply gradient borders is via border-image-source!

border: 2px solid;
border-image-source: linear-gradient(0deg, #f00, #00f);
border-image-slice: 1;

[Codebyakshay]

please keep making this kind of videos dont stop

[ahmedhemdan]

thanks for the video and I like the round edged example 😂

[shrinken]

those round edges do be lookin nice tho

[Xizilqou]

0:58 Round edges can definitely look good, but there's a lot more nuance to design than that; they'll make a website look ugly as hell if they're used indiscriminately. In a lot of cases, it can look better to just have edges be nice and crisp.

[ashkshah]

Bro i am noob while writing css, you provide valuable knowledge through video where should we apply css so our webpage looks cools. But i want to learn more about css. Like which point should be focused while applying css. Pls make a proper video on this topic or give me any documentation where i check all this trick.

[NihadBadalov]

Amazing video! Could you make a video on how to choose the initial color palette for a website?

[frytura]

rounded edges are so good GNOME and mac do their best to aways have some.

[Trendi_Vibes]

Only noob can make a beautiful webbistes video is a masterpiece ✨️ 😍

[owhite]

could you make a similar video for javascript as well? what is the first step for javascript and the right way to do it?

[medamine]

The "?via=sajid" doesn't work, you might wanna check that