آموزش طراحی قالب سایت دیجی کالا با Html | Css | Sass | Bootstrap | Jquery به صورت کاملا واکنشگرا جهت ورود به بازار کار + سورس قالب

سرفصل های دوره جامع طراحی سایت دیجی کالا

طراحی قالب سایت یکی از مهارت‌های اساسی در زمینه توسعه وب و دیجیتال مارکتینگ است که بسیاری از افراد به دنبال یادگیری آن هستند. دیجی کالا به عنوان یکی از بزرگترین فروشگاه‌های اینترنتی ایران، از نظر طراحی و ساختار قالب، الگویی مناسب برای بسیاری از طراحان و توسعه دهندگان وب به حساب می‌آید. در این دوره قصد داریم قالب مشابه با قالب سایت دیجی‌‌کالا رو با استفاده از مباحث Html | Css | Sass | BootStrap | Jquery از صفر طراحی کنیم. در این آموزش موارد مهم کامل توضیح داده شده است که باعث می شود از مبتدی تا پیشرفته، همه چیز را از صفر تا صد یاد بگیرید، همچنین در این دوره زبان های طراحی قالب سایت به صورت تخصصی آموزش داده شده است. این دوره برای طیف وسیعی از افراد از جمله دانشجویان، طراحان وب، برنامه‌نویسان و علاقه‌مندان به دنیای وب بسیار مناسب است.

فصل 1 : مقدمات طراحی سایت

در این فصل مباحثی که جلوتر مورد نیاز هستش رو بطور کامل بررسی خواهیم کرد، پس در این فصل به مقدمه ای از مباحث طراحی سایت می پردازیم.

قسمت 1 : ورود به دنیای وب

در این بخش اولین و مهم ترین ابزار مورد نیاز یک طراح سایت رو معرفی و به صورت کلی مورد بررسی قرار میدیم و در ادامه به صورت عملی بررسی می کنیم که اصلا سایت چیه؟ و همچنین با اصطلاحات مرورگر (Web Browser)، وب سایت (Web Site)، کلمه کلیدی (Keyword)، باکس جستجو (Search Box)، SERP و اتصال (Link) در طول آموزش آشنا می شوید.

قسمت 2 : معرفی بخش های مختلف نتایج جستجو گوگل

احتمالا قبل از دیدن این بخش، زمانی که عبارتی رو در گوگل جستجو می کردید به جزئیات نتایج جستجو در گوگل دقت نمی کردید و اما بعد از دیدن این بخش با انواع بخش های مختلف نتایج جستجو بیشتر آشنا می شوید و مطمئن باشید در روند یادگیری مباحث مختلف طراحی سایت، اصطلاحاتی که در این بخش یاد می گیرید خیلی کمکتون می کنه و با دید تخصصی تری به بخش های مختلف نتایج جستجو گوگل نگاه می کنید و اما اصطلاحاتی که در این بخش یاد می گیرید شامل :

name of the website _ favicon of the website _ breadcrumb _ page title _ rich snippets _ release or update date _ meta description _ matches _ image of the result _ star rating _ product price _ links related _ organic _ sponsored _ local pack _ featured snippets _ top stories _ images _ people also ask _ knowledge panel _ site links _ twitter_ related searches _ video _ video carousel _ apps _ google flights _ jobs _ recipes _ shopping results

قسمت 3 : دیتاسنتر ، سرور ، رک چیست؟

بعد از این که به صورت عملی در جلسات گذشته درک کردید که سایت چیه؟ احتمالا این سوال براتون پیش اومده که بگید این اطلاعات سایت ها در کجا ذخیره و نگهداری میشن؟ برای این که جواب این سوالتون رو بدم در این بخش شما رو با 3 اصطلاح دیتاسنتر (Data Center) ، سرور (Server) و رک (Rack) آشنا میکنم.

قسمت 4 : آیپی و وب سرور چیست؟

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

قسمت 5: DNS چیست؟ و چگونه مرورگر IP متناظر با دامنه جستجو شده رو پیدا میکنه؟

در این بخش ابتدا مفهوم DNS رو درک می کنید و متوجه میشید که DNS به منظور ایجاد شکاف ارتباطی بین کامپیوترها و انسان ها و برقراری ارتباط آسان تر توسعه داده شده و در واقع وظیفه اصلی DNS اتصال دامنه به آیپی هستش بجای اینکه بخواهیم IP را تایپ کنیم آدرس نام دامنه را تایپ می کنیم و در آخر بطور کامل درک می کنید که چگونه مرورگر IP متناظر با دامنه جستجو شده رو پیدا میکنه و همچنین با اصطلاحات زیر در طول آموزش آشنا خواهید شد:

ISP _ Resolving name server _ Root name server _ TLD name server _ Authoritative name server

قسمت 6: URL و دامنه از چه قسمت هایی تشکیل شده اند؟

URL دارای بخش های مختلفی هستش که یکی از بخش هایش دامنه می باشد که در این بخش تک تک قسمت های یک URL که شامل پروتکل ارتباطی،زیر دامنه، دامنه سطح دوم، دامنه سطح بالا و شاخه و مسیرهای داخلی رو تک به تک مورد بررسی قرار می دهیم و همچنین در این بخش با اصطلاحات زیر آشنا می شوید:

Protocol HTTP & HTTPS _ SSL _ Sub Domain _ SLD _ TLD _ Sub Directory _ Query String _ sTLS _ gTLD _ ccTLD

قسمت 12: معرفی مهم ترین قسمت های مختلف سایت

آشنایی با بخش های مهم سایت میتونه در روند کاری و یادگیریتون خیلی کمکتون کنه پس بر این منظور در این بخش به معرفی مهم ترین قسمت های مختلف سایت می پردازیم و همچنین با اصطلاحات زیر آشنا می شوید:

Arrow _ Ribbon _ Favicon _ Drag & Drop _ popup _ Breadcrumb _ Field _ Logo _ Sidebar _ Skleton Loader _ Action Sheets _ Notification _ Snack bars _ Customer Reviews _Charts _ Chips _ Range Slider _ Divider _ Border _ Shadow _ Toggle Button _ Sub Menu _ Mega Menu _ Post Thumbnail _ Scroll bar _ Related Post _ Sticky Header & Sidebar _ Category _ Search box _ Footer _ header _ Content _ body _ Comment _ Avatar _ Login _register _ User Profile _ Tab _ Countdown _ Slider _ Accordion _ Form _ Label _ Input _ Check and Radio _ Menu _ Dark Mode _ Toast _ Popover _ Tooltip _ Modal _ Carousel _ Navigation bar _ Dropdown _ Pagination _ Spinner _ Progress bar _ Button _ Alert _ Tabel

قسمت 13: کامپایلر (Compiler) چیست و چگونه کار میکند؟

در این جلسه ابتدا بررسی میکنیم که یک برنامه نویس برای یادگیری و درک بهتر هر زبان برنامه نویسی باید با نوع زبان ( اینکه زبان برنامه نویسی مد نظرش سطح بالاست یا سطح پایین ) آشنایی داشته باشه پس زبان های سطح بالا و سطح پایین رو مورد بررسی قرار میدیم و در ادامه تعریف کامپایلر ، انواع مختلف کامپایلر ، مراحل کار کامپایلر رو مورد بررسی قرار میدهیم و همچنین با اصطلاحات زیر آشنا میشوید:

Compiler _ AOT _ JIT _ Scanning _ Lexical _ Syntactic _ Semantic

قسمت 14: از معرفی تا نصب کد ادیتور (Code Editor)

در این جلسه ابتدا به صورت عملی یکی از اصلی ترین تفاوت بین یک کد ادیتور ساده با یک ویرایشگر کد حرفه ای رو لمسش می کنید و در ادامه با توجه به نیاز آموزش و کاریمون لازم میشه که از یک ادیتور حرفه ای استفاده کنیم بر این منظور انواع مختلف ویرایشگرهای کد رو معرفی میکنم و همچنین متوجه می شوید که IDE و Text Editor چیه؟ و بعد از آشنایی با انواع مختلف کد ادیتور، یدونه خوبشو با توجه به نیاز کاریمون انتخاب می کنیم و مراحل نصب رو با هم دیگه طی می کنیم.