html and css آموزش

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2

2.38K viewsedited 08:45

🟢

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

Motion 👉 http://60fps.design

Patterns 👉 http://catalogue.projectsbyif.com

AB Tests 👉 http://abtest.design

Inspiration 👉http://designspells.com

Breakdowns 👉 http://uxsnaps.com

UI components 👉 http://uiplaybook.dev

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2

2.05K 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.5K 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: your@email.com</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

❤2🔥1

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

❤4🔥1

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

❤4

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

1.57K viewsedited 06:29

0:34

❇️Creative Glowing Loader | CSS Animation

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2

1.4K viewsedited 07:08

⏩

CSS Generators to save you hours of work:

1. Blob maker
http://blobmaker.app

2. Getwaves
http://getwaves.io

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

4. Gradient generator
http://cssgradient.io

5. Glassmorphism
http://glassmorphism.com

6. Neumorphism
http://neumorphism.io

7. Pattern generator
http://patternify.com

8. css3 generator
http://css3generator.com

9. Clip Path Maker
http://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.

❤2

1.7K viewsedited 12:47

1:00

➡️Racing Car | HTML CSS JavaScript

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤8

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

1.74K 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.

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1🙏1

2.14K viewsedited 09:24

0:59

Dots in Circle | HTML CSS JavaScript

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2

1.99K viewsedited 09:45

0:21

💡با این ابزار هر مدل چیدمان‌ CSS Grid را بدون یک خط کد بسازید

ردیف‌ها، ستون‌ها، فاصله‌ها رو تنظیم می‌کنی و در لحظه کد آماده CSS رو برمی‌داری و استفاده می‌کنی.

https://cssgridgenerator.io/

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤5🔥1🙏1

1.66K viewsedited 16:33

0:09

Social media card

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3🔥1

1.5K viewsedited 06:32

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.

💎 @Htmlcss_channels | #css #JavaScript #HTML

❤4🔥1

1.31K views11:45

🎮 CSS Hell: 15 challenging CSS puzzles

Test your CSS skills with 15 tricky puzzles where you need to align pegs with their corresponding holes by adding the right CSS properties to divs. Each puzzle presents a visual challenge that requires creative use of CSS to solve.

👉Think you know CSS? This game will put your skills to the test with increasingly difficult challenges that will make you think outside the box.

Try it out and see how many puzzles you can solve!

https://csshell.com/

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3

817 viewsedited 17:31

◀️ابزارهای آنلاین CSS

ساختن وب‌سایت‌های زیبا لازم نیست کار سختی باشه این ابزارهای آنلاین CSS آنلاین کار توسعه‌دهندگان را راحت می‌کنه

💎

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2🔥2

812 viewsedited 11:20

0:08

🔰 Container queries in CSS

If you have not tried out container queries yet, would highly recommend that you do

This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page.

👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container

👉 Some other examples include, when you want to style an individual card based on its size

💎 @Htmlcss_channels | #css #JavaScript #HTML

❤3

846 views07:18

Rotating 3D Slider

The logic of the slider is implemented in JS. Stylized and animated in SCSS.

👉

code

💎