آموزش توسعه وب فرانت اند برای مبتدیان

Frontend Web Development for Beginners

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: ساخت پروژه های کوچک ساخت پروژه های کوچک درک نحو اولیه CSS نوشتن چند خط کد برای دستیابی به اطلاعات بیشتر آشنایی با HTML و CSS ساخت یک پخش کننده صوتی اولیه Form Validation Card Card Video Card پیش نیازها:Browser Internet VS Code علاقه به یادگیری چیزهای جدید این دوره برای چه افراد است:معلمانان مبتدی علاقه مند به وب

زبان های وب را بیاموزید. HTML (زبان قالب‌بندی) و CSS به روش‌های مختلف جالب و هوشمندانه برای داشتن بینش اولیه قوی در مورد توسعه وب‌سایت. قالب‌بندی یک صفحه وب را با استفاده از برچسب‌های زبان نشانه‌گذاری فرامتن (HTLM) یاد می‌گیریم و با استفاده از قوانین Cascading Style Sheet (CSS) به محتوای یک صفحه وب سبک اضافه می‌کنیم. این دوره عمیقاً به ویژگی‌های CSS و HTML خاصی نمی‌پردازد، اما این دوره بر بسیاری از برچسب‌های اساسی یا رایجی تمرکز می‌کند که بیشتر در سفر خود به عنوان یک توسعه‌دهنده وب‌سایت با آن‌ها مواجه خواهید شد. برچسب‌ها و ویژگی‌های رایج زبان نشانه‌گذاری فرامتن و برگه سبک آبشاری برای کج کردن، پررنگ کردن، زیرخط، درج ویدیوها (محلی و آنلاین)، درج تصاویر، و یادگیری پیوند دادن صفحات وب خود به صورت محلی یا به یک صفحه آنلاین، پیوند دادن به یک صفحه استفاده می‌شوند. سرویس ایمیل و موارد مشابه اگر فراگیران واقعاً به غیر از کپی کردن یا گذراندن دوره به عنوان دوره پاپ کورن (دیدن دوره و عدم کسب تجربه عملی) همراه با مربی تمرین کنند، کمک بزرگی خواهد بود. همچنین، فراگیران باید به دنبال پروژه‌های کوچک مرتبط با دوره باشند که در واقع می‌توانند با آن‌ها تمرین کنند تا پروژه‌های کوچکی داشته باشند که بعداً بتوانند بر اساس آن‌ها کار کنند.


سرفصل ها و درس ها

مقدمه Introduction

  • مقدمه Introduction

  • مقدمه ای بر وب Introduction to the Web

  • نقل قول ها Quotes

مقدمه ای بر ویرایشگرهای متن Introduction to Text Editors

  • ویرایشگرهای متن Text Editors

  • نصب کد VS Installing VS code

مقدمه ای بر HTML Introduction To HTML

  • ساختار سند HTML HTML Document Structure

  • آماده سازی فایل ها 1 Preparing Files 1

  • آماده سازی فایل ها 2 Preparing Files 2

  • نظر دادن Commenting

  • نقل قول ها Quotes

  • شروع کار با HTML Getting started with HTML

درج تصاویر Inserting Images

  • درج تصاویر محلی Inserting Local Images

  • درج تصاویر آنلاین Inserting online Images

  • میانبرها Shortcuts

  • تگ های سرفصل Heading Tags

درج فیلم ها Inserting Videos

  • درج فیلم ها Inserting Videos

  • برچسب های رایج Common Tags

لیست ها Lists

  • لیست های مرتب و نامرتب Ordered and Unordered lists

  • بیشتر در لیست ها More on lists

پیمایش های صفحه Page Navigations

  • پیمایش صفحه page Navigation

  • پیوند دادن ایمیل Linking Email

  • باز کردن لینک های خارجی Opening external links

  • نقل قول ها Quotes

مقدمه ای بر CSS Introduction to CSS

  • شروع کار با CSS Getting Started with CSS

  • برچسب سبک CSS CSS Style Tag

  • سبک درون خطی CSS CSS Inline style

  • نقل قول ها Quotes

انتخابگرهای CSS CSS Selectors

  • انتخابگر گروه بندی CSS CSS Grouping Selector

  • CSS ID Selector-Pound علامت CSS ID Selector-Pound sign

  • انتخابگر کلاس CSS CSS Class Selector

مقدمه ای بر CSS 2 Introduction to CSS 2

  • درج تصویر پس زمینه Inserting Background Image

  • حاشیه و بالشتک Margin and Padding

  • رنگ های CSS CSS Colors

  • نظر دادن CSS CSS Commenting

  • سبک قلم CSS CSS Font Styling

CSS Flex CSS Flex

  • مقدمه ای بر CSS Flex Introduction to CSS Flex

  • دارای کد شبه کد هوشمند Has Pseudo Class-Code Smarter

  • خواندن-MDN Read-MDN

متن گرادیان Gradient Text

  • متن گرادیان Gradient Text

وب سایت ساده Simple Website

  • شروع به کار - سرور زنده Getting Started-Live Server

  • ماژول 1-سربرگ Module 1-Header

  • ماژول 2-Styling Header Module 2-Styling Header

  • ماژول 3-دکمه استایل Module 3-Styling Button

  • ماژول 4-بخش Module 4-Sections

  • ماژول 5-بخش Module 5-Sections

  • ماژول 6-Divs Module 6-Divs

  • ماژول استایل 7 پا Module 7-footer Styling

  • نقل قول ها Quotes

صفحه وب Frontend -Prediction AI Frontend -Prediction AI Webpage

  • صفحه وب پیش بینی ماژول-1 Module-1 Prediction Webpage

  • ماژول-2 پیش بینی یک ظاهر طراحی صفحه وب Module-2 Prediction Webpage Styling

  • ماژول 3 پیش بینی یک ظاهر طراحی صفحه وب Module-3 Prediction Webpage Styling

  • ماژول-4 مدل‌سازی صفحه وب پیش‌بینی Module-4 Prediction Webpage Styling

  • ماژول 5 پیش بینی یک ظاهر طراحی صفحه وب Module-5 Prediction Webpage Styling

  • نقل قول ها Quotes

صفحه وب رتبه بندی مشتریان Customer Rating Webpage

  • ماژول 1-رده بندی ساختار سند رابط کاربری Module 1-Rating UI Document Structure

  • رابط کاربری ماژول 2-Styling Rating Module 2-Styling Rating UI

  • رابط کاربری ماژول 3-Styling Rating Module 3-Styling Rating UI

  • رابط کاربری ماژول 4-Styling Rating Module 4-Styling Rating UI

  • نقل قول ها Quotes

کارت کد QR QR Code Card

  • ماژول 1-ساختار سند- کد QR Module 1-Document Structure- QR code

  • ماژول 2-Styling- کد QR Module 2-Styling- QR code

  • ماژول 3-استایلینگ کارت- کد QR Module 3-Card Styling- QR code

  • ماژول 4-استایل کردن متن کارت- کد QR Module 4-Card Text Styling- QR code

  • نقل قول ها Quotes

صفحه وب داشبورد مالی Financial Dashboard Webpage

  • ماژول-1 ساختار HTML-داشبورد مالی Module-1 HTML Structure-Financial Dashboard

  • داشبورد مالی ماژول-2 استایلینگ Module-2 Styling Financial Dashboard

  • داشبورد مالی بخش مدل‌سازی ماژول-3 Module-3 Section Styling Financial Dashboard

  • ماژول-4 داشبورد مالی یک ظاهر طراحی کانتینر Module-4 Container Styling Financial Dashboard

  • ماژول-5 طرح افقی کانتینر FD Module-5 Horizontal Rule Container Styling FD

  • ماژول-6 FD استایل کردن متن پایین Module-6 Bottom Text Styling FD

  • نقل قول ها Quotes

جستجوی وب سایت-Frontend Search Webpage-Frontend

  • ماژول 1-ساختار HTML UI جستجو Module 1-Search UI HTML Structure

  • ماژول 2-Search UI Body Styling Module 2-Search UI Body Styling

  • ماژول 3-Search UI text Styling Module 3-Search UI text Styling

  • ماژول 4-Search UI Input Field Styling Module 4-Search UI Input Field Styling

  • نقل قول ها Quotes

پیش نمایش محصول Product Preview

  • HTML-ساختار سند-1 HTML-Document Structure-1

  • HTML-ساختار سند-2 HTML-Document Structure-2

  • عناصر یک ظاهر طراحی و تراز Styling-Aligning Elements

  • استایل-دکمه Styling-Button

  • عناصر یک ظاهر طراحی شده-مرکز Styling-Centering Elements

  • Styling-h4 Elements Styling-h4 Elements

  • یک ظاهر طراحی دکمه با نماد Styling-Button with Icon

  • استایل-متن Styling-Text

  • نقل قول ها Quotes

جزء کارت گرافیک Video Card Component

  • کامپوننت کارت گرافیک - ساختار HTML Video Card Component-HTML Structure

  • یک ظاهر طراحی بدنه و ظرف Styling-Body Iframe and container

  • استایل-دکمه Styling-Button

  • ظرف حالت دهی Styling-Positioning Container

  • استایل-متن Styling-Text

  • استایل-ادامه متن Styling-Text continuation

  • نقل قول ها Quotes

با تشکر از شما جزء کارت Thank you Card Component

  • ساختار سند HTML 1 HTML Document Structure 1

  • ساختار سند HTML 2 HTML Document Structure 2

  • یک ظاهر طراحی شده-بدن Styling-Body

  • یک ظاهر طراحی شده-تصویر و ظرف Styling-Image and Container

  • استایل-متن Styling-Text

  • Styling-Exit Button Styling-Exit Button

  • یک ظاهر طراحی دکمه با آیکون Styling-Buttons with Icons

  • نقل قول ها Quotes

رابط کاربری کارت جشن Celebration Card UI

  • ساختار سند HTML 1 HTML Document Structure 1

  • ساختار سند HTML 2 HTML Document Structure 2

  • یک ظاهر طراحی ظرف 1 Container Styling 1

  • طراحی ظرف 2 Container Styling 2

  • قالب بندی کانتینر-متن 3 Container-Text Styling 3

  • یک ظاهر طراحی ظروف-دکمه Container-Button Styling

UI فرم ها Forms UI

  • Form Validation-HTML Document Structure-1 Form Validation-HTML Document Structure-1

  • اعتبار سنجی فرم-ساختار سند HTML-2 Form Validation-HTML Document Structure-2

  • اعتبار سنجی فرم-ساختار سند HTML-3 Form Validation-HTML Document Structure-3

  • استایل اعتبار سنجی فرم-1 Form Validation Styling-1

  • استایل اعتبار سنجی فرم-2 Form Validation Styling-2

  • استایل اعتبار سنجی فرم-3 Form Validation Styling-3

پخش کننده صوتی Audio Player

  • ساختار سند HTML HTML Document Structure

  • استایل پخش کننده صوتی-1 Audio Player Styling-1

  • استایل پخش کننده صوتی-2 Audio Player Styling-2

  • پخش کننده صوتی Styling-3 Audio Player Styling-3

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش توسعه وب فرانت اند برای مبتدیان
جزییات دوره
9.5 hours
116
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
5,027
4.8 از 5
دارد
دارد
دارد
Franklyn Fosu
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Franklyn Fosu Franklyn Fosu

هنرمند || کارشناس فناوری اطلاعات || توسعه دهنده وردپرس من Franklyn Fosu هستم، من یک توسعه دهنده وب وردپرس، یک هنرمند (CorelDraw و Adobe Illustrator) و یک متخصص فناوری اطلاعات هستم. من عاشق هنر و سرهم کردن با کامپیوتر هستم. به اطراف خود نگاه کنید و متوجه خواهید شد که زندگی چقدر زیبا است، از کلمات، گفتگوهای روزانه و نحوه تعامل مردم با یکدیگر. اینها وسواس من برای خلق چیزهایی است که در اطرافم مشاهده می کنم.