با سلام . توی این کانال آموزش های HTML CSS و JS قرار خواهد گرفت

چند نکته :

🔹آموزش هایی که قرار داده میشه از 0 نخواهد بود و سطحش از مبتدی بالاتره ولی سعی میشه دستوراتی که مبهمه رو کامل توضیح بدیم (البته بعضی از ویدیو ها ممکنه مقدماتی باشه)
🔹 ممکن هست یک مینی پروژه رو چندین بار آموزش بدیم اما به روش ها مختلف و ممکنه بعضی از آموزش ها رو از دوره های دیگه براتون قرار بدیم پس نترسید و نگاه کنید
🔹 یادتون نره که این کانال فقط برای افزایش تسلط شما به HTML CSS و Js ساخته شده لذا افرادی که خیلی مبتدین نترسن و آموزش هارو نگاه کنن و تمرین کنن تا یادبگیرن


♦️اگر از دوستان کسی تدریس رو دوست داشت و میخواد به کسی چیزی یاد بده با ایدی زیر تماس داشته باشه تا آموزش های اونم در کانال قرار بگیره.

🆔 @maryam3771

:where(header, main, footer) p:hover {
    color: red;
    cursor: pointer;
}

قبلا به این شکل انجام میدادیم

header p:hover,
main p:hover,
footer p:hover {
    color: red;
    cursor: pointer;
}

خب دوستان توی css دو تا روش جدید معرفی شده که میتونید باشون چندتا المنت رو انتخاب کنید

اون توابع ()where: و ()is: هستن

- با این توابع می‌تونیم به صورت گروهی و یکجا چندین المنت رو انتخاب کنیم. کاری که قبلاً امکان‌پذیر نبود و باید المنت‌ها رو تک تک انتخاب می‌کردیم

- این ۲ تابع کارایی مشابهی دارن. اما باید بدونیم که المنت‌هایی که با where انتخاب می‌کنیم، پایین‌ترین میزان Specificity رو دارن. اما Specificity توی is بستگی به المنت‌هایی داره که انتخاب می‌کنیم

- این دو تابع نسبتاً جدید هستن و بنابراین پشتیبانی مرورگرها اهمیت داره:
https://developer.mozilla.org/en-US/docs/Web/CSS/:where


اینکه حالا Specificity چیه رو خدمتون در پست های بعدی میگم



#css

ID Channel : @htmlcss_channels

با کلیک کردن، رنگ پس زمینه را تغییر دهید

این کد صفحه ای ایجاد می کند که با کلیک کردن یا بارگذاری صفحه، رنگ پس زمینه را تغییر می دهد. هر کلیک یک رنگ تصادفی جدید در قالب HEX ایجاد می کند:

body {
    transition: background-color 0.5s ease;
    margin: 0;
    height: 100vh;
}

function changeBackground() {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = randomColor;
}
document.body.addEventListener('click', changeBackground);

🆔 @htmlcss_channels

✅ ‌یه سایت خیلی خفن برای ساخت اسکرول بار های شخصی سازی شده برای خودتون

🔥 در اخر بهتون کد css میده که میتونید توی سایتتون ازش استفاده کنید

🌐 https://scrollbar.app


💎 Channel: @htmlcss_channels

Circle Animation | HTML CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

🌐 unocss.dev : The instant on-demand Atomic CSS engine

یه فریمورک css مشابه Tailwind هستش ، اما با فیچر های خفن تر ، اگه قبلاً با Tailwind کار کردید شدیداً پیشنهاد می‌کنم تستش کنید

https://github.com/unocss/unocss



💎 Channel: @htmlcss_channels

Buttons | HTML CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

Frontend Mentor

پلتفرمی است که توسعه دهندگان می توانند چالش های کدنویسی را انجام دهند و پروژه های دنیای واقعی بسازند. چالش‌ها برای آزمایش مهارت‌های شما و کمک به شما در بهبود توانایی‌های حل مسئله طراحی شده‌اند. Frontend Mentor یک راه عالی برای تمرین مهارت‌های توسعه frontend و ایجاد مجموعه‌ای از پروژه‌ها است.

Frontend Mentor


با ری اکشن بهمون نشون بدید چه مطالبی براتون مفیده از این پستها بیشتر بذاریم❤️

💎 Channel: @htmlcss_channels

طراحی وب سایت جستجوی فیلم با استفاده از HTML، CSS و جاوا اسکریپت

ابتدا یک هدر با تگ فرم ایجاد می کنیم. در تگ فرم، یک متن ورودی برای نوار جستجو  وب سایت فیلم ایجاد می کنیم. سپس یک تگ اصلی ایجاد می کنیم، بنابراین وقتی همه فیلم ها توسط API بارگذاری می شوند، تمام محتوا را در تگ اصلی نشان می دهیم و در انتهای کد، یک فایل جاوا اسکریپت را پیوند می دهیم.

اول از همه، ما برخی از خانواده های فونت را با استفاده از URL فونت گوگل وارد می کنیم و سپس حاشیه را روی "صفر" قرار می دهیم. همچنین، با استفاده از ویژگی background-color، رنگ پس‌زمینه را روی «صورتی تیره» قرار می‌دهیم ، فونتی که استفاده کردیم poppins است.
استایل را به هدر وب سایت اضافه می کنیم. با استفاده از انتخابگر تگ هدر، پس‌زمینه هدر را روی آبی قرار می‌دهیم ، padding را روی 1rem و نوع نمایش را روی «فلکس» تنظیم می‌کنیم.

با استفاده از انتخابگر کلاس (search.) استایل را به نوار جستجوی سایت اضافه می کنیم. padding را روی 0.5 rem قرار می دهیم و با استفاده از ویژگی border-radius چند لبه منحنی اضافه می کنیم.

🗂 دریافت کدها در پست بعدی

💎 Channel: @htmlcss_channels

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Movie Search</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<header>

<form id="form">

<input type="text" autocomplete="off" id="search" placeholder="Search" class="search">

</form>

</header>

<main id="main">

</main>

<!-- js here -->

<script src="app.js"></script>

</body>

</html>

ممنون که با ری اکشن هاتون بهمون انگیزه می دید ❤️

💎 Channel: @htmlcss_channels

@import url('https://fonts.googleapis.com/css2?family=Poppin
*{

box-sizing: border-box;

}

body{

margin: 0;

background-color: #cd094e;

font-family: "Poppins", sans-serif;

}

header{

background-color: #0615de;

padding: 1rem;

display: flex;

justify-content: flex-end;

}

.search {

padding: 0.5rem 1rem;

border-radius: 50px;

border: 2px solid #22254b;

background-color: transparent;

font-family: inherit;

color: #eee;

font-size: 1rem;

}

.search::placeholder{

color: #afb2dc;

}

.search:focus{

outline: none;

background-color: #05082c;

}

main{

display: flex;

flex-wrap: wrap;

}

/* ye baad me dekhte hai */

.movie{

box-shadow: 0 4px 5px rgba(0,0,0,0.2);

border-radius: 3px;

width: 300px;

background-color: #0d1dd2;

margin: 1rem;

overflow: hidden;

position: relative;

}

.movie img{

width: 100%;

}

.movie-info{

display: flex;

justify-content: space-between;

padding: 0.5rem 1rem 1rem;

color: #eee;

letter-spacing: 0.5px;

align-items: center;

}

.movie-info h3{

margin: 0;

}

.movie-info span{

background-color: #22254b;

padding: 0.25rem 0.5rem;

border-radius: 3px;

font-weight: bold;

}
movie-info span.green{
color: rgb(46, 194, 46);
}
.movie-info span.orange{
color: orange;
}
.movie-info span.red{
color: red;
}
.overview{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #fff;
padding: 2rem;
transform: translateY(100%);
transition: transform 1s ease-in;
max-width: 100%;
overflow: auto;
}
.movie:hover .overview{
transform: translateY(0);
}
.overview h4{
margin-top: 0;
}

با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

JavaScript Code For Movie Website:-

const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";

const IMGPATH = "https://image.tmdb.org/t/p/w1280";

const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

// ye HTML WALE TAG

const main = document.getElementById("main");

const form = document.getElementById("form");

const search = document.getElementById("search");

///initalyy get fav movies

getMovies(APIURL);

async function getMovies(url) {

const resp = await fetch(url);

const respData = await resp.json();

// movie aa gyi

console.log(respData);

// yaha pe show karenge

showMovies(respData.results);

}

function showMovies(movies) {

//clear main

main.innerHTML = "";

movies.forEach((movie) => {

const { poster_path, title, vote_average, overview } = movie;

// raja

const movieEl = document.createElement("div");

movieEl.classList.add("movie");

movieEl.innerHTML = 

<img src="${IMGPATH + poster_path}" alt="${title}"/>

<div class="movie-info">

<h3>${title}</h3>

<span class="${getClassByRate(vote_average)}">${vote_average}</span>

</div> 

<div class="overview">

<h2>Overview:</h2>

${overview}

</div>

;

main.appendChild(movieEl)

});

}

function getClassByRate(vote) {
return 'green';

} else if (vote >= 5) {

return 'orange'

} else {

return 'red';

}

}

form.addEventListener("submit", (e) => {

e.preventDefault();

const searchTerm = search.value;

if (searchTerm) {

getMovies(SEARCHAPI + searchTerm);

search.value = "";

}

});

با ری اکشن بهمون انرژی بدید❤️


💎 Channel: @htmlcss_channels

Whatsapp Logo | HTML CSS


اگه این پست برای شما مفید بوده با لایک و ری اکشن بهمون انرژی بدید ❤️

💎 Channel: @htmlcss_channels

body {
    margin: 0;
    padding: 0;
    background: lightblue;
}

div {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #3AC371;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.white {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}


.white::before {
    content: "";
    top: 65px;
    left: -15px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    transform: rotate(-50deg) rotateX(-55deg);
}

.white::after {
    content: "";
    top: 63px;
    left: -4px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #3AC371 transparent transparent;
    position: absolute;
    transform: rotate(-51deg) rotateX(-50deg);
}

.fas {
    left: 17px;
    top: 18px;
    position: absolute;
    font-size: 35px;
    color: #fff;
    transform: rotate(90deg);
}

با ری اکشن بهمون انرژی بدید❤️


💎 Channel: @htmlcss_channels

Smoke | HTML CSS



با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

HTML & CSS


با ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels