طراحی Layout یک سایت ساده معمولا با استفاده از کدهای ساده CSS و دستوراتی مانند float و… انجام می شود.

در این آموزش تصویری با مقدمات طرح بندی صفحات وب با CSS آشنا می شوید.
این دوره آموزشی محصول موسسه TreeHouse است.

سرفصل های دوره:

  • کار با CSS
  • نحوه اسکریپت نویسی در CSS
  • تنظیم CSS
  • کار با Layout های یک wrapper
  • کار با استایل ها
  • کار با ویژگی های font و text در css
  • نحوه حاشیه نویسی
  • کار با محتوای صفحه
  • کار با دستورات درون خطی
  • طرح بندی صفحه با float
  • نحوه کنترل عناصر
  • ایجاد سربرگ و پاورقی
  • نحوه طراحی با CSS
  • نحوه تست و اشکال زدایی برنامه
  • و…

عنوان دوره: TreeHouse CSS Layout Basics
سطح: مقدماتی
نویسنده: Guil Hernandez


TreeHouse CSS Layout Basics

Guil Hernandez

Learn to work with common layout and positioning methods used in web design. In this course, you'll get hands-on practice with basic CSS layout techniques like display modes and floats. You'll use your new CSS layout skills to build the layout for a simple web page. Then learn to enhance the layout using relative, absolute and fixed positioning.
Getting Started with CSS Layout
This stage covers layout tips and techniques used by web designers. You'll learn about CSS resets, layout wrappers, creating a sticky footer, and more.
Controlling Layout with CSS Display Modes
Learn to control elements in your layout using common CSS display modes like block, inline, and inline-block. Understanding the differences between these display settings will help take your CSS layouts to the next level.
Page Layout with the Float Property
Learn how to use the float property for positioning and layout. You'll also learn about the default browser quirks you'll face when using floats and how to prevent them
CSS Layout Project
Now it's time to challenge your new layout skills and put them to use by completing a CSS layout project.
Positioning Page Content
Now that you know the basics of CSS layout, it's time to learn another important CSS layout technique. In this stage, you'll learn to position elements anywhere on the page with relative, absolute, and fixed positioning.

What to Expect
CSS Reset with Normalize
Creating a Layout Wrapper
Why Vertical Margins Collapse
Centering Page Content and Creating a Full-width Header
Layout Wrapper Challenge
2 objectives
Using a Mobile First Approach
Creating a Sticky Footer
Getting Started with CSS Layout Review
6 questions