html and css آموزش

JavaScript-Questions
is a repository with questions and answers on #JavaScript, which will help improve the knowledge of the language and prepare for technical #interview

github

#HTML #CSS #JavaScript

💎 @htmlcss_channels

❤5👍1

2.43K views15:09

0:18

Stylish Logout Button Animation | Pure CSS Hover Effect

#HTML #CSS #JavaScript

💎 @htmlcss_channels

❤11

2.67K views13:35

0:59

Password Generator | HTML CSS JavaScript

#HTML #CSS #JavaScript

💎 @htmlcss_channels

❤7🔥1

2.32K views10:50

0:59

Page loading Animation using #HTML and #CSS

💎 @htmlcss_channels

❤5👍1

3.04K views14:22

Light/Dark/Black Theme

A menu with three different topics (for a day, night, and just dark). Implemented using SCSS.

⤷ code

#HTML #CSS #JavaScript

💎 @htmlcss_channels

🔥2❤1👍1

2.9K views08:34

Building a website from scratch might feel overwhelming at first.

You'll start by coming up with an idea & setting up the project, then move on to building the website, testing the code, & pushing it to GitHub.

https://www.freecodecamp.org/news/how-to-build-a-website-from-scratch-start-to-finish-walkthrough/

💎 @Htmlcss_channels | #css #JavaScript #HTML

❤3

1.31K viewsedited 06:45

🔅 CSS Clamp

clamp(minimum, preferred, maximum);

In this example, the preferred value is 50%.

On the left 50% of the 400px viewport is 200px, which is less than the 300px minimum value that gets used instead.

On the right, 50% of the 1400px viewport equals 700px, which is greater than the minimum value and lower than the 800px maximum value, so it equates to 700px.

💎 @Htmlcss_channels | #css #JavaScript #HTML

🔥2❤1

1.23K views07:01

⭐️

CSS Clamp and font-size

p {
  font-size: clamp(1rem, 4vw, 1.5rem);
}

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3🙏1

1.31K viewsedited 07:01

🔰 5 نکته و ترفند CSS برای طراحی Responsive website بهتر

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥2👏1

1.11K viewsedited 07:01

نکته CSS :تراز کردن متن و آیکون

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3🔥3❤2🙏1

1.19K viewsedited 14:36

این آموزش به شما کمک می کند تا یک افزونه کروم بسازید که هر صفحه وب را با استفاده از جاوا اسکریپت و Manifest V3 تجزیه و تحلیل می کند.

https://www.freecodecamp.org/news/how-to-build-a-chrome-extension-using-javascript-and-manifest-v3/

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥1🙏1

1.26K viewsedited 06:27

0:14

Color palette inspiration
🔴 🟠 🟡 🟢 🔵 🟣

Curated color palette ideas displayed in an example website.

Have a play 👇
http://www.happyhues.co

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2🙏1

1.31K viewsedited 13:41

JavaScript array methods

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤8🙏1

1.25K viewsedited 07:09

Light/Dark Toggle With Morphing Icon

Theme switcher. Implemented using CSS.

⤷Get code

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2🔥1🙏1

941 viewsedited 08:36

You can make the UI cleaner by reducing or removing scrollbars using the scrollbar-width property

Example of a thin scrollbar:

ul {
  scrollbar-width: thin;
}

Example of a hidden scrollbar (the area remains scrollable):

.cards-container {
  scrollbar-width: none;
}

Suitable for sidebars, data tables, chat panels, dashboards with lots of scrolls, carousels, touch interfaces.

As a result, the scroll works, but the UI looks neater

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1👍1🙏1

695 views08:46

0:58

3D Cards | HTML CSS

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤4🙏1

490 views16:19

Making smooth scrolling to elements using the scrollIntoView method

JS:

const links = document.querySelectorAll('.link');

links.forEach((item) => {
 item.addEventListener('click', (e) => {
  e.preventDefault();

  let id = item.getAttribute('href');
  let formattierID = id.substring(1);
  let section = document.getElementById(formattierID);

  section.scrollIntoView({
   behavior: 'smooth',
  });
 });
});

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1

464 viewsedited 08:02