Front End
- HTML בסיסי
- תגיות בסיסיות ב-HTML
- טפסים ב-HTML
- קצת על HTML5
- מבוא ל-CSS ושילוב בעמוד שלנו
- CSS Selectors
- CSS בסיסי
- Media Queries
- Flex Box
- Grid
- Bootstrap CSS
- שלום JavaScript
- משתנים ב-JavaScript
- תנאים ב-JavaScript
- Switch Statement
- Ternary Operator
- Loops
- while
- do While
- for
- Objects
- for in Loop
- Arrays
- for of
- Scope
- Functions
- Events + DOM
- DOM Access
- XML & JSON
- Storages in JavaScript
- Session Storage
- Local Storage
- Cookies
- inline, anonymous, arrow functions
- Array Callbacks
- Exception Handling
- Sync VS Async
- Promise Object
- async-await
- Strict Mode & IIFE
- AJAX
- Complexity
- שלום TypeScript
- התקנות
- פתיחת פרויקט ראשון
- TypeScript Basics
- Variables
- Functions
- OOP
- OOP Basic
- Inheritance
- Polymorphism
- שלום React
- מבוא
- התקנות
- פרויקט ראשון
- CSS Leaking
- Layout
- Interpolation
- Conditional Rendering
- Lists
- Events Basics
- Props
- State, useState
- React Hooks
- useEffect
- Routing
- Ajax Requests
- Route Parameter
- useForm
- Redux
- Authorization & Authentication
- תהליך הטמעת Auth מלא בפרויקט
- Interceptors
Back End
- Node.js
- מבוא והגדרות
- Modules
- Global Object
- Versioning System
- Node.js + TypeScript
- HTTP Protocol
- Web Service
- REST API
- Layered REST API
- Middleware
- Error Handling
- Auth
- Upload Images
- Server Images
- Database
- שלום MySQL
- XAMPP
- Relations
- phpMyAdmin
- MySQL Basics
- Designer
- Create Relations
- Insert Data
- MySQL Common Commands
- Using MySQL with REST API
- CORS
- Project 1
Dev Ops
- שלום Docker
- Containers
- Images
- Start & Stop
- Docker Layers
- yaml
- Docker Compose
- Volumes
- Error Handling
- Hot Reloading
- Anonymous volume
- Packing Full System
- Introduction to AWS
- Setting up AWS Account and IAM
- AWS EC2 (Elastic Compute Cloud)
- AWS S3 (Simple Storage Service)
- AWS RDS (Relational Database Service)
- AWS Lambda
- AWS API Gateway
- AWS Elastic Beanstalk
- AWS CloudFormation
- AWS DevOps Tools
סידור תוכן באמצעות Grid
שינוי הגדרות עיצוב לפי גודל המסך באמצעות Media Queries
גולשים מגיעים מהמון מכשירים שונים אלינו לאתר, והאתר צריך להתאים את עצמו לפי גודל המסך.
המנגנון שמאפשר לנו לכתוב אתר שמתאים לכל המכשירים נקרא Media Queries. אתר שיודע להתאים את עצמו בצורה טובה לכל מכשיר נקרא אתר רספונסיבי.
מדיה קוורי הוא בסך הכול דרך להגדיר שקטע מסוים ב-CSS יבוצע רק על ידי המכשירים שיש להם מאפיינים מסוימים. כל דפדפן יודע על איזה "מכונה" הוא רץ, מה גודל המסך אצלו, האם יש לו עכבר או זה מסך מגע ועוד עשרות פרמטרים.
בפיתוח אתר רספונסיבי אנחנו נשלח לדפדפן הוראות והדפדפן לפי המכונה הנוכחית עליה הוא רץ יחליט איזה קטעי CSS רלוונטיים עבורו.
נראה דוגמה של Media Queries:
קובץ CSS
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
הקוד הזה בתוך CSS אומר לדפדפן שאם רוחב המסך שלו הוא לפחות 700 פיקסלים, עליו לצבוע את הרקע בוורוד.
הרבה פעמים בפיתוח אתר או מערכת נתחיל מהמסך הקטן ביותר ונכתוב CSS מדורג, כך שככל שרוחב המסך יגדל כך המערכת תנצל טוב יותר את המקום הפנוי. התחביר במקרה הכללי יהיה משהו בסגנון הזה:
/* Small Devices */
@media only screen and(min-width:600px) { .... }
/* Medium Devices */
@media only screen and(min-width:768px) {....}
/* Large Devices */
@media only screen and(min-width:992px) {....}
/* Extra large devices */
@media only screen and(min-width: 1200px) {...}
למרות שלרוב משתמשים ב- min/max width יש עוד המון מדיה קווריס שיכולים להיות רלוונטיים לסיטואציות מסוימות. לדוגמה השאילתה orientation תעזור לנו להבין אם הנייד נמצא במצב "שוכב" או "עומד"
@media (orientation: portrait) {...}
@media (orientation: landscape) {...}