آموزش ملزومات طراحی وب پاسخگو - HTML5 CSS3 Bootstrap

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

شروع شدن Getting Started

• مقدمه ای بر دوره آموزشی ضروری طراحی وب سایت واکنش گرا Introduction to Responsive Web Design Essentials Course

• ساختار این دوره آموزشی طراحی وب چگونه است How is this web design course structured

• برای دوره طراحی وب چه چیزی دانلود کنیم What to download for the web design course

مقدمه ای بر HTML و CSS Introduction to HTML & CSS

• ایجاد و آزمایش اولین صفحه وب HTML ما Creating & testing our first HTML web page

• HTML5 و CSS3 در طراحی وب چیست؟ What is HTML5 & CSS3 in web design

• تگ head vs body در مقابل html در صفحه طراحی وب چیست؟ What is the head vs body vs html tag in a web design page

• عنوان و توضیحات در سر یک صفحه وب چیست؟ What is the title and description for in the head of a web page

• چه ویرایشگر کدی باید از VS Code Sublime Dreamweaver Atom Brackets استفاده کنم What code editor should I be using VS Code Sublime Dreamweaver Atom Brackets

• چگونه با استفاده از تگ های Div ساختار به وب سایت خود اضافه کنید How to add structure to your website using Div Tags

• کلاس CSS چیست چگونه یک پس زمینه را با آن رنگ آمیزی کنیم What is a CSS Class how do we color a background with it

• چگونه div ها را در داخل یکدیگر در HTML و CSS قرار دهیم How to nested divs inside of each other in HTML & CSS

• Class Project 01 – Div Tags Class Project 01 – Div Tags

• نحوه ایجاد یک شیوه نامه آبشاری جداگانه در HTML و CSS How to create a separate cascading style sheet in HTML & CSS

پروژه 1: وب سایت رستوران Project 1: Restaurant Website

• نحوه ایجاد یک html شاخص و css به سبک How to create an index html & style css

• وب سایت خود را به صورت زنده با استفاده از پسوند Visual Studio Code تست کنید Test your website live using a Visual Studio Code extension

• چگونه با استفاده از VS Code کد خود را برای وجود خطا در HTML بررسی کنیم How to check your code for errors in HTML using VS Code

• پاورقی اصلی مقاله هدر تگ HTML5 چیست What is HTML5 tag header nav section article main footer

• چگونه عناصر ساختار html5 را به وب سایت html خود اضافه کنیم How to add html5 structure elements to your html website

• نحوه رنگ آمیزی پس زمینه یک صفحه وب با استفاده از تگ body html How to color the background of a webpage using the body html tag

• نحوه اضافه کردن تصاویر به وب سایت با استفاده از HTML what is alt How to add an images to a website using HTML what is alt

• چگونه یک تصویر را در HTML با استفاده از CSS در مرکز قرار دهیم How to center an image img in HTML using CSS

• نحوه تغییر اندازه و رنگ فونت h1 p در HTML CSS How to change the font style size & color of h1 p in HTML CSS

• نحوه ساخت لینک قابل کلیک در html و تغییر رنگ How to make a clickable link in html & change the color

• چگونه یک تصویر پس زمینه کشیده به یک وب سایت اضافه کنیم How to add a stretching background image to a website

• چگونه یک تگ div را با استفاده از HTML و CSS در VS Code شفاف کنیم How make a div tag transparent using HTML & CSS in VS Code

• نحوه ایجاد یک ناوبری متن ساده وب سایت در HTML و CSS How to create a simple website text navigation in HTML & CSS

• نحوه استایل css به بیش از یک تگ کلاس در یک کلاس ترکیبی زمان How to css style more than one class tag at a time compound classes

• کلاس پروژه 02 – پاورقی Class Project 02 – Footer

• Class Project 02 - Footer CompLETE Class Project 02 - Footer COMPLETE

• چگونه با استفاده از mailto در HTML یک دکمه ایمیل ساده به یک وب سایت اضافه کنیم How to add a simple email button to a website using mailto in HTML

• چگونه با استفاده از کدهای جاسازی شده گوگل مپ را به وب سایت خود اضافه کنیم How to add Google Maps to your website using embed codes

• چگونه وب سایت خود را با دامنه خود در اینترنت به صورت زنده قرار دهید How to put your website live on the internet with your own domain

• نحوه اتصال Visual Studio VS Code از طریق sftp به میزبان bluehost How to connect Visual Studio VS Code via sftp to host bluehost

پروژه 2: وب سایت تعمیر دوچرخه Project 2: Bike Repair Website

• راه اندازی پروژه طراحی وب جدید ما و بحث در مورد موضوعات ما Setting up our new web design project & discussing our topics

• بازنشانی CSS صفر کردن اریک مایر در مقابل عادی سازی چیست؟ What is a CSS reset zeroing eric meyers vs normalize

• حداقل ارتفاع در مقایسه با ارتفاع برای تگ div چقدر است What is a min-height compared to height for a div tag

• گرفتن برچسب های div روی یک خط با استفاده از Flexbox در HTML و CSS Getting div tags onto one line using Flexbox in HTML & CSS

• با استفاده از flexbox بدون حاشیه بیرونی، بین تگ‌های div فاصله یکنواخت اضافه کنید Add even space between div tags using flexbox with no outside margins

• چگونه 2 تگ div با اندازه های مختلف در یک ردیف html css flexbox داشته باشیم How to have 2 div tags of different sizes in the same row html css flexbox

• چگونه محتوا را به صورت عمودی در یک تگ div html با استفاده از flexbox css مرکز کنیم How to vertically center content in a html div tag using flexbox css

• پروژه کلاس 3 - سربرگ Flexbox Class Project 3 - Flexbox Header

• پروژه کلاس 3 - سربرگ Flexbox کامل شد Class Project 3 - Flexbox Header COMPLETE

• نحوه ایجاد یک گرادیان پس زمینه کامل در CSS وب سایت How to make a full background gradient on a website CSS

• نحوه تغییر اندازه رنگ نوع فونت پیش فرض در وب سایت با استفاده از HTML و CSS How to change the default font type color size on a website using HTML & CSS

• نحوه انتخاب و نصب فونت های گوگل در وب سایت HTML CSS خود How to choose & install google fonts on your HTML CSS website

• تفاوت بین اندازه فونت PX و EM و REM چیست؟ What is the difference between PX & EM & REM font sizes

• فاصله ارتفاع خط بین پاراگراف ها به نام فاصله بعد Line height space between paragraphs aka space after

• چه زمانی از یک تصویر svg به جای jpg یا png در طراحی وب استفاده می کنید When would you use an svg image instead of jpg or png in web design

• نحوه صادرات svg png jpg از XD Photoshop Illustrator برای طراحی وب سایت How to export svg png jpg from XD Photoshop Illustrator for website design

• بلاک کردن تصاویر سطح آیات تصاویر پس زمینه در HTML و CSS Block level images verses background images in HTML & CSS

• کارت هایمان را تمام می کنیم Finishing up our cards

• چگونه با استفاده از فونت Awesome VS Code به وب سایت خود آیکون اضافه کنید How to add icons to your website using font awesome VS Code

• چگونه یک جعبه ظرف DIV کامل را به یک پیوند قابل کلیک تبدیل کنیم How to make an entire DIV container box a clickable link

• نحوه استفاده از جعبه حاشیه با اندازه جعبه از Flexbox در VS Code و طراحی وب How to use box-sizing border-box from Flexbox in VS Code & web design

• نحوه ساخت یک دکمه رنگی در VS Code با استفاده از HTML CSS How to make a colored button in VS Code using HTML CSS

• چرا من نمی توانم حاشیه یا بالشتک را به پایین بالای یک برچسب Inline vs block اضافه کنم Why cant I add margin or padding to the top bottom of my a tag Inline vs block

• نحوه اضافه کردن گوشه های گرد به یک دکمه یا تگ div در HTML و CSS How to add rounded corners to a button or div tag in HTML & CSS

• نحوه اضافه کردن یک سایه css به برچسب های div دکمه وب سایت و عنوان فونت های متن How to add a css drop shadow to a website button div tags and text fonts heading

• چگونه در حین ساختن از وب سایت خود نسخه پشتیبان تهیه کنید How to backup your website while you’re building

• استفاده مجدد از کلاس دکمه در مسیریابی Reusing a button class in the navigation

• کلاس پروژه 04 - دکمه سفارشی Class Project 04 - Custom Button

• کلاس پروژه 04 - دکمه سفارشی تکمیل شد Class Project 04 - Custom Button COMPLETE

• نحوه اضافه کردن یک قانون افقی با استفاده از HTML5 و CSS3 در VS Code How to add a horizontal rule using HTML5 & CSS3 in VS Code

• چگونه تگ‌های div را با استفاده از HTML5 CSS3 Flexbox روی خطوط جداگانه قرار دهیم How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox

• نحوه تغییر رنگ شناور و متحرک کردن دکمه من در HTML و CSS How to change hover color & animate my button in HTML & CSS

• چگونه تگ های خاص در HTML را برای اعمال css در استفاده از کلاس های شبه هدف قرار دهیم How to target specific tags in HTML to apply css to using Pseudo Classes

• نحوه ایجاد یک دکمه منوی ناوبری کشویی ساده HTML CSS How to create a simple dropdown navigation menu button HTML CSS

• افزودن منوی کرکره‌ای CSS ما به وب‌سایت دوچرخه‌های غرش Adding our CSS dropdown menu to the roar bikes website

• میانبرهای مفید ترفندهایی برای سرعت بخشیدن به گردش کار در VS Code Useful shortcuts tips tricks to speed workflow in VS Code

• چگونه یک تصویر پس زمینه بزرگ به طراحی سایت اضافه کنیم How to add a large background image to a website design

• نحوه اتصال 2 صفحه لینک در طراحی وب HTML How to connect link 2 pages in HTML web design

• چگونه یک فرم ساده php را در وب سایت HTML خود کار کنیم How to make a simple php form work on your HTML website

• افزودن متن و برچسب‌های مکان‌نما به وب‌سایت فیلدهای متنی در HTML را تشکیل می‌دهد Adding placeholder text and labels to website form text fields in HTML

• چگونه یک جعبه متن بزرگ چند خطی را در فرم HTML اضافه کنیم How to add a large multi line text box in a HTML form

• نحوه اضافه کردن تیک باکس علامت چک به فرم HTML How to add check mark tick box to a HTML form

• چگونه یک دکمه گرد رادیویی با نقطه در وسط به وب سایت فرم HTML اضافه کنیم How to add a radio button round button with dot in middle to HTML form website

• چگونه یک منوی فرم کشویی برای یک وب سایت در HTML ایجاد کنید How to you make a drop down form menu for a website in HTML

• نحوه استایل دادن به کادرهای متن و چک باکس ها در HTML وب سایت How to style form text boxes & check boxes in a website HTML

پروژه 3: وب سایت نمونه کارها پاسخگو Project 3: Responsive Portfolio Website

• طراحی سایت ریسپانسیو به چه معناست What does responsive website design mean

• نحوه تغییر رنگ اندازه طرح بندی وب سایت در اندازه های مختلف با استفاده از پرس و جوهای رسانه ای How to change a website layout size color at different sizes using media queries

• چگونه وب سایت خود را بر روی تبلت یا تلفن همراه از Visual Studio Code تست کنید How to test your website on a tablet or mobile phone from Visual Studio Code

• نحوه تغییر چیدمان یک وب سایت واکنش گرا برای موبایل در مقابل دسکتاپ How to change the layout of a responsive website for mobile vs desktop

• نحوه روشن و خاموش کردن موارد برای وب‌سایت‌های ریسپانسیو تبلت و دسکتاپ موبایل How to turn things on and off for mobile tablet & desktop responsive websites

• تصاویر پاسخگو با تراکم پیکسلی نسبت پیکسل dppx در طراحی وب چیست What is pixel density responsive images pixel ratio dppx in webdesign

• نحوه صادرات تصاویر ریسپانسیو برای وب سایت از XD Photoshop Illustrator How to export responsive images for website from XD Photoshop Illustrator

• نحوه افزودن تصاویر واکنشگرا به وب سایت با استفاده از عرض 100٪ در HTML و CSS How to add responsive images to website using 100% width in HTML & CSS

• نحوه استفاده از srcset برای تغییر تصاویر در HTML برای وب سایت واکنش گرا How to use srcset to change images in HTML for responsive website

• چگونه یک استایل css را به خط اول تگ p در یک وب سایت اضافه کنیم How to add a css style to the first line of a p tag on a website

• چگونه می توان پاورقی هدر را تمام عرض اما داخل را در مرکز قرار داد How to make the header footer full width but the inside centered

• کلاس پروژه 05 – طراحی سربرگ Class Project 05 – Header design

• کلاس پروژه 05 - طراحی سربرگ کامل شد Class Project 05 – Header design COMPLETE

• نحوه استفاده از تگ span یا کلاس span در HTML برای تغییر متن How to use a span tag or span class in HTML to change text

• نحوه پین ​​کردن ناوبری به بالای یک وب سایت ثابت ناوبری How to pin the navigation to the top of a website fixed nav

• نحوه ایجاد یک منوی ساده پاسخگو برای موبایل فقط با استفاده از CSS How to make a simple responsive mobile menu using CSS only

• جاوا اسکریپت در مقابل جی کوئری در طراحی وب سایت چیست؟ What is Javascript vs Jquery in website web design

• نحوه ساخت منوی برگر 3 خط ناوبری موبایل برای یک وب سایت How to make a burger menu 3 line mobile navigation for a website

• نحوه تغییر منوی منو از دسکتاپ به تلفن همراه How to switch a menu nav from desktop to mobile phone

پروژه 4: وب سایت ماست بوت استرپ Project 4: Bootstrap Yogurt Website

• مروری بر آنچه Bootstrap 4 در طراحی وب سایت است Overview of what Bootstrap 4 is in website design

• نحوه نصب بوت استرپ 4 در وب سایت با استفاده از کد ویژوال استودیو How to install Bootstrap 4 on a website using Visual Studio Code

• مروری سریع بر نحوه عملکرد Bootstrap Grid Layout در VS Code Quick overview of how the Bootstrap Grid Layout works in VS Code

• مروری سریع بر نحوه عملکرد اجزای Bootstrap در VS Code Quick overview of how Bootstrap Components works in VS Code

• مروری سریع بر نحوه عملکرد Bootstrap CSS Styles در VS Code Quick overview of how Bootstrap CSS Styles works in VS Code

• نحوه سفارشی سازی سبک های css پیش فرض Bootstrap 4 How to customize the default Bootstrap 4 css styles

• نحوه استفاده از Bootstrap Layout Grid Experiment 1 How to use Bootstrap Layout Grid Experiment 1

• نحوه ایجاد 100% هدر و عرض ناهموار در بوت استرپ 4 How to make 100% header & uneven widths in Bootstrap 4

• چگونه در بوت استرپ 4 عرض های ناهموار ایجاد کنیم How to create uneven col widths in Bootstrap 4

• نحوه اضافه کردن padding و حاشیه با استفاده از Bootstrap 4 در VS Code How to add padding & margins using Bootstrap 4 in VS Code

• نحوه تغییر طرح بوت استرپ بسته به موبایل یا دسکتاپ How to change layout of Bootstrap depending on mobile or desktop

• چگونه با استفاده از Bootstrap 4 همه چیز را در وب سایت خود روشن و خاموش کنیم How to turn things on & off on your website using Bootstrap 4

• چگونه کوئری های رسانه بوت استرپ را در CSS خود دوباره ایجاد کنید How to re-create the Bootstrap media queries in your own CSS

• نحوه استفاده از Google Chrome Inspect - حذف سبک های بوت استرپ نادیده گرفته شده How to use Google Chrome Inspect - Removing Overriding Bootstrap styles

• نحوه اضافه کردن سایه به متن و جعبه در بوت استرپ 4 How to add shadows to text & boxes in Bootstrap 4

• نحوه تغییر اندازه و رنگ دکمه های پیش فرض Bootstrap 4 How to change the default Bootstrap 4 buttons size & color

• چگونه در بوت استرپ 4 تصاویر را پاسخگو و کشدار کنیم How to make images responsive stretchy in Bootstrap 4

• چگونه تگ های متن و div را در یک وب سایت بوت استرپ 4 وسط قرار دهیم How to center text & div tags in a Bootstrap 4 website

• نحوه سفارشی سازی نوار ناوبری وب سایت در بوت استرپ 4 How to customize the website navbar in bootstrap 4

• لوگوی خود را به منوی ناوبری وب سایت بوت استرپ 4 اضافه کنید Add your own logo to the bootstrap 4 website navigation menu

• نحوه تغییر استایل های پیش فرض Bootstrap 4 Nav How to change the default styles for Bootstrap 4 nav

• چگونه یک ناوبری بوت استرپ 4 ثابت چسبنده را به طراحی وب سایت خود اضافه کنید How to add a sticky fixed bootstrap 4 navigation to your website design

• افزودن یک تصویر col کامل در بوت استرپ 4 و رنگ آمیزی پس زمینه col Adding a full col image in bootstrap 4 & color the background of col

• نحوه اضافه کردن حاشیه و گوشه های گرد به جعبه در Bootstrap How to add a border & rounded corners to a box in Bootstrap

• نحوه ویرایش چرخ فلک بوت استرپ خاموش برای محو شدن زمان بندی موبایل How to edit Bootstrap carousel off for mobile timing fade

• نحوه قرار دادن کارت های بوت استرپ در یک خط با استفاده از عرشه ها و ستون های گروه کارت How to put Bootstrap cards on one line using card groups decks & columns

• نحوه اضافه کردن سایه به جعبه یا کارت در بوت استرپ 4 How to add a drop shadow to a box or card in Bootstrap 4

• چگونه یک تگ div را به یک لینک غول پیکر قابل کلیک در بوت استرپ 4 تبدیل کنیم How to make a div tag a giant clickable link in Bootstrap 4

بعدش چی What Next

• در دوره آموزشی ملزومات طراحی وب ما چه اتفاقی می افتد What next in our web design essentials course