آموزش طراحی صفحات وب ریسپانسیو با HTML5 و CSS3 - آخرین آپدیت

چیدمان صفحه وب با استفاده از CSS floats Layout a Web page using CSS floats

• مقدمه و زمینه‌سازی Context Setting

• جریان عادی سند (Normal Document Flow) Normal Document Flow

• تماشا و تمرین: جریان عادی سند Watch and Repeat : Normal Document flow

• ایجاد چیدمان‌های چند ستونی با استفاده از floats و clearfix Create multiple column layouts using floats and clearfix​

• تماشا و تمرین: CSS floats Watch and Repeat : CSS floats

• تماشا و تمرین: Clear floats Watch and Repeat : Clear floats

• تماشا و تمرین: ترفند CSS float clearfix Watch and Repeat : CSS float clearfix hack

• توضیح موقعیت‌دهی Relative و Absolute در CSS Describe the relative and absolute positioning of CSS​

• تماشا و تمرین: موقعیت‌دهی در CSS Watch and Repeat : CSS positioning

• استفاده از z-index و ترتیب پشته برای تغییر ترتیب رندر عناصر HTML Use z-index and stack order to change the rendering order of HTML elements​

• تماشا و تمرین: Z-index و ترتیب پشته Watch and Repeat : Z-index and stack order

• تمرین عملی ۱ Practice Brief1

• تمرین عملی ۲ Practice Brief2

• بررسی و تحلیل تمرین Practice Debrief

• توضیحات چالش Challenge Brief

• بررسی و تحلیل چالش Challenge Debrief

• جمع‌بندی یادگیری Learning Consolidation

توسعه صفحه وب ریسپانسیو با استفاده از CSS مدرن Develop a responsive web page using modern CSS

• مقدمه و زمینه‌سازی Context Setting

• توسعه صفحات وب ریسپانسیو با رویکرد Mobile First Develop responsive web pages using mobile-first approach​

• به‌کارگیری Media Queries و نقاط شکست (Breakpoints) در CSS Apply CSS media queries and breakpoints​

• تماشا و تمرین: CSS media queries Watch and Repeat : CSS media queries

• ایجاد طراحی ریسپانسیو با استفاده از تصاویر منعطف Create responsive web design using flexible images ​

• تماشا و تمرین: تصاویر منعطف Watch and Repeat : Flexible Images

• به‌کارگیری ویژگی‌های display مانند Flexbox و Grid Apply CSS display properties like flexbox and grid​

• تماشا و تمرین: سیستم گرید ریسپانسیو Watch and Repeat : Responsive grid system

• تماشا و تمرین: Flex container Watch and Repeat : Flex container

• تماشا و تمرین: چیدمان گرید (Grid layout) Watch and Repeat : Grid layout

• طراحی صفحه وب ریسپانسیو با استفاده از الگوهای Fluid و Layout Shifter Design a responsive web page using mostly fluid and layout shifter design pattern​

• تمرین عملی ۱ Practice Brief1

• تمرین عملی ۲ Practice Brief2

• بررسی و تحلیل تمرین Practice Debrief

• توضیحات چالش Challenge Brief

• بررسی و تحلیل چالش Challenge Debrief

• جمع‌بندی یادگیری Learning Consolidation

توسعه صفحه وب ریسپانسیو با استفاده از بوت‌استرپ Develop a responsive web page using Bootstrap

• مقدمه و زمینه‌سازی Context Setting

• معرفی فریم‌ورک بوت‌استرپ Describe the Bootstrap framework​

• به‌کارگیری گرید Flexbox بوت‌استرپ با رویکرد Mobile First برای ساخت چیدمان Apply Bootstrap's mobile-first flexbox grid to build layouts​

• تماشا و تمرین: سیستم گرید بوت‌استرپ Watch and Repeat : Bootstrap grid system

• استفاده از اجزای مختلف بوت‌استرپ Use various Bootstrap components

• تماشا و تمرین: جداول بوت‌استرپ Watch and Repeat : Bootstrap tables

• تماشا و تمرین: نوار ناوبری (Navbar) بوت‌استرپ Watch and Repeat : Bootstrap Navbar

• تماشا و تمرین: اجزای بوت‌استرپ مانند دکمه‌ها و کارت‌ها Watch and Repeat : Bootstrap components like button and cards

• تماشا و تمرین: اجزای بوت‌استرپ مانند Carousel و فرم‌ها Watch and Repeat : Bootstrap components like carousel and forms

• به‌کارگیری ابزارهای کمکی (Utilities) بوت‌استرپ Apply Bootstrap utilities

• تماشا و تمرین: ابزارهای نمایش، فاصله‌گذاری و Flex در بوت‌استرپ Watch and Repeat : Bootstrap display, spacing and flex utilities

• طراحی صفحه وب ریسپانسیو با استفاده از الگوی Column Drop Design a responsive web page using column drop design pattern​

• تمرین عملی Practice Brief

• بررسی و تحلیل تمرین Practice Debrief

• توضیحات چالش Challenge Brief

• بررسی و تحلیل چالش Challenge Debrief

• جمع‌بندی یادگیری Learning Consolidation