html and css آموزش

Please open Telegram to view this post

VIEW IN TELEGRAM

❤5🙏1

1.64K 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

❤2

1.53K viewsedited 08:02

0:07

Shoe Swap

The logic for switching slides is implemented in JS. Animated in SCSS.

Code

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3

1.7K views15:04

⭐️

15 افزونه مفید کروم برای توسعه‌دهندگان وبسایت

ابزارهای موجود در این مقاله به ساده‌سازی و سرعت بخشیدن به فرآیند توسعه و آزمایش front-end کمک می‌کنند.

- از استخراج سبک های CSS از وب سایت ها گرفته تا تجزیه و تحلیل و بهینه سازی SEO.

https://proglib.io/p/15-superpoleznyh-plaginov-chrome-v-pomoshch-frontenderu-2024-09-20

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1

1.83K views07:12

0:58

Infinite Loop | HTML CSS

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤8

1.85K views06:55

Custom Scrollbar in CSS

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤6

2.05K viewsedited 07:14

0:58

CSS Toggle Switch | HTML CSS JavaScript

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2

2.04K viewsedited 08:45

🟢

از این وبسایت ها می تونید UI design را رایگان یاد بگیرید

Motion 👉 https://60fps.design

Patterns 👉 https://catalogue.projectsbyif.com

AB Tests 👉 https://abtest.design

Inspiration 👉https://designspells.com

Breakdowns 👉 https://uxsnaps.com

UI components 👉 https://uiplaybook.dev

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1

1.56K viewsedited 06:40

0:06

SVG Animation

This is an SVG image animated in SCSS

👉 code

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤4

1.15K viewsedited 11:24

👉

How to Build a Personal Portfolio Website

This project shows your skills, boosts your resume, and helps you stand out. Follow these steps:

✅

Setup Your Environment
• Install VS Code
• Create a folder named portfolio
• Add index.html, style.css, and script.js

✅

Create the HTML Structure (index.html)

html
<!DOCTYPE html>
<html>
<head>
  <title>Your Name</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <section id="about">
    <h2>About Me</h2>
    <p>Short intro, skills, and goals</p>
  </section>

  <section id="projects">
    <h2>Projects</h2>
    <div class="project">Project 1</div>
    <div class="project">Project 2</div>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Email: [email protected]</p>
  </section>

  <footer>© 2025 Your Name</footer>
</body>
</html>

✅

Add CSS Styling (style.css)

css
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
}

header {
  background: #222;
  color: white;
  padding: 1rem;
  text-align: center;
}

nav a {
  margin: 0 1rem;
  color: white;
  text-decoration: none;
}

section {
  padding: 2rem;
}

.project {
  background: white;
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

footer {
  text-align: center;
  padding: 1rem;
  background: #eee;
}

✅

Add Interactivity (Optional - script.js)
• Add smooth scroll, dark mode toggle, or animations if needed

✅

Host Your Site
• Push code to GitHub
• Deploy with Netlify or Vercel (connect repo, click deploy)

✅

Bonus Improvements
• Make it mobile responsive (media queries)
• Add a profile photo and social links
• Use icons (Font Awesome)

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1🔥1

851 viewsedited 13:04

🤔

Advanced Front-End Development Skills

🔹

1. Responsive Design
Why: Your website should look great on mobile, tablet, and desktop.
Learn:
⦁ Media Queries
⦁ Flexbox
⦁ CSS Grid

Example (Flexbox Layout):

 {
  display: flex;
  justify-content: space-between;
}

Example (Media Query):

@media (max-width: 600px) {.container {
    flex-direction: column;
  }
}

🔹

2. CSS Frameworks
Why: Pre-built styles save time and help maintain consistency.

Bootstrap Example:

<button class="btn btn-success">Subscribe</button>

Tailwind CSS Example:

<button class="bg-green-500 text-white px-4 py-2 rounded">Subscribe</button>

🔹

3. JavaScript Libraries (jQuery Basics)
Why: Simplifies DOM manipulation and AJAX requests (still useful in legacy projects).

Example (Hide Element):

<button id="btn">Hide</button>
<p id="text">Hello World</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $("#btn").click(function() {
    $("#text").hide();
  });
</script>

🔹

4. Form Validation with JavaScript
Why: Ensure users enter correct data before submission.

Example:

<form onsubmit="return validateForm()">
  <input type="email" id="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

<script>
function validateForm() {
  const email = document.getElementById("email").value;
  if (email === "") {
    alert("Email is required");
    return false;
  }
}
</script>

🔹

5. Dynamic DOM Manipulation
Why: Add interactivity (like toggling dark mode, modals, menus).

Dark Mode Example:

<button onclick="toggleTheme()">Toggle Dark Mode</button>

<script>
function toggleTheme() {
  document.body.classList.toggle("dark-mode");
}
</script>
<style>.dark-mode {
  background-color: #111;
  color: #fff;
}
</style>

🔹

6. Performance Optimization Tips
⦁ Compress images (use WebP)
⦁ Minify CSS/JS
⦁ Lazy load images
⦁ Use fewer fonts
⦁ Avoid blocking scripts in <head>

📌

Mini Project Ideas to Practice:
⦁ Responsive landing page (Bootstrap/Tailwind)
⦁ Toggle dark/light theme
⦁ Newsletter signup form with validation
⦁ Mobile menu toggle with JavaScript

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3

1.09K viewsedited 13:03

Javascript shorthands

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3

923 views13:04

0:06

➡️

Hover to reveal part of background image

As the mouse moves, JavaScript updates the position of the .magic element to center it relative to the cursor, and CSS provides styling and animation.

👉 code

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1

792 viewsedited 06:29

0:34

❇️Creative Glowing Loader | CSS Animation

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2

577 viewsedited 07:08

⏩

CSS Generators to save you hours of work:

1. Blob maker
https://blobmaker.app

2. Getwaves
https://getwaves.io

3. CSS Button Generator
https://markodenic.com/tools/buttons-…

4. Gradient generator
https://cssgradient.io

5. Glassmorphism
https://glassmorphism.com

6. Neumorphism
https://neumorphism.io

7. Pattern generator
https://patternify.com

8. css3 generator
https://css3generator.com

9. Clip Path Maker
https://bennettfeely.com/clippy

💎

Blobmaker - Make organic SVG shapes for your next design

Please open Telegram to view this post

VIEW IN TELEGRAM

www.blobmaker.app

Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.

❤1

718 viewsedited 12:47

1:00

➡️Racing Car | HTML CSS JavaScript

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤7

660 viewsedited 06:34

⏩The :empty pseudo-class in CSS is used to select elements that do not contain child elements or text content.

This pseudo-class is useful for styling elements that have no content within them.

➡️For example, you can use :empty to hide or change the style of elements that do not contain text or other content

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

🙏1

669 viewsedited 15:14

⭐️

Container Queries — a new way to make layouts responsive.

Before: @media rules reacted to screen width (e.g. under 768px → smaller font).
Problem: components behave differently in cards, sidebars, modals — viewport alone isn’t enough.

Container Queries let CSS adapt to a parent’s size, not the whole screen.

➡️

Example:

.card { container-type: inline-size; }

@container (max-width: 400px) {
  .card-title { font-size: 1rem; }
}

How it works
• Mark a container with container-type.
• Use @container to style elements inside it.
• Components adapt to parent width, no global media hacks.
• Cleaner CSS, fewer JS tweaks, local responsive behavior.

📌 Supported natively in modern browsers — truly component-based CSS.

💎