آموزش با HTML و CSS یک کارت ویزیت دیجیتال بسازید
Make a Digital Business Card with HTML and CSS
همراه با توسعه دهنده وب کدنویسی کنید و یک صفحه وب ساده برای برند شخصی خود با HTML و CSS بسازید. در این دوره یک ساعته در سطح مبتدی، مهارت هایی را که برای راه اندازی وب سایت خود نیاز دارید، یاد خواهید گرفت.
مهارت هایی که یاد خواهید گرفت
با درک اولیه HTML و CSS، نه تنها می‌توانید وب‌سایت خود را بسازید، بلکه مهارت‌هایی را برای اصلاح و بهبود سایت‌های موجود در پلتفرم‌هایی مانند Wordpress، Squarespace یا Wix به دست خواهید آورد.
پروژه
در طول هر درس، یک کارت ویزیت دیجیتال قابل اشتراک‌گذاری برای برند شخصی شما می‌سازیم که می‌تواند در وب زندگی کند. در پایان دوره، یک وب سایت تک صفحه ای جذاب با یک فراخوان برای اقدام خواهید داشت که بازدیدکنندگان را راهنمایی می کند تا با شما تماس بگیرند. ()
سطح مبتدی
این یک دوره سطح مبتدی در توسعه وب است. اگر می‌توانید تایپ کنید و توانستید برای تماشای این دوره به این وب‌سایت بروید، پس تمام تجربه‌ای را که برای شروع نیاز دارید دارید.
توجه: من برای این آموزش از Mac استفاده خواهم کرد، اما دنبال کردن در Windows باید تجربه بسیار مشابهی برای این پروژه باشد.
اکنون اجازه دهید کدنویسی را شروع کنیم!
ماموریت ما
ما کارت ویزیت چاپ شده استاندارد شما را می گیریم و در وب قرار می دهیم. برای انجام این کار، ما تمام HTML و CSS اولیه را برای کدنویسی یک طراحی شیک و مدرن پوشش می‌دهیم.
الزامات
برای تکمیل این پروژه باید یک ویرایشگر کد مورد نظر خود را نصب کنید. مورد علاقه شخصی من Atom است، اما در اینجا چند پیشنهاد وجود دارد تا در صورت تمایل بتوانید مورد علاقه خود را انتخاب کنید:
Atom -
Sublime Text - https://www.sublimetext.com/
کد ویژوال استودیو -
من همچنین به شما پیشنهاد می‌کنم هد شات مورد علاقه خود یا لوگوی شرکت خود را آماده کنید تا بتوانیم از آن در طراحی خود استفاده کنیم. هر چیزی بزرگتر از 300px طول و عرض انجام می دهد. اگر بزرگتر از 1000 پیکسل است، پیشنهاد می‌کنم اندازه تصویر را تغییر دهید تا سرعت بارگیری آن کند نشود.
منابع
- نمادهای شگفت انگیز:
- الگوی کاغذ شیار:
- فونت های گوگل:
مرجع
- می توانید محصول نهایی را در اینجا ببینید:
- می‌توانید در اینجا به کد تکمیل‌شده بروید:
درس ها Lessons
-
شروع کار با CSS Getting Started with CSS
-
کد خود را منتشر کنید Publish Your Code
-
بسته بندی Wrapping Up
-
معرفی دوره Course Introduction
-
کتابخانه ها Libraries
-
لینک ها و تصاویر Links and Images
-
عناصر اساسی: سرفصل ها و پاراگراف ها Basic Elements: Headings and Paragraphs
-
CSS پیشرفته Advanced CSS
-
عناصر موقعیت یابی Positioning Elements
-
تغییر اندازه عناصر Resizing Elements
-
عناصر بلاک و HTML معنایی Block Elements and Semantic HTML
-
تایپوگرافی Typography
-
جداول و فهرست ها Tables and Lists
-
ترازها Alignments
-
تصاویر پس زمینه و پیوندهای نسبی Background Images and Relative Links
-
سند HTML و نحو HTML Document and Syntax
https://donyad.com/d/ab8572
Nathan Blair
توسعه دهنده وب فرانت اند
من یک توسعه دهنده وب فرانت اند مستقر در آستین، TX هستم. با داشتن سابقه ای در فیلمسازی، همیشه مشتاق یادگیری و کشف فناوری های پیشرفته برای ایجاد وب سایت های خلاقانه و جذاب هستم.
من به خودم برنامه نویسی یاد دادم و امیدوارم بتوانم در انجام همین کار به شما کمک کنم.
نمایش نظرات