آموزش مبانی طرح‌بندی طراحی وب: یاد بگیرید چگونه طراحی خود را با HTML و CSS توصیف کنید
The Basics of Web-Design Layout: Learn How To Describe Your Design With HTML & CSS
من از سال 2007 وب‌سایت می‌سازم. و یکی از بزرگ‌ترین دانش‌هایی که باید کسب می‌کردم، یادگیری اصول اولیه طرح‌بندی طراحی وب بود. در برنامه های طراحی، ما درگ و رها می کنیم. تراز می کنیم. گروه بندی می کنیم. عرض، ارتفاع و موقعیت x y را تنظیم می کنیم. ما یک پانل لایه ها داریم. ما کنترل فوق العاده خوبی داریم. اما طراحی در Photoshop یا Sketch، وب سایت نهایی نیست، حتی اگر نام فایل web-FINAL final.psd باشد. وب سایت نهایی همان وب سایتی است که در مرورگر وجود دارد. این همان چیزی است که در مقابل مشتری شماست. و مهارت دانستن نحوه توصیف طرح به مرورگر با استفاده از HTML CSS یکی از بهترین مهارت هایی است که می توانید داشته باشید. HTML CSS یک جفت زبان طراحی توصیفی است که می‌توان آن را یاد گرفت، درست مانند استفاده از Sketch یا Photoshop.
این کلاس به شما نشان می‌دهد که چگونه طرح‌بندی‌ها را برای مرورگر توصیف کنید، پیش‌فرض‌ها چیست، چگونه آنها را لغو کنید و چه زمانی آنها را لغو کنید. شما بیشتر متوجه خواهید شد که مرورگر چگونه کار می کند و تفاوت آن با برنامه های طراحی وب چیست. نحوه طراحی شما را تغییر خواهد داد و حتی ممکن است طراحی بیشتری را در مرورگر شروع کنید (مانند من). دانستن ابزارهای شما بسیار سودمند است. و به عنوان یک طراح یا توسعه‌دهنده، دانستن نحوه عملکرد طرح‌بندی در مرورگر به شما امکان می‌دهد سریع‌تر و قاطع‌تر کار کنید.
این کلاس موارد زیر را پوشش می دهد:
- 5 نوع مختلف موقعیت یابی
- مدیریت عمق
- انواع نمایش رایج
- بالشتک
- حاشیه
- مرزها
- TranslateX و Y
- اصطلاحات HTML CSS
- نمونه های زیادی
- راهنمای ایجاد یک صفحه وب، که در آن نشان می‌دهم که لازم نیست در اعداد و ارقام خوب باشید یا کاملاً همه چیز را در مورد توسعه وب‌سایت‌ها بدانید. اشکال زدایی می کنیم. ما برای چیزهایی در گوگل جستجو می کنیم. ما چیزهایی را امتحان می کنیم.
اگر در HTML CSS تازه کار هستید، یا می‌خواهید در کلاس‌های مشابه شرکت کنید، اینها هستند:
برای پروژه کلاس خود، یک صفحه وب ساده ایجاد کنید که از آنچه در کلاس یاد می گیرید استفاده کند!
از برخی یا همه موارد زیر استفاده کنید:
- حاشیه
- بالشتک
- مرزها
- انواع نمایش
- تعیین موقعیت (عناصر ثابت، نسبی، مطلق، ثابت و چسبنده)
- X و Y را ترجمه کنید
- اندازه جعبه
و سپس، URL سایت خود را به اشتراک بگذارید، و همچنین تصویری از آن را در گالری پروژه خود به اشتراک بگذارید!
بررسی کنید دانش آموزان دیگر چه کاری انجام داده اند، نظرات خود را در مورد پروژه های خود بنویسید، بحثی را شروع کنید و ایجاد کنید. چند دوست!
در اینجا چند پیوند برای برنامه‌ها و وب‌سایت‌هایی که در طول کلاس استفاده می‌کنیم وجود دارد:
- – برای پشتیبان‌گیری و نگهداری نسخه‌های پروژه خود
- – برنامه ای برای پشتیبان گیری و ایجاد نسخه های پروژه شما
- - یک ویرایشگر کد آنلاین عالی. همچنین دارای محتوای بسیار عالی و انجمن جالب است
- – برای استقرار وب سایت استاتیک بسیار آسان (البته باید از برنامه ترمینال استفاده کنید)
- – ویرایشگر کد مورد علاقه من
این پروژه ای است که در طول کلاس ساخته ام.
کد را به دلخواه کلون/fork/copy/بررسی کنید!
-
-
- - شما می توانید بیشتر نمونه را در اینجا پیدا کنید
و باید 2 پیوست وجود داشته باشد! 1 شرایط موقعیت یابی من را دارد. دیگری یک فایل فشرده پر از فایل‌های png. کاراکتر دارد – از آنها در پروژه خود استفاده کنید!
درس ها Lessons
-
چرا باید در این کلاس شرکت کنید Why You Should Take This Class
-
پایان The End
-
اصطلاحات HTML و CSS HTML & CSS Terminology
-
پروژه: The Hero Banner CSS Project: The Hero Banner CSS
-
همه اش را بگذار کنار هم Putting It All Together
-
پروژه: راه اندازی Project: The Setup
-
پروژه: بخش داستان Project: The Story Section
-
آن را با دیگران به اشتراک بگذارید Share It With Others
-
تبدیل و ترجمه Transform & Translate
-
موقعیت یابی ثابت Fixed Positioning
-
موقعیت یابی مطلق Absolute Positioning
-
حاشیه، بالشتک و حاشیه Margin, Padding & Border
-
تابع کالک The Calc Function
-
موقعیت یابی چسبنده Sticky Positioning
-
پروژه: HTML Project: The HTML
-
اصطلاحات موقعیت Position Terminology
-
پروژه: Sticky Nav & The Read More Section Project: Sticky Nav & The Read More Section
-
تئوری جعبه HTML HTML Box Theory
-
پروژه: پاپ آپ Project: The Popup
-
شناور Floating
-
موقعیت یابی استاتیک Static Positioning
-
عمق و شاخص Z Depth & Z-Index
-
موقعیت یابی نسبی Relative Positioning
-
جعبه مدل و اندازه جعبه Box-model & Box-sizing
-
انواع نمایش، استایل پیش‌فرض و لغو Display Types, Default Styling & Overriding
https://donyad.com/d/d750f3
Rich Armstrong
هنرمند و طراح
هی! من ریچ آرمسترانگ هستم، خالق ADD چند خط فاصله. من طراحی، تصویرسازی، متحرک سازی، doodle و کدنویسی می کنم. آره همه آنها! و من عاشق این هستم. من می خواهم به شما در ایجاد چیز کمک کنم. من می خواهم ببینم شما سازنده هستید. از شما می خواهم رویاها و اهداف خود را دنبال کنید.
------------------------------
** اخبار بزرگ: پروژه 100 روزه کامل منتشر شد **
کتابی که در سال 2021 نوشتم منتشر شد! این پروژه The Perfect 100 Day Project نام دارد و به شما کمک می کند تا پروژه 100 روزه عالی را برای خود انتخاب کرده و تکمیل کنید. این کتاب بر اساس کلاس اشتراک مهارت معروف من به همین نام است.
------------------------------
من طراحی چند رسانه ای و سپس طراحی گرافیک را مطالعه کردم و به خودم یاد دادم که چگونه کدنویسی کنم. من به صورت آزاد کار کرده‌ام، برای آژانس‌ها و استارت‌آپ‌ها کار کرده‌ام و اکنون استودیوی خودم را با همسرم در آمستردام اداره می‌کنم. همچنین، من می توانم بینی خود را با زبانم لمس کنم!
من از سال 2015 در Skillshare تدریس می‌کنم و خیلی دوست دارم! دیدن آنچه دانش‌آموزان خلق می‌کنند و چگونه زندگی خود را به دلیل آنچه که من آموزش می‌دهم تغییر می‌دهند، مرا زنده می‌کند. بنابراین، متشکرم! لطفاً به اشتراک گذاری کار، نظرات و داستان های خود ادامه دهید!
برای انواع چیزهای فوق‌العاده مانند تمرین‌ها و تمرین‌های خلاقانه، بررسی کنید، برنامه رایگان من را دانلود کنید و مرا در اینستاگرام، Patreon و دنبال کنید. همچنین می‌توانید برای دریافت چیزهای اضافی و ترفندهای راهنمایی در صندوق ورودی خود ثبت نام کنید.
B.Tech. (Cum Laude) در طراحی گرافیک
2013 - 2014
B.A. در مدیریت ارتباطات متخصص در ارتباطات برند خلاق
2006 - 2008
نمایش نظرات