Html and Css & Jsآموزش

🖥 ​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

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

🟡 Random Color Generator

Simple color generator on JavaScript

🖼️ Codepen code


🆔 @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

➡ bfe.dev

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

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

🌐 https://bigfrontend.dev/


🆔 @htmlcss_channels

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

Useful websites for web developers:

⧩ http://sevalla.com
Hosting

⧩ http://cliow.com
URL Shortener

⧩ http://websitevice.com
UI inspiration

⧩ http://freecodetools.org
Code and SEO tools

⧩ http://uideck.com
Templates and UI Kits

⧩ http://seotest.me
On-page SEO checker

⧩ http://responsively.app
Dev tool for faster web development

⧩ http://htmlrev.com
HTML templates

⧩ http://remove.bg
Remove the background of any photo

⧩ http://coolors.co
Color palettes

Share your favorite websites and tools.


🆔 @htmlcss_channels

#JavaScript for everything


🆔 @htmlcss_channels

دو ریپوی باحال برای علاقمندان به #جاوااسکریپت و #Css

🔹Awesome JavaScript

It contains a curated list of JavaScript frameworks, libraries, resources,  and tools to help you become a better JavaScript developer. https://github.com/sorrycc/awesome-javascript


🔹CSS Style Guide

This repository offers best practices and conventions for writing clean, scalable, and maintainable CSS code. https://github.com/dropbox/css-style-guide


🆔 @htmlcss_channels

🔹30روز تمرین و چالش #JavaScript

This repository provides a 30-day JavaScript coding challenge which can help you to improve your JavaScript skills through hands-on practice.
https://github.com/wesbos/JavaScript30

🔹30 seconds of code

It is a great collection of useful JavaScript snippets that you can understand in 30 seconds or less.
https://github.com/Chalarangelo/30-seconds-of-code



🆔 @htmlcss_channels

نکات و ترفندهای طراحی و توسعه وب برای حرفه ای ها

JavaScript

- More than 100 chapters
- 400+ Pages

https://goalkicker.com/JavaScriptBook/

❯ Node.js
https://goalkicker.com/NodeJSBook/

❯ React
https://goalkicker.com/ReactJSBook/

❯ React Native
https://goalkicker.com/ReactNativeBook/

❯ TypeScript
https://goalkicker.com/TypeScriptBook2/

❯ jQuery
https://goalkicker.com/jQueryBook/

❯ Angular
https://goalkicker.com/Angular2Book/


🆔 @htmlcss_channels

Who's learning #CSS?

Here are a few tutorials for you:

1. CSS pulse animation
http://markodenic.com/css-pulse-animation

2. Get started with CSS
http://markodenic.com/css-tutorial

3. Chttp://markodenic.com/css-flexbox/dJuQCaYId7

4. CSS line-height
http://markodenic.com/css-line-height

5. CSS Tips
http://markodenic.com/css-tips



🆔 @htmlcss_channels

پرسیدید "از چه سایت هایی برای افزایش مهارت هامون در طراحی و توسعه وب استفاده کنیم؟؟"

Web Development (HTML/CSS/JS)

❯ HTML ➟ https://web.dev/html
❯ HTML ➟ http://learn-html.org
❯ HTML ➟ https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content

❯ CSS ➟ https://web.dev/css
❯ CSS ➟ http://css-tricks.com/guides
❯ CSS ➟ https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics

❯ JavaScript ➟ https://web.dev/javascript
❯ JavaScript ➟ https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting

❯ HTML & CSS ➟ https://theodinproject.com/paths/full-stack-javascript/courses/intermediate-html-and-css
❯ HTML & CSS ➟ https://scrimba.com/learn-html-and-css-c0p

JavaScript, React, Next, Node.js, Express.js

❯ JavaScript ➟ http://javascript.info
❯ JavaScript ➟ http://web.dev/javascript
❯ JavaScript ➟ https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting
❯ JavaScript ➟ https://theodinproject.com/paths/full-stack-javascript/courses/javascript

❯ Node.js ➟ https://nodejs.org/learn/
❯ Node.js ➟ https://theodinproject.com/paths/full-stack-javascript/courses/nodejs

❯ Express.js ➟ https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs
❯ Express.js ➟ https://expressjs.com/en/starter/installing.html

❯ React ➟ https://scrimba.com/learn-react-c0e
❯ React ➟ https://theodinproject.com/paths/full-stack-javascript/courses/react

❯ Next.js ➟ https://youtube.com/playlist?list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY


🆔 @htmlcss_channels

4 GitHub Repos to Learn Node.js :

Open this🧵


1⃣ Node.js Best Practices

This repository gives you over 80 tips on writing good, clean Node.js code.

https://github.com/goldbergyoni/nodebestpractices

2⃣Learn Node.js by Building 10 Projects

This repository provides projects that you can build using Node.js. It’s a great way to get hands-on experience while learning Node.js.

https://github.com/MAshrafM/NodeJS_Projects

3⃣Node.js Design Patterns

For intermediate to advanced developers who want to learn how to create well-structured Node.js apps.

https://github.com/PacktPublishing/Node.js-Design-Patterns-Third-Edition

4⃣The Node.js Master Class

This course focuses on Node.js basics like HTTP, file handling, and routing by building a simple API, without using any frameworks.

https://github.com/pirple/The-Nodejs-Master-Class



🆔 @htmlcss_channels

🔰 Chrome's Face Detection API!!

Used in real-time face detection for image processing, security, photo apps, or adding effects on faces in media.

🆔 @htmlcss_channels

🔰 List.JS Library

Ideal for creating dynamic, searchable, and sortable lists on websites, enhancing user experience for e-commerce, directories, content libraries, and any data-driven application with filterable lists.

#Javascript

🆔 @htmlcss_channels

#Javascript - Map methods.


🆔 @htmlcss_channels

#CSS Tip 💡

Learn how easily we can use video as a background


🆔 @htmlcss_channels

ویدیوهایی برای یادگیری بهتر CSS

1. CSS pulse animation
http://markodenic.com/css-pulse-animation

2. Get started with CSS
http://markodenic.com/css-tutorial

3. CSS Flexbox
http://markodenic.com/css-flexbox

4. CSS line-height
http://markodenic.com/css-line-height

5. CSS Generators
http://markodenic.com/css-generators

6. CSS Tips
http://markodenic.com/css-tips


🆔 @htmlcss_channels

5 Ways to Create a Button Hover Effect in #CSS


🆔 @htmlcss_channels