توضیحات

دوستان این دوره با کیفیت و محتوای بهتری باز تولید شده که با کلیک روی لینک آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور وارد دوره میشوید.

HTML برگرفته از حروف اول عبارت HyperTextMarkupLanguage می باشد و به عنوان یک زبان نشانه گذاری متن ( زبان استاندارد صفحات وب ) می باشد. معمولا در یک صفحه ی موجود بر روی وب مجموعه ای از متن ها، عکس ها، بخش بندی های مختلف وجود دارد، به کمک تگ ها و کدهایی که HTML در اختیارتان قرار می دهد، می توانید یک ساختار مشخص از اطلاعات را در این قسمت ها  به وجود آورید و در معرض نمایش بازدیدکنندگان قرار بدهید. 

Css کوتاه شده یا مخفف عبارت Cascading Style Sheets می باشد که قابلیت صفحه آرایی؛ استایل دهی و زیبا سازی صفحات وب را برای طراحان سایت فراهم می سازد. در واقع ساختار یک صفحه با استفاده از HTML تعیین می شود و سپس با به کار بردن کدهایی دیگر به این ساختار و چیدمان استایل داده می شود. تمامی رنگ ها، ابعاد و اندازه ها، حاشیه ها، مکان قرارگیری، فونت ها و سایر خصوصیات اجزای یک صفحه ی وب، با استفاده از CSS تعیین خواهند شد.

دوره های پیشنهادی، بعد از گذراندن این دوره :


HTML CSS طراحی وب طراحی سایت

مدرس دوره علی شیخ
مدت دوره 04:51:23
تعداد ویدیو 28

وضعیت دوره : کامل شده
قیمت دوره : رایگان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • سلام و عرض ادب
    لطفا میشه فایل های هر جلسه رو قرار بدین؟
    توی فایل تمرین های دوره ای که قرار دادین فقط پروژه ی آخر هست
    خیلی ممنون

    • سلام وقت بخیر.
      قسمت های که فایل های تمرینی ندارند ساده هستند و نیازی نداشته،اما توی دوره های جدید تر همه ای فایل ها را قرار دادیدم.عذر خواهی میکنم.

  • با سلام اقای شیخ ممنون از پاسخاتون ک سریع جواب میدین مرسی استاد شما اموزش پایتون یا سی شارپ یا فریمورکهایی مثل انگولار قرار میدین؟
    برای فول استک شدن وب منظورمه

    • سلام وقت بخیر.
      خودم به احتمال زیاد خیر و احتمالا توسط مدرس دیگری قرار بدیم،برای فول استک دوره های php و لاراول و vue را هم قرار دادیم

    • سلام وقت بخیر.
      بنظر من خیر.در مورد html کامل صحبت شده و css خودش دنیای هست که توی این دوره در مورد یکسری از موارد صحبت میشه و بقیه اش هم توی دوره های جداگانه مثله flexbox ، انیمیشن و ... توی وبسایت قرار گرفته.

  • با سلام و خسته نباشید و تشکر از دوره های خوبتون
    اول باید یه تشکر ویژه بکنم بخاطر رایگان کردن خیلی از دوره هاتون که البته آشنا با دوره ها مسلما باعث رغبت بیشتر برای خرید بقیه دوره ها هم میشه
    اینکه چارت آموزشی قرار دادید هم بسیار خوب هست و باعث میشه کسایی که مثل من در نقطه آغاز راه قرار دارند خیلی تو این فضا گم نشن

    چقدر خوب میشد اگه دانلود یکجای دوره رو هم قرار میدادید

    • سلام وقت بخیر.
      ممنون از شما.توی وب سایت قسمت چارت آموزشی هست که میتونید مطالعه کنید.

  • با عرض سلام و خسته نباشید
    اون فایل سورس کد هایی که گفتید به صورت زیپ داخل سایت میگذارید برای html و css کدوم قسمت سایت قرار گرفتن؟؟

    • سلام وقت بخیر.
      شما دوره را باز کنید، دکمه ای آبی رنگ با متن دانلود فایل های تمرینی دوره هست که با کلیک روش سورس کد براتون دانلود میشه

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

  • باسلام و ادب
    هزاران بار متشكرم از سايت خوب و آموزش هاي رايگان و خوب و كامل شما.
    بسيار ارزش مند هستيد.
    فايل هاي تمريني را دانلود كردم. آيا امكان دانلود ويدئو هاي آموزشي هم هست؟ چگونه؟

    • سلام وقت بخیر.
      ممنون از شما که به ما انرژی میدین❤
      برای دانلود قسمت ها، شما وارد هر قسمت از دوره که بشید دکمه ای با عنوان "دانلود این قسمت" هست که با کلیک، اون قسمت از دوره دانلود میشه

  • با سلام و ادب
    ابتدا بسيار سپاس گزارم از آموزشهاي شفاف و همچنين اينكه پاسخگوي سوالات هستيدو اميدوارم خدا براتون خير بخواد.
    خواستم راهنمايي بفرماييد در مورد چگونگي ساخت سايت هايي كه با فتوشاپ يك PSD از يك صفحه سايت را مي گيريم و با HTML , CSS طراحيش مي كنيم اما آيا براي صفحات داخلي سايت هم بايد دوباره PSD همون صفحه را با HTML , CSS بسازيم و يا اگر از وردپرس استفاده مي كنيم چطوري ميشه براي درست كردن صفحات داخلي از وردپرس استفاده كنيم.
    خيلي عذرخواهي مي كنم اگر سوالم خيلي ابتدايي هست اما واقعا نمي دونم روند كار چطور هست بايد سايتي شركتي طراحي كنم با چند صفحه، اما نمي دونم همه صفحاتش را بايد با HTML , CSS طراحي كنم، و آيا بايد PHP هم يادبگيرم يا وردپرس مي تونه كمكم كنه يا نه؟
    خيلي ممنون ميشم راهنماييم بفرماييد.

    • سلام وقت بخیر.
      ممنون، خداروشکر که دوره مفید بوده براتون❤
      ببینید ما در طراحی سایت، بخش فرانت اند و بک اند داریم.
      که این دو بخش از همه دیگه جدا هستند.
      در بخش فرانت اند شما از html و css استفاده میکنید و در بخش بک اند از زبان های برنامه نویسی مثله php ،پایتون و ...
      در بخش فرانت اند شما نیاز به یک طراحی برای ui سایت دارید، که میتونید در ابتدا توی فتوشاپ یا نرم افزار های دیگه، طراحی اولیه سایت رو بزنید (تمام صفحات سایت) و به کارفرمای پروژه نشون بدید و اگه تایید کرد شما با html و css پیاده سازی میکنید.
      پس تمام صفحات رو با فتوشاپ یا نرم افزار های دیگه میزنید و بعد از اون پیاده سازی میکنید.استفاده از فتوشاپ اختیاری هست و شما میتونید مستقیم html و css رو بزنید بستگی به کارفرما و مهارت شما داره.
      تا اینجا سایت شما استاتیک هست و مرحله بعدی پویا سازی سایت هست (بک اند).
      شما در بک اند میتونید از زبان های برنامه نویسی مختلف استفاده کنید.
      به عنوان مثال میتونید از php خام استفاده کنید و یا فریمورک های که برای php هست و یا از وردپرس استفاده کنید، شما میتونید قالب سایتی که ایجاد کرده اید رو به وردپرس وصل کنید که دوره های فارسی زیادی براش توی اینترنت هست که میتونید مشاهده و استفاده کنید

  • سلام واقعا ممنون از آموزش های عالیتون.
    یه سوال داشتم ازتون من یک تازه کارم و باید پروژه تحویل بدم تا آخر شهریور، اومدم سایت شما html,css,javascript رو دانلود کردم و همچنین bootstrap۴ و node.js رو حالا وقتی به فیلماتون نگاه می کردم دیدم گفتین که باید php و فریم ورک لاراول و هم یادبگیرم که متاسفانه برا اونا وقت کافی ندارم.
    حالا سوالم اینه که به نظرتون می تونم با استفاده از html,css,javascript و bootstrap۴ و node.js یه سایت کامل طراحی کنم و براش هاست و دامنه بخرم و تکمیل کنم یا نه؟؟
    خلاصه اینا کافین یا باید php و laravel رو هم یاد بگیرم؟؟؟

    • سلام ممنون از شما❤
      ببینید ما دو بخش در دنیای وب داریم یکی فرانت اند و دیگری بک اند.
      فرانت اند میشه همون ظاهر وب سایت که html و css و javascript هست که از بوت استرپ هم به عنوان فریمورک html و css برای راحتی کار استفاده میکنیم.
      بک اند هم کارش ارتباط با دیتابیس و تبدیل وبسایت به یک سایت پویا هست که میتوتید از زبان های برنامه نویسی مختلف مثله php و node.js و یا پایتون و ... در بک اند استفاده کنید.
      برای شما که تازه کار هستید یه مقدار node سخت و پیچیده هست مخصوصا کانفیگ سرور ولی اگه با php خام و یا لاراول که فریمورک php هست سایت رو بزنید خیلی راحتر هست و کانفیگ سرور هم نمیخواد و شما میتونید روی سرور های اشتراکی با کمترین هزینه سایت را بالا بیارید

  • سلام ببخشید من چند تا سوال داشتم که خیلی منو گیج کرده
    یکی اینکه ما هنگامی که از تگ مفهومی استفاده میکنیم دیگه نباید از تگ div استفاده کنیم؟
    مثلا فرض کنید ما یک هدر داریم که داخل هدر یک لوگو و یک باکس سرچ و یک نو بار داریم به این صورت:

    <header>

    
    
    <nav>
    <ul>
    <li><li/>
    <ul/>
    <nav/>
    <"img src="logo.png>
    <"input type="text" placeholder="search>
    <header/>

    حالا اگر بخوایم داخل هدر این هارو تقسیم کنیم باید چیکار کنیم؟
    اینطوری درسته؟

    <header>```

    <"div id="navbar-right>
    <nav>
    <ul>
    <li><li/>
    <ul/>
    <nav/>
    <div/>

    <"div id="logo>
    <"img src="logo.png>
    <div/>

    <"div id="search>

    <"input type="text" placeholder="search>
    <header/>
    ```
    در اینجا من هدر رو به بخش های باکس سرچ نوبار و لوگو تقسیم کردم
    آیا کاری که کردم واقعا نیازه؟
    فکر کنم اگر ما از div استفاده نکنیم هم میتونیم به هر کدوم از المنت ها class یا id بدیم و در css به اون ها استایل بدیم تا در جای درستی قرار بگیرند
    حالا چه کاریه از div استفاده کنیم؟
    حالا این از هدر بود
    شما در آموزش اشاره کردین به تگ های مفهومی article و section
    تا جایی که من میدونم تگ section برای بخش بندی هستش دقیقا مثل div ولی تگ section فرقش با div اینه که تگ section یک تگ مفهومی هستش و فرق خاصی با div نداره
    article هم هروقت خواستیم مطلبی داخل سایت بذاریم میتونیم اون رو با تگ section به بخش های هدر کانتنت و فوتر تقسیم بندی کنیم
    اما در اینجا چند سوال پیش میاد

    اگر ما مثلا در پست های سایتمون با تگ div به بخش های مختلف تقسیم کنیم اون مقاله رو مشکلی هست ؟
    آخه من متوجه نمیشم کاربرد استفاده از تگ های section و div رو خب ما راحت و همیشه میبینم که کلی از تگ div استفاده کردم و موقع استایل دادن خیلی عذاب میکشم چون نمیدونم برای دادن هر استایلی کدوم رو انتخاب کنم کلا گیج کننده میشن
    چون من میخوام بدونم برای ساخت یک صفحه ساده تا حرفه ای بهترین کار چیه
    چون کد های سایت های مختلف رو نگاه کردم همه از div استفاده میکنند و تک تک عناصر سایتشون رو جدا میکنند
    اما من بدنبال راهی هستم که کمتر نیاز باشه از کدهای html زیادی استفاده کنم و کدهام رو بتونم فشرده تر کنم تا بتونم کیفیت کدنویسی خودم رو بالا ببرم
    ببخشید پیامم طولانی شد ولی من کلی آموزش صفر تا صد دیدم هم html و هم css اما هنوز مشکل دارم هنگام طراحی سایت و بعضی اوقات چیزایی رو در سایت های مختلف میبینم که وقتی نمیتونم طراحی کنم اعتماد به نفسم میاد پایین
    ممنون میشم کمکم کنید تا بتونم راهمو پیدا کنم و مثل شما استاد عزیز بتونم حرفه ای باشم و بتونم هر چیزی رو بدون دیدن کدش طراحی کنم سپاس از وقتی که میذارید

    • سلام وقت بخیر.
      توی html5 ویژگی جدیدی اضافه شد به اسم تگ های مفهومی یعنی اینکه نشون بده این تگ کارش چیه!؟!؟
      مثلا من برای هدر میام div قرار میدم و داخلش کد های مربوط به هدر را قرار میدم و از طرفی میام برای فوتر هم تگ div قرار میدم و کدهای فوتر داخلش قرار میدم.
      برای اینکه کدها تمیز تر باشه و خوانایی بیشتر داشته باشه و متور های جستجو مثله گوگل خیلی راحتر کد های html شما را index یا بخونن امدن از تگ مفهومی استفاده کردن
      گفتن آقا ما یه div داشتم داخلش کد های هدر قرار دادیم، بیایم و بجای div بزاریم header.
      اینجوری وقتی از تگ header استفاده کردم میفهمم که توی این تگ کد های هدر هست.
      پس تگ header (یا تگ های مفهومی) هیچ فرقی با div ندارند ما به این دلیل ازشون استفاده میکنیم که کد ها تمیز تر و قابل خواندن باشه و از همه مهتر توی SEO تاثیر داره به دلیل اینکه متورهای جستجو خیلی بهتر سایت ما رو درک میکنن.

  • سلام خسته نباشید و ممنونم از آموزش خوبتون.
    ببخشید من به صورت آفلاین کار می کنم و آیکن ها که از سایت fontawsom هستند آفلاین کار نمیکنن درسته؟ چون وقتی آنلاین میشم درست نشون داده می شه. راهکار چیه؟

    • سلام وقت بخیر.
      برای cdn نیاز هست که شما به اینترنت وصل باشید و اون کد ها رو از سرور بخونید و به پروژه اضافه کنید، حالا بجای اینکه از سرور خارجی بخونید میتونید خودتون اون لینک cdn را کپی کنید و توی مرورگر وارد کنید کد ها را مشاهده میکنید که میتونید کد ها را کپی کنید و توی یک فایل به هر اسمی با پسوند css ذخیره کنید و اون فایل را به پروژه اضافه کنید.

    • سلام وقت بخیر.ممنون
      دلیل اینکار این هست که وقت ویدیو زیاد نشه و زمان بیشتری برای توضیح دادن کد ها باشه، و شما خودتون خط به خط کد ها را تایپ و تمرین کنید.
      ممنون بابت نظر مفیدتون توی دوره های دیگه این مورد را در نظر میگیریم❤

    • شما نباید با دانلود منیجر یا نرم افزار IDM دانلود کنید و باید با خوده مرورگر اینکارو انجام بدید، از کروم استفاده میکنید پایین سمت چپ نمایش میده شروع دانلود را و فایرفاکس بالا سمت راست.
      برای دانلود ویدیو ها شما یک فایل mp4 دانلود میکنید و برای فایل تمرینی یک فایل rar دانلود میکنید

    • سلام وقت بخیر.
      برای دانلود ویدیو و فایل های آموزشی نباید مشکل داشته باشید.لطف کنید دانلود منیجر را غیرفعال کنید و با خوده مرورگر دانلود کنید.

  • سلام استاد میشه یه آموزش در مورد ساخت منوبار سایت درست کنید من خیلی گیرم تو این مبحث اگه هم میتونید بگید کی فیلم رو درست میکنید!

    • سلام ساخت navbar ساده هست و از تگ ul استفاده میکنید.که توی این دوره در قسمت ۲۲ ایجاد کردیم با float ولی توی دوره flexbox که با flexbox آشنا میشیم با اون ایجاد میکنیم.دوره flexbox هم مشاهده کنید.همچنین میتونید سرچ کنید navbar با html و css توی اینترنت و نمونه کد ببینید و سعی کنید خودتان پیاده سازی کنید

    • وردپرس یک مدیریت محتوا هست و با زبان php نوشته و در سمت بک اند هست ولی html و css سمت فرانت اند هست و اصلا با هم مقایسه نمیشن بلکه مکمل هم هستن

    • نه اینجوری نیست که حتما باید وردپرس ببینید، فرانت و بک اند دو بحث کاملا جدا هستند.شما فرانت از html و css استفاده میکنید در سمت بک اند میتونید از زبانهای بک اند مثله php، پایتون و ... و یا حتی از وردپرس که با زبان php نوشته شده استفاده کنید.