یک صفحه فرود متحرک با HTML، CSS و جاوا اسکریپت ایجاد کنید
Create An Animated Landing Page by HTML, CSS and JavaScript
سلام، به دوره ای که توسط HTML، CSS، JavaScript ایجاد شده است خوش آمدید!
ساخت وب‌سایت به شما امکان می‌دهد کارهای سرگرم‌کننده و خلاقانه‌ای را از هر کجای دنیا انجام دهید، و حتی درآمد خوبی هم دارد. توسعه وب یکی از آینده سازترین و پردرآمدترین صنایع در جهان است. و HTML و CSS نقطه ورود به این جهان است!
اگر علاقه مند به توسعه front-end هستید، دیگر به دنبال آن نباشید. این دوره کاملاً مبتدی است که کاملاً پاسخگوی تلفن همراه است.
مزیت این دوره این است که کاملاً مبتنی بر پروژه است و من از آواتار خود برای توصیف واضح همه چیز استفاده می کنم. این درس را کاملا قابل درک می کند.
این سخنرانی به سه بخش تقسیم می شود. ما با کاوش در HTML5 شروع می کنیم، دانش آموزان ترکیب یک صفحه وب و نحوه تفسیر یک مرورگر وب کد html را برای نمایش عناصر بصری یک صفحه می آموزند.
بخش HTML مفاهیم کلیدی زیر را پوشش می دهد:
ساختار HTML
نمای کلی از HTML5
استفاده از برچسب تقسیم
ایجاد لیست های نامرتب مرتب
درج تصاویر
ایجاد برچسب پیوندها
در حال درج بخش
استفاده از ویژگی ها
+ خیلی بیشتر
در اینجا، دانش‌آموزان یاد می‌گیرند که عناصر طراحی خیره‌کننده را اضافه کنند تا واقعاً صفحات وب را از نظر زیبایی بصری جلوه دهند. همچنین ویژگی‌ها و ویژگی‌های CSS را برای افزودن سبک به اسناد وب پوشش می‌دهیم و صفحات وب را کاملاً پاسخگو برای موبایل می‌کنیم.
بخش CSS این دوره مفاهیم کلیدی زیر را پوشش می دهد:
قوانین CSS
کلاس CSS
بخش ها
شناسه CSS
مدل جعبه
ویژگی های قلم
پس زمینه
موقعیت یابی
سبک‌سازی پیوند
پویانمایی CSS
نمایش انعطاف پذیر
انتقال
+ خیلی بیشتر
در بخش آخر این دوره، دانش آموزان به افزودن قابلیت های تعاملی سمت کلاینت با استفاده از جاوا اسکریپت خواهند پرداخت. جاوا اسکریپت یک زبان برنامه نویسی فوق العاده قدرتمند است که واقعاً می تواند به ارتقاء صفحات وب به سطح دیگری کمک کند. این بخش به دانش‌آموزان آموزش می‌دهد که چگونه تصاویر و اشیاء را متحرک کنند و عناصر HTML و CSS را با استفاده از DOM (مدل شیء سند) دستکاری کنند.
بخش جاوا اسکریپت مفاهیم کلیدی زیر را پوشش می دهد:
خروجی جاوا اسکریپت
اعلامیه های متغیر
اشیاء
رشته ها
روش ها
گزاره های مشروط
عملکردها و رویدادها
کتابخانه jQuery
+ خیلی بیشتر
برای توضیح هر محتوایی که من و آواتارم آموزش می‌دهیم، وقت صرف می‌کنیم تا شما در واقع جزئیات را یاد بگیرید. در پایان این دوره، نحوه کدنویسی را یاد خواهید گرفت و آماده ساخت هر صفحه وب عالی که می خواهید هستید.
پس منتظر چه چیزی هستید؟ برنامه درسی کامل را بررسی کنید، در این سفر به من بپیوندید و در این دوره ثبت نام کنید. من در هر مرحله در کنار شما خواهم بود.
مقدمه ای بر توسعه وب Introduction to Web Development
-
چرا باید توسعه وب را یاد بگیرید؟ Why you should learn web development?
HTML HTML
-
ساختار HTML HTML Structure
CSS CSS
-
ساختار CSS CSS Structure
جاوا اسکریپت JavaScript
-
ساختار جاوا اسکریپت JavaScript Structure
مقدمه ای بر VSCode Introduction to VSCode
-
آشنایی با کد ویژوال استودیو (VSCode) Introduction to Visual Studio Code (VSCode)
طراحی وب Web Design
-
مقدمه ای بر Figma Introduction to Figma
مروری بر HTML5 An Overview of HTML5
-
مروری بر ساختار HTML5 An Overview of HTML5 structure
پروژه صفحه فرود Landing Page Project
-
هدر HTML HTML Header
-
قسمت 1 هدر CSS (مهم!) CSS Header part 1 (important!)
-
قسمت 2 سربرگ CSS (مهم!) CSS Header part 2 (important!)
-
منوی فرعی SubMenu
-
لغزنده Sliders
-
جاوا اسکریپت قسمت 1 JavaScript part 1
-
جاوا اسکریپت قسمت 2 JavaScript part 2
-
طراحی واکنشگرا قسمت 1 Responsive Design part 1
-
طراحی ریسپانسیو قسمت 2 Responsive Design part 2
تمرین 1 (کادر جستجوی مدرن با HTML و CSS) Exercise 1 (Modern search box by HTML and CSS)
-
تمرین جعبه جستجو Search box exercise
-
کادر جستجو (تمرین-1) Search box (Exercise-1)
تمرین 2 (رنگین کمان متحرک روی متن توسط HTML، CSS و جاوا اسکریپت) Exercise 2 (Animated Rainbow on text by HTML, CSS and JavaScript)
-
تمرین رنگین کمان روی متن Rainbow on text exercise
-
رنگین کمان روی متن (تمرین 2) Rainbow on text (Exercise-2)
تست تمرین Practice Test
-
تست تمرین Practice Test
قسمت پایانی Final part
-
کد منبع پروژه صفحه فرود Landing Page project Source code
-
سخنرانی پاداش Bonus Lecture
https://donyad.com/d/26fa60
نمایش نظرات