Build this layout using CSS grid

Code : https://learning.atheros.ai/courses/modern-frontend-developer-html-and-css/sections/ui-components/layout-holy-grail-top-and-bottom-main


🆔 @htmlcss_channels

➡ bfe.dev

پلتفرمی برای توسعه مهارت های Front-End ، آماده سازی برای مصاحبه و ارتباط با توسعه دهندگان در سراسر جهان.

بخش های مختلفی در سایت وجود دارد ، از جمله موارد برنامه نویسی JavaScript ، React ، TypeScript و CSS و همچنین طراحی سیستم front-end

🌐 https://bigfrontend.dev/


🆔 @htmlcss_channels

🔴 vanilla-tilt.js

A lightweight library that allows you to add the effect of 3D tiles to the elements on the page. She reacts to mouse movements, creating smooth animations without unnecessary dependencies.

Go to github


🆔 @htmlcss_channels

🟡 Random Color Generator

Simple color generator on JavaScript

🖼️ Codepen code


🆔 @htmlcss_channels

10 Resources to Learn and Practice Your #CSS Skills

🎯CSS-Tricks

This website provides CSS resources, tutorials, and articles.
https://css-tricks.com/

🎯Flexbox Froggy

Flexbox is an important topic of CSS, and you can learn it by playing a game called Flexbox Froggy.
https://flexboxfroggy.com/


🎯Grid Garden

This is an interactive way to learn the grid layout system while having some fun.
https://cssgridgarden.com/


🎯CSS Diner

This is a fun game that helps you practice and understand CSS selectors.
https://flukeout.github.io/

🎯CSS Battle

You can improve your CSS skills by creating the target images using CSS.
https://cssbattle.dev/

🎯Smashing Magazine – CSS

Smashing Magazine regularly publishes articles, tutorials, and case studies related to CSS.
https://www.smashingmagazine.com/


🎯CSS Reference

This website provides an easy-to-navigate reference guide for CSS properties. It’s a handy tool for quick lookups and learning.
https://cssreference.io/


🎯Learn CSS Layout

This is a simple tutorial that covers the basics of building layouts with CSS.
https://learnlayout.com


🎯GitHub – Awesome CSS

This GitHub repository provides a curated list of CSS frameworks, libraries, and tools that can be really helpful.
https://github.com/awesome-css-group/awesome-css


🎯Frontend Mentor

This website offers realistic design challenges that include HTML, CSS, and JavaScript.
https://www.frontendmentor.io/



🆔 @htmlcss_channels

🖥 ​Groovy

🖥 Groovy is a transpire that transforms #Python functions into their equivalents on #JavaScript!

🌟 It is used in the Gradio library, allowing developers to write functions on Python, which are then performed on the client’s side as JavaScript, providing quick work. Groovy supports the subset of the Python Standard Library and some specific Gradio classes, with an emphasis on a detailed error message when trying to transplant unsteady code.

🔐 License: Apache-2.0


🖥 Github



🆔 @htmlcss_channels

🟡 3D Product Cards

Animation cards when guidly and the possibility of changing color

🖼️ Codepen code



🆔 @htmlcss_channels

🔴 Chroma.js

A small JavaScript bibliotek (about 13.5 KB), designed for various color transformations and creating color scales. Allows you to read colors from various formats, analyze and manipulate them, as well as generate color palettes for data visualization.

github


🆔 @htmlcss_channels

#HTML File Paths Explanation


🆔 @htmlcss_channels

12 fancy buttons

A large number of different variations of button hover. Implemented with CSS.

⤷ Get code


#CSS

🆔 @htmlcss_channels

اپلیکیشن Sololearn

با اپلیکیشن Duolingo کار کردین؟ این یه برنامه اس برای یادگیری طراحی وب و اپلیکیشن!
کلی دوره های آموزشی با رابط کاربری ساده و دلنشین داره


🆔 @htmlcss_channels