دوره Web Design 1 – HTML & CSS

Web Design 1 – HTML & CSS
- (50 ساعت)
- پیش نیاز:
تقویم برگزاری این دوره
معرفی این دوره
اگه شما یک طراح وب هستین و فعالیت و یادگیری توی این حوزه رو دوس دارین باید تو آموزش css و html شرکت کنین و مفاهیم مرتبط رو به خوبی یاد بگیرین. به طور کلی دوره html css یکی از پیش نیازها و دانش اصلی برای نوشتن کد توی صفحات وب هست که یک سری ویژگیها رو نمایش میده. دنیای طراحی وب خیلی شلوغه و رقابت زیادی توی اون وجود داره؛ به همین دلیل اگه واقعا قصد دارین توی این زمینه فعالیت داشته باشین و پیشرفت کنین باید حسابی تلاش کنین، مدام در حال یادگیری باشین و نمونه کارهای مختلفی رو طراحی کنین. تو شرایط الان که سبک تبلیغات و بازاریابی تغییر کرده، طراحی سایت یک مهارت جهانی به حساب میاد. شما هم هر کشوری که زندگی میکنین میتونین با یادگیری و آموزش طراحی سایت درآمدزایی کنین؛ اما برای موفق شدن باید به صورت حرفهای و اصولی آموزش ببینین. از مهمترین استانداردهای تصویب شده وب هم Html و css هستن که همونطور که گفتیم لازمه ورود به این شغل و حرفه محسوب میشن. توی این مطلب از کندو قصد داریم شما رو بیشتر با این مفاهیم و همچنین آموزش css و html آشنا کنیم.
چیست html css
Html مخفف عبارت HyperTextMarkupLanguage و یک زبان نشانه گذاری متن (زبان استاندارد صفحات وب) هست. معمولا توی یک صفحه وب بخشهای مختلفی مثل عکسها، متنها و غیره وجود داره. HTML یک سری تگها و کدهایی رو در اختیار شما میذاره که به کمک اونا میتونین به این اطلاعات و بخشها یک ساختار مشخصی بدین تا در نهایت هم برای بازدیدکنندگان به نمایش بذارین. این نکته رو بدونین که توی زبان اچ تی ام ال هر تگ مفهوم و معنای خاصی داره. صفحاتی که با زبان html ساخته میشن شامل markup tag ها هستن و با پسوند htm و یا html ایجاد میشن. شما میتونین با برنامههای مختلف ادیتور مثل dearm weaver، Notepad، Visual Stadioو غیره این صفحات رو ویرایش کنین. توی این زبان برای جداسازی بخشها و کدهای مختلف از ” تگ ” استفاده میشه و همین تگها ابزاری هستن که نحوه نمایش اطلاعات در صفحات وب رو توسط مرورگرها مشخص میکنن. در اصل تگها اشکال مختلف نمایش عناصر رو توی یک صفحه وب مشخص میکنن.
Css مخفف عبارت Cascading Style Sheets هست و به طراحان سایت این قابلیت رو میده که استایلدهی و زیباسازی صفحات وب رو انجام بدن. در اصل ابتدا به کمک اچ تی ام ال ساختار یک صفحه ایجاد میشه و بعد برای استایل دادن از کدهای دیگه استفاده میشه. به عبارت دیگه میشه گفت یادگیری html و css در کنار هم باید انجام بشه چون این دو مکمل همدیگه هستن. با css امکان تنظیم فونتها، مکان قرارگیری، حاشیهها، ابعاد و اندازهها، رنگها و بقیه خصوصیتهای اجزای صفحه برای شما فراهم میشه. هر تغییری که با css انجام بشه، کاربران هم میتونن اون رو توسط مرورگرها مشاهده؛ کنن چراکه css یک استاندارد مشخص هست و توی همه مرورگرها به شکل یکسان دیده میشه. معمولا در شیوههای جدیدتر آموزش css و html برای طراحی سایت استایلدهی inline استفاده نمیشه چراکه از نظر سئو مناسب صفحات وب نیست. پس به طور خلاصه با آموزش css و html میتونین یک صفحه وب کاربرپسند، کاربردی و زیبا ایجاد کنین.
مسیر یادگیری html و css
امروزه توی سراسر دنیا html و css گسترش پیدا کرده و به همین دلیل هم برای آموزش css و html منابع رایگان زیادی ایجاد شده. یکی از بهترین منابع، سایت www.web3school.com هست. شما میتونین توی این سایت اول زبان موردنظرتون رو انتخاب کنین و بعد اون رو به صورت رایگان و مرحله مرحله یاد بگیرین. این سایت یک فضای کدنویسی آنلاین رو هم در اختیار شما میذاره تا بتونین هرچیزی که یاد گرفتین رو همون موقع تست و اجرا کنین. این نکته رو هم بدونین که اگه زبان انگلیسی رو به خوبی نمیدونین، میتونین از ابزار ترجمه گوگل (google translate) استفاده کنین و مطلب رو کامل یاد بگیرین. اگر هم زبان انگلیسی رو بلد هستین باید بگیم که بهترین آموزش html و css رو میتونین توی یوتیوب پیدا کنین و به صورت رایگان از اون استفاده کنین. البته منابع فارسی هم توی یوتیوب وجود دارن که میتونن به شما کمک کنن.
بعد از اینکه آموزش css و html رو گذروندین به راحتی میتونین حوزه موردعلاقه خودتونو مشخص کنین و مراحل بعدی رو پیش برین. مثلا میتونین کدنویسی وردپرس و طراحی قالب وردپرس رو انتخاب کنین یا برنامه نویسی php رو به صورت تخصصی انجام بدین. شاید هم بخواین توی حوزه برنامهنویسی موبایل شروع به کار کنین. برای ورود به همه این مشاغل باید کدنویسی html css رو بلد باشین.
پیش نیازهای آموزش html و css
اگه برای آموزش css و html یک دوره جامع رو انتخاب کرده باشین همه چیز رو به صورت قدم به قدم یاد میگیرین و دیگه نیازی به هیچ پیشزمینهای ندارین. فقط باید مفاهیم اولیه کار کردن با سیستم کامپیوتر و مرورگرهای اینترنتی رو بدونین. اگه شما این مفاهیم رو نمیدونین، میتونین قبل از آموزش html و css مقدماتی توی دوره آموزش مفاهیم وب شرکت کنین.
مهمترین سرفصل های دوره Html
توی این قسمت چندتا از سرفصلهای دوره html در آموزش css و html رو به صورت تیتروار قرار میدیم تا به طور کلی بدونین قراره توی این دورهها چی یاد بگیرین.
- مقدمهای بر HTML
- آشنایی با ساختار صفحات وب
- صفتها در HTML
- تگهای قالب بندی متن
- کار با لینکها، تصاویر، لیستها، جدولها، بلوکها، فریمها
- کار با جاوا اسکریپت در HTML
- کامنتگذاری
- کار با استناد و نقل قول و کار با CSS در HTML
- آشنایی با Head و Layout
- آشنایی با گرافیک و API ها و غیره
آموزش اچ تی ام ال چقدر زمان میبرد؟
توی این قسمت از مطلب آموزش css و htmlمیخوایم به شما بگیم که برای یادگیری زبان html چقدر باید وقت بذارین. باید بدونین که این زبان خیلی راحت هست و اگه کمی تلاش و پشتکار داشته باشین به راحتی میتونین توی یک یا دو هفته به طور کامل این زبان نشانهگذاری رو یاد بگیرین و به ادامه مسیر یادگیریتون بپردازین. البته باز هم به خود شما بستگی داره که چقدر توی این راه تلاش کنین و برای رسیدن به هدفتون چقدر انگیزه داشته باشین.
مهم ترین سرفصل های دوره CSS
توی قسمت قبل تعدادی از سرفصلهای دوره html رو نام بردیم، اینجا میخوایم سرفصلهای دوره css در آموزش css و html رو بررسی کنیم.
- معرفی CSS
- نحوه کد نویسی در CSS
- فراخوانی کد CSS در HTML
- رنگها
- background در CSS
- آشنایی با کادرها، ابعاد عناصر، متن و فونتها در CSS
- مدل جعبهای
- استایلدهی به لینکها
- جدولها
- سایه
- o position
- float
- display
- طبقه بندی
- o overflow
- گرادینت رنگها
- شفافیت
- نشانههای ارتباطی
- کامنتگذاری
- شبه کلاسها
- شبه عناصر
- منوها و منوهای بازشونده
- گالری تصاویر
- انتخابگر صفات
- شمارندهها
- آیکونها
- استایلدهی عناصر form
- حاشیههای عکسدار و غیره
آموزش سی اس اس چقدر زمان میبرد؟
امر یادگیری چیزی هست که به خود شخص و تلاش و پشتکارش بستگی داره و نمیشه یک پاسخ دقیق به این سوالها بدیم اما به طور کلی و طبق تجربه میتونیم بگیم که شما توی 2 تا 4 ماه میتونین css رو به خوبی یاد بگیرین. البته این رو هم فراموش نکنین که آموزش css و htmlرو هیچوقت تموم نکنین و مدام در حال یادگیری باشین تا به موفقیت برسین.
یادگیری html و css برای چه کسانی مناسب است؟
حالا میخوایم به شما بگیم که کلاس آموزش html و css به درد کیا میخوره تا اگه جزو این گروهها نیستین برین دنبال یه دوره آموزشی که مناسب شما باشه. این دوره مناسب شماست اگه
- اگه میخواین کسب و کار آنلاین و مجازی خودتون رو راهاندازی کنین
- اگه دلتون میخواد بتونین هر وب سایتی رو طراحی کنین
- اگه دوس دارین توانایی اینو داشته باشین که توی همه قسمتهای وردپرس تغییراتی رو ایجاد کنین
- در صورتی که میخواین از طریق پروژههای طراحی درآمدزایی کنین
- کسانی که شغلشون ارائه خدمات طراحی سایت هست و الان میخوان سطح پروژههای طراحی سایت خودشون رو بالاتر ببرن.
بیشتر بخوانید: راهنمای انتخاب بهترین زبان های برنامه نویسی برای طراحی سایت
بازار کار طراحی سایت با css و htm
اول باید دوباره یادآوری کنیم که HTML و CSS زبان نشانهگذاری هستن نه زبان برنامهنویسی.
پس با آموزش css و htmlشما میتونین یک طراح وب بشین نه یک توسعهدهنده وب. طراح وب هم شغل خیلی خوبی هست اما نسبت به توسعهدهنده حقوق کمتری دریافت میکنه. یک طراح وب باید ظاهر وب سایت رو طراحی کنه اما توسعهدهنده وب باید درخواستها، پایگاه دادهها، پاسخها و بقیه کارهای دیگه رو مدیریت کنه.
در نتیجه اگه آموزش html css پروژه محور رو دیدین و این مهارتها رو به خوبی یاد گرفتین میتونین به عنوان طراح وب یا طراح UI / UX شروع به کار کنین. معمولا شرکتهای بزرگ طراحان وب رو استخدام میکنن و شرکتهای کوچیک و نوپا به دنبال چنین شخصی نیستن؛ اما اگه شما جزو کسایی هستین که دوس دارن چیزهای جدیدی یاد بگیرن، میتونین توی شرکتهای نوپا هم مشغول به کار بشین.
به طور کلی بهتره اگه فقط آموزش css و htmlرو دیدین به صورت یک فریلنسر کار کنین. وقتی که شما یک کارمند فریلنسر باشین مصرفکننده فقط از شما یک محصول تمام شده میخواد و دیگه کاری به نحوه انجام کار توسط شما نداره. برای مثال میتونین برای رستورانها و کافی شاپهای محلی وب سایت درست کنین، سعی کنین همیشه از جاوا اسکریپت استفاده کنین تا به مرور زمان با اون آشنا بشین. در نهایت هم میتونین از پروژههای مختلفی که انجام دادین به عنوان رزومه استفاده کنین و توی شرکتهای مختلف شروع به کار کنین.
منظور از آموزش html css پروژه محور چیست؟
اگه شما توی آموزش css و htmlشرکت کنین و همه استایلهای css و تگهای html رو یاد بگیرین در نهایت چی میشه؟! هیچی! فقط کلی استایل و تگ یاد گرفتین اما با این اطلاعات نمیتونین کدنویسی کنین. اما در صورتی که آموزش طراحی سایت با html و css پروژه محور رو انتخاب کنین میتونین در حین یادگیری کدها، یاد بگیرین که چجوری میشه از اونا توی طراحی یک سایت یا صفحه وب استفاده کرد. هدف شما هم قطعا همینه که بتونین بعد از آموزش html و css از مبتدی تا پیشرفته یک وب سایت طراحی کنین. پس میتونین به جای اینکه وقتتون رو توی موارد تئوری و آکادمیک هدر بدین، بر اساس نیاز بازار و به صورت پروژه محور و کاربردی این مهارتها رو یاد بگیرین.
معرفی دوره آموزش html css کندو
همونطور که قبلا هم گفتیم با آموزش css و htmlمیتونین وب سایتهای کاربر پسند، جذاب و انعطافپذیر رو ایجاد کنین یا توسعه بدین. به کمک زبان اچ تی ام ال میشه محتوا رو توی صفحه نشون داد و به کمک سی اس اس صفحه رو ارائه داد. شما میتونین با شرکت توی دوره های آموزشی html css کندو به عنوان طراح وب شناخته بشین. توی این دوره با هرچیزی که برای شروع این مسیر نیاز دارین آشنا میشین. پس اگه قصد دارین یک طراح وب بشین، همین الان توی این دوره کندو ثبتنام کنین و تخصص استادهای حرفهای و بینظیر ما بهرهمند بشین.
کلام آخر
توی این مطلب از کندو سعی کردیم در مورد طراحی وب سایت با html و css صحبت کنیم. اگه شما هم قصد دارین توی دوره آموزش css و htmlشرکت کنین، این مطلب رو کامل بخونین تا با مباحث و موارد مهم آشنا بشین. در صورتی که به دنبال کلاس آموزش css و htmlهستین هم میتونین روی مجموعه کندو حساب کنین و از آموزشهای حضوری یا آنلاین ما استفاده کنین تا وارد این دنیای جذاب بشین و از این شغل درآمد خوبی رو کسب کنین.
سوالات متداول آموزش css و Html
1 – آیا یک طراح وب حتما باید زبان html رو یاد بگیره؟
اگه شما قصد دارین که توی قسمت frontend سایت کار کنین باید حتما html رو به طور کامل یاد بگیرین.
2 – آیا html یک زبان برنامهنویسی هست؟
نه، html یک زبان برنامهنویسی نیست بلکه یک زبان نشانهگذاری هست که به شما کمک میکنه اسکلت یا ساختار صفحه وب خودتون رو مشخص کنین و محل قرار گرفتن هر المنت رو با هدف قرارگیریش مشخص کنین.
3 – آیا آموزش css و html کار سختی هست؟
نه، این زبانها و مخصوصا زبان html خیلی آسون هستن و شما میتونین به راحتی اونا رو یاد بگیرین. همچنین اگه تازه وارد دنیای برنامهنویسی شدین، بهترین انتخاب همین زبان html و css هست.
4 – آموزش طراحی سایت با html و css پروژه محور چیه؟
یعنی شما در حین اینکه موارد تئوری رو یاد میگیرین، میتونین به صورت عملی کدنویسی کنین و اینطوری خیلی بهتر مهارتها تو ذهنتون شکل میگیرن و حرفهایتر میشین.
سرفصل های این دوره
- معرفی DOCTYPE
- آموزش روش آماده سازی بستر طراحی وب و نرم افزارهای مربوطه
- معرفی Project Structure در طراحی وب
- ارائه طبقه بندی تگ ها مانند Test Level و Block Level و …
- بررسی نکات مربوط به List ها
- بررسی پاراگراف ها، Span و کلیه تگ های طبقه بندی شده
- معرفی مفهوم Attribute
- معرفی مفهوم Comment و دلائل استفاده از آن
- معرفی و ارائه مثال از تگ های مربوط به هر طبقه بندی
- بررسی استانداردهای نامگذاری المان ها
- بررسی مفهوم Validation در اسناد Html
- معرفی CSS
- بررسی نقش CSS در آرایش تگ ها
- بررسی نکات مربوط به فونت مانند Size و Weight و …
- معرفی انواع فونت ها و پسوندهای مربوطه
- بررسی Icon ها و فونت های گوگل
- بررسی روش استفاده از کاراکترهای خاص در سند HTML
- معرفی مفهوم Hyper Link و نکات مربوط به Navigation
- آشنایی با مفهوم Anchor و Hash
- ایجاد Shortcut برای لینک ها
- بررسی Site Map و روش ایجاد آن
- بررسی روش ایجاد منو و انواع آن
- بررسی روش های مختلف آدرس دهی لینک ها مثلا Internal و External
- بررسی نکات جدید HTML5 در مورد لینک ها مانند Download
- بررسی تگ Table و اجزا مختلف آن
- بررسی معایب و مزایای Table
- بررسی نحوه استفاده از Table برای چیدمان
- بررسی نحوه اختصاص اندازه به المانها
- معرفی قابلیت های Design Envirement مانند منوها و قسمت های مختلف Dream Weaver
- بررسی روش های مختلف اعمال Style روی تگ ها مانند Inline، Internal، External
- معرفی انواع Selector ها در CSS
- بررسی نحوه استفاده از تصاویر در سند HTML
- بررسی انواع File Path
- بررسی مفهوم Save/Export For Web
- بررسی نحوه Load شدن تصاویر
- بررسی پسوندهای مختلف تصاویر
- بررسی تصاویرPNG و مشکلات نمایشی مرورگرها
- بررسی نکات مربوط به تصاویر مانند Transparency
- بررسی Image Map
- بررسی نحوه ویرایش و بهینه سازی تصاویر برای وب با نرم افزارهای مربوطه
- بررسی نحوه استفاده از تصاویر در Background
- بررسی نکات مربوط به استفاده از تصاویر در Background مانند Repeat و …
- بررسی نحوه استفاده از صدا و تصویر در Background
- معرفی IFrame و روش استفاده از آن
- بررسی روش استفاده از Google Map و سایر موارد مرتبط با IFrame
- ایجاد انیمیشن با تصاویر و ابزارهای مربوطه
- بررسی نحوه استفاده از رنگ
- بررسی نحوه استفاده از فونت
- بررسی نکات مربوط به Formatting در Table
- بررسی نکات جدید HTML5 در جداول
- بررسی مفهوم Layout های Tableless
- بررسی Div و نکات مربوطه در حیطه Positioning
- بررسی روش های تقسیم بندی صفحه
- بررسی مفهوم Margin و Padding
- بررسی Border و نکات مربوطه
- بررسی نکات مربوط به Text مانند Direction ، Decoration، Align و …
- بررسی نکات مربوط به Positioning در css
- بررسی نکات حرفه ای تر css مانند Animation و Translation
- بررسی انواع Effect ها در CSS3
- بررسی انواع Layout ها
- بررسی Localization برای زبانهای RTL
- معرفی مفهوم Float و Absolute و…
- معرفی مفاهیم مرتبط با Boxing
- بررسی Form و انواع Input ها
- معرفی تگ های مفهومی HTML5 مانند مفاهیم موارد زیر
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
- و بررسی نقش هر یک
- بررسی امکانات مرتبط با شبکه های اجتماعی
- طرح مشکل نمایش وب سایت در مرورگرهای متفاوت و نکات مربوطه
- بررسی Drag & Drop
- بررسی Canvas و نحوه استفاده از آن
- بررسی SVG و نحوه استفاده از آن
- معرفی Edge و Illusttator و کاربرد آنها
- معرفی Mute و کاربرد آن
مخاطبین این دوره
هر مبتدی که می خواهد به عنوان طراح وب شغل خود را ایجاد کند ، می تواند در این دوره شرکت کند.
آنچه در این دوره خواهید آموخت
- HTMLبسیار انعطاف پذیر است و در همه مرورگرها پشتیبانی می شود.
- کاربر پسند و یک فناوری باز.
- عملکرد بهتری می دهد.
- CSS کنترل قدرتمندی بر ارائه یک سند HTML فراهم می کند.
- CSS چندین بار صرفه جویی می کند زیرا می تواند در بسیاری از صفحات HTML مورد استفاده مجدد قرار گیرد.
- از CSS می توان برای ایجاد صفحات وب پاسخگو استفاده کرد ، که در چندین دستگاه سازگار هستند. بسته به اندازه صفحه یا دستگاهی که در آن مشاهده می شود ، می توان به صفحه های وب اجازه نمایش متفاوت داد.
درخواست مشاوره رایگان یا رزرو دوره
"*" indicates required fields