آموزش طراحی قالب وبسایت ریسپانسیو (واکنشگرا) از صفر با HTML و CSS - آخرین آپدیت
دانلود Web Design Responsive Website Template from Scratch HTML CSS
وبسایت خود را از صفر بسازید: آموزش طراحی وب و نحوه ساخت قالب وبسایت ساده با HTML و CSS
- ساخت وبسایت از صفر
- نحوه برنامهریزی و ساخت وبسایت شخصی شما
- ایجاد قالبهای سفارشی برای ساخت وبسایت
- استفاده از CSS برای خلق افکتهای خیرهکننده
- ساختاردهی صفحات HTML
- بهرهگیری از تفکر موبایل فرست (Mobile First) در طراحی
پیشنیازها: HTML و CSS مقدماتی، دسترسی به کامپیوتر
سورس کد طراحی وب واکنشگرا مدرن با CSS و HTML - طراحی وبسایت با CSS Grid
بیاموزید که چگونه یک وبسایت بسازید و CSS را برای عناصر صفحات HTML جهت طراحی وبسایتهای مدرن و واقعی به کار ببرید. یک قالب وبسایت پایه با HTML و CSS ایجاد کنید که میتوانید از آن به عنوان ساختار اصلی برای ساخت وبسایتهای بیشتر استفاده نمایید. عناصر صفحه HTML، شامل هدر، فوتر و ناحیه محتوای اصلی را تنظیم کنید. یک نوار ناوبری (navigation bar) و منوی کناری (side menu) اضافه کنید. درسهای پیشرو به شما کمک میکنند تا اعمال CSS را به عناصر HTML فرا بگیرید. HTML و CSS پیشنیاز هستند، زیرا این دوره برای نمایش و تمرین مهارتهای CSS طراحی شده است.
نحوه ساخت یک وبسایت از صفر را بیاموزید.
تنظیم قالب گرید HTML و CSS
نوار ناوبری CSS با CSS Grid
محتوای طراحی وب
آپدیتهای نهایی Media Query
تنظیم قالب گرید HTML و CSS برای ساختار پایه صفحه
یک ساختار پایه HTML با استفاده از تگهای معنایی (semantic tags) برنامهریزی کنید. به یک فایل استایلشیت لینک دهید و خاصیت display grid را به عنصر والد (parent element) اعمال کنید. ارتفاع ردیفها را در grid-template-rows تنظیم کنید. ستونها را برای بخش اصلی (main) و کناری (aside) در grid-template-columns تنظیم کنید. برای عناصری که در تمام عرض صفحه قرار میگیرند، ستون شروع و پایان گرید را مشخص کنید: grid-column-start: 1; grid-column-end: 3;
نحوه افزودن نوار ناوبری واکنشگرای CSS با استفاده از بلوکهای استایلدهی CSS Grid
نحوه تنظیم یک نوار ناوبری با استفاده از CSS Grid را بیاموزید. خاصیت display را روی grid برای عنصر والد تنظیم و اعمال کنید. قالب ستون را برای ایجاد ستونهای جداگانه برای هر آیتم نوار ناوبری تنظیم کنید. آیتمهای لیست را بهروزرسانی کنید، استایل پیشفرض آیتمهای لیست نامرتب (unordered list) را حذف کنید تا بلوکهای نوار ناوبری ایجاد شود. افکت هاور (hover effect) را برای برجسته کردن آیتمهای نوار ناوبری هنگام عبور ماوس اضافه کنید.
افزودن محتوای جایگزین (Placeholder) و استایلدهی طراحی وب با CSS
هنگام ساخت صفحات وب، اغلب محتوای نهایی آماده نیست. میتوانید از محتوای جایگزین، مانند تصاویر و متن لورم ایپسوم (lorem ipsum) به جای محتوای واقعی استفاده کنید که بعداً اضافه خواهد شد. محتوای جایگزین یا ساختگی میتواند هنگام طراحی وبسایت شما مورد استفاده قرار گیرد تا صفحات حس و ظاهری واقعی داشته باشند. این برای طراحی وب و تست واکنشگرایی (responsive) و موقعیتدهی عناصر صفحه با CSS عالی است. استایلدهی CSS را اعمال کنید و تنظیمات لازم را برای انطباق با محتوا انجام دهید. این درس استایلدهی را به عناصر صفحه، شامل هدر با عناوین و شعار، ناحیه محتوای اصلی و افزودن تصاویری که به صورت بندانگشتی (thumbnail) نمایش داده میشوند، اعمال خواهد کرد. همچنین محتوای کناری (aside content) را به بلوکهای محتوایی مجزا تقسیم میکند و یک فوتر دو ستونه با استفاده از استایلدهی CSS Grid ایجاد مینماید.
تنظیم Media Query در CSS با آپدیتهای نهایی استایل CSS
ستونها را در اندازههای صفحه کمتر از 640 پیکسل تغییر اندازه داده و به صورت ردیفی روی هم قرار دهید. Media Query را اضافه کرده و تنظیمات لازم را برای ظاهر وبسایت در صفحات کوچکتر انجام دهید. استایلدهی را تست کرده و پیشنمایش نحوه تنظیم آن را برای اندازههای مختلف صفحه مشاهده کنید. از محتوای جایگزین برای شبیهسازی محتوای واقعی وبسایت که بعداً اضافه خواهد شد، استفاده نمایید.
ساخت وبسایت از صفر را با رویکرد طراحی موبایل فرست بیاموزید.
طراحی وب موبایل فرست برای ساخت یک وبسایت کاملاً واکنشگرا از صفر
آموزش گام به گام یک پروژه واقعی، یعنی ساخت یک وبسایت. در پایان دوره قادر خواهید بود پورتفولیوی خود را با طراحیهای مختلف وبسایت گسترش دهید. استفاده از HTML و CSS برای ساخت وبسایتها را فرا بگیرید.
با یک مفهوم وایرفریم وبسایت شروع کنید؛ این دوره نحوه توسعه آن نقشه را به یک وبسایت واقعی پوشش میدهد. ساختار HTML را اعمال کرده و سپس استایلدهی CSS را اضافه کنید. از اینکه ساخت وبسایتهای مدرن و کاملاً کاربردی چقدر آسان است، شگفتزده خواهید شد.
یک وبسایت کاملاً واکنشگرا و آماده برای موبایل را از صفر با استفاده از HTML و CSS بسازید. بهترین منابع و سورس کد گنجانده شده است. هر آنچه برای ساخت وبسایت خود نیاز دارید، موجود است.
یادگیری ساخت وبسایت از صفر
مشاهده ابزارها و منابع مورد استفاده برای کدنویسی وب در عمل
یادگیری HTML و CSS و نحوه کارکرد آنها با یکدیگر
برنامهریزی وبسایت خود و ساخت آن از صفر
توسعه قالب وبسایت خود با استفاده از HTML و افزودن استایلدهی برای زیبایی آن
سورس کد ارائه شده است تا بتوانید از آن استفاده کرده و در صورت نیاز برای ساخت نسخه خود از این وبسایت، آن را تغییر دهید.
HTML و CSS در دنیای واقعی توسط مدرس با بیش از 15 سال تجربه در توسعه وب ارائه میشود.
من اینجا هستم تا به شما در یادگیری توسعه و طراحی وب کمک کنم. آماده پاسخگویی به هر سوالی که ممکن است داشته باشید، هستم.
چیزی برای از دست دادن نیست؛ 100% ضمانت بازگشت وجه در صورت عدم رضایت وجود دارد.
میخواهید بیشتر بدانید؟ منتظر چه هستید، اولین گام را بردارید. همین الان بپیوندید تا همین امروز ساخت وبسایت را شروع کنید.
وبسایت مدرن از صفر با CSS Grid Modern Website from scratch with CSS Grid
-
کد منبع طراحی وب واکنشگرای مدرن (CSS و HTML) – طراحی وبسایت با CSS Grid Modern Responsive Web Design Source Code CSS and HTML CSS Grid Design website
-
کد منبع طراحی وب واکنشگرای مدرن (CSS و HTML) – طراحی وبسایت با CSS Grid Modern Responsive Web Design Source Code CSS and HTML CSS Grid Design website
-
راهاندازی قالب HTML CSS Grid برای ساختار پایه صفحه HTML CSS Grid Template Setup for the basic page structure
-
نحوه افزودن نوار ناوبری (NavBar) واکنشگرای CSS با استفاده از بلاکهای استایلینگ CSS Grid How to add a responsive CSS NavBar using CSS Grid styling blocks
-
افزودن محتوای Placeholder و استایلینگ طراحی وب با CSS Adding Placeholder content and Web Design styling with CSS
-
تنظیم Media Query در CSS همراه با بهروزرسانی نهایی استایل CSS CSS setting Media Query with Final CSS style Updates
نحوه ساخت وبسایت ساده واکنشگرا از صفر How to Build a Simple Responsive website from scratch
-
وبسایت ساده واکنشگرا از صفر Simple Responsive website from scratch
-
منابع دوره استفاده شده برای ساخت وبسایت Course Resources Used to Build a website
-
HTML و وایرفریم HTML and WireFrame
-
ساخت ساختار HTML Build HTML structure
-
کدهای منبع ساختار HTML HTML structure Source Code
-
افزودن محتوای Placeholder Add Placeholder content
-
افزودن استایل به ساختار HTML Add Styling to HTML Structure
-
نحوه تبدیل لیست نامرتب به نوار ناوبری (Navbar) How to turn Unorderd List into a Navbar
-
کدهای منبع نوار ناوبری Source Code NavBar
-
اندازههای صفحه نمایش Media و واکنشگرا کردن آن Media Screen Sizes make it responsive
-
ستونهای واکنشگرا Responsive Columns
-
پاک کردن Floating و جابهجا کردن بخشها Clear Floating move around sections
-
فونتهای گوگل و سفارشیسازی Google Fonts and Customizing
-
کدهای منبع HTML Source Code HTML
-
کدهای منبع CSS Source Code CSS
-
منابع Resources
پرسش و پاسخ – نکات کدنویسی رایج CSS و HTML و قطعه کدها Q&A questions and common CSS and HTML coding tips and code snippets
-
متمرکز کردن عناصر صفحه با CSS CSS Center Page Elements
-
قالب وبسایت واکنشگرای طراحی وب از صفر (HTML و CSS) Web Design Responsive Website Template from Scratch HTML CSS
-
منابع آموزشی تکمیلی: محتوای قابل دانلود، مثالهای عملی Bonus Educational Resources: Downloadable Content, Practical Examples
https://donyad.com/d/7fe75a
Laurence Svekis
پرفروش ترین مدرس دوره
نویسنده دوره طراحی وب و توسعه وب - آموزش حضوری و آنلاین به بیش از 1,000,000 دانش آموز در سطح جهان. کارشناس توسعه دهنده Google از سال 2020 GDE
من اینجا هستم تا به شما کمک کنم یاد بگیرید، به رویاهای خود برسید، امروز در این ماجراجویی شگفت انگیز به من بپیوندید
Google Developers Expert - GSuite
ارائه دوره های توسعه وب و دوره های استراتژی بازاریابی دیجیتال از سال 2002.
متخصص فناوری نوآور با طیف گسترده ای از تجربه دنیای واقعی. ارائه راه حل های دیجیتال هوشمند به صورت آنلاین برای مشاغل کوچک و تجاری.
"من به هر چیزی که مربوط به فناوری دیجیتال باشد علاقه دارم، از برنامه نویسی و چالش ایجاد تجربیات دیجیتال موفق لذت می برم. به عنوان یک توسعه دهنده با تجربه، اولین برنامه های کامپیوتری خود را در سال 1990 و اولین وب سایت خود را در سال 1998 ایجاد کردم. از به اشتراک گذاری مطالب خود لذت می برم. دانش با دیگران است و می خواهم به شما کمک کنم در فرصت های فوق العاده ای که اینترنت فراهم می کند به اشتراک بگذارید."
"یادگیری، درک با اشتیاق قوی برای آموزش. اینترنت فرصت های جدیدی را برای گسترش و به اشتراک گذاری دانش در اختیار ما قرار داده است."
میخواهید درباره تبدیل شدن به یک توسعهدهنده وب اطلاعات بیشتری کسب کنید، آیا میخواهید آزادیای را که فناوری برای ما فراهم میکند، تجربه کنید؟ یاد بگیرید که چگونه چیزهای شگفت انگیز را به صورت آنلاین زنده کنید. فناوری همه ما را از طرق مختلف به هم متصل می کند. این درها را به روی کسانی باز می کند که آن را در آغوش می گیرند و یاد می گیرند که چگونه این ارتباطات را واقعی کنند.
"دوره های آموزشی من برای کمک به شما در دستیابی به اهداف، یادگیری و به روز رسانی مهارت ها طراحی شده اند"
سابقه و هدف : یک توسعه دهنده باتجربه برنامه های کاربردی وب، که روی چندین برنامه در سطح سازمانی، صدها وب سایت، راه حل های تجاری و بسیاری از برنامه های کاربردی وب منحصر به فرد و نوآور کار کرده است. زمینه های تخصصی توسعه برنامه های کاربردی وب عبارتند از HTML، CSS، JavaScript، JQuery، Bootstrap، PHP و MySQL. هر چیزی که مربوط به ایجاد وب و تجربه دیجیتال باشد. علاقهمند به هر کاری که با توسعه برنامههای کاربردی وب، برنامهنویسی تا بازاریابی آنلاین با تمرکز قوی بر رسانههای اجتماعی و SEO .
" درک فناوری وسیله ای برای ارتباط بهتر با کاربران فراهم می کند. همچنین درهای زیادی را باز می کند. دانش کلید موفقیت است و من می خواهم به شما کمک کنم تا آنچه را که فناوری ارائه می دهد تجربه کنید. من به فن آوری های وب علاقه مند هستم و مشتاقانه منتظر به اشتراک گذاشتن دانش و تجربه خود با شما هستم!"
نمایش نظرات