![THINKING ABOUT THE LAYOUT
THINK BUILD ARCHITECT
ATOMIC DESIGN
COMPONENT
[Image taken from bradfrost.com]
• Modular building blocks that make up interfaces;
• Held together by the layout of the page;
• Re-usable across a project, and between different projects;
• Independent, allowing us to use them anywhere on the page.
COMPONENT-DRIVEN DESIGN](https://image.slidesharecdn.com/slides-students-c04-240118153941-561fbff8/85/slides-students-C04-pdf-51-320.jpg)
![SELECTING OUR BREAKPOINTS: A GOOD APPROACH
[http://gs.statcounter.com/screen-resolution-
stats#monthly-201608-201708-bar]
0px 2000px
1000px
800px
600px
400px
200px 1200px 1400px 1600px 1800px
360
x
640
375
x
667
320
x
568
480
x
800
720
x
1280
768
x
1024
1024
x
768
1280
x
800
1366
x
768
1440
x
900
1280
x
1024
1920
x
1080
1600
x
900
PHONE ONLY
TABLET
PORTRAIT
TABLET
LANDSCAPE
DESKTOP
BIG DESKTOP](https://image.slidesharecdn.com/slides-students-c04-240118153941-561fbff8/85/slides-students-C04-pdf-113-320.jpg)
slides-students-C04.pdf
- 1. SECTION 1 — WELCOME, WELCOME, WELCOME!
- 2. TABLE OF CONTENTS: THEORY LECTURES (CLICK THE TITLES) Three Pillars of Writing Good HTML and CSS (Never Forget Them!) → How CSS Works Behind the Scenes: An Overview → How CSS is Parsed, Part 1: The Cascade and Speci fi city → How CSS is Parsed, Part 2: Value Processing → How CSS is Parsed, Part 3: Inheritance → How CSS Renders a Website: The Visual Formatting Model → CSS Architecture, Components and BEM → What is Sass? → Review: Basic Principles of Responsive Design and Layout Types → Mobile- fi rst vs Desktop- fi rst and Breakpoints → An Overview of Responsive Images → Why Flexbox: An Overview of the Philosophy Behind Flexbox → Why CSS Grid: A Whole New Mindset → 4 3 2 1 5 6 7 8 9 10 11 12 13
- 3. SECTION LECTURE WELCOME TO THE MOST ADVANCED CSS COURSE EVER! WELCOME, WELCOME, WELCOME!
- 4. Natours Project — Setup and First Steps (Part 1) 02 How CSS Works: A Look Behind the Scenes 03 Introduction to Sass and NPM 04 Natours Project — Using Advanced CSS and Sass (Part 2) 05 Natours Project — Advanced Responsive Design (Part 3) 06 Trillo Project — Master Flexbox! 07 A Quick Introduction to CSS Grid Layouts 08 Nexter Project — Master CSS Grid Layouts! 09
- 5. SECTION LECTURE WELCOME, WELCOME, WELCOME! SETTING UP OUR TOOLS
- 6. SECTION 2 — NATOURS PROJECT PART 1
- 7. SECTION LECTURE NATOURS PROJECT — SETUP AND FIRST STEPS (PART 1) SECTION INTRO
- 8. SECTION LECTURE PROJECT OVERVIEW NATOURS PROJECT — SETUP AND FIRST STEPS (PART 1)
- 9. SECTION LECTURE BUILDING THE HEADER - PART 1 NATOURS PROJECT — SETUP AND FIRST STEPS (PART 1)
- 10. WHAT YOU WILL LEARN IN THIS LECTURE • The best way to perform a basic reset using the universal selector; • How to set project-wide font de fi nitions. • How to clip parts of elements using clip-path.
- 11. SECTION LECTURE BUILDING THE HEADER - PART 2 NATOURS PROJECT — SETUP AND FIRST STEPS (PART 1)
- 12. WHAT YOU WILL LEARN IN THIS LECTURE • The easiest way to center anything with the transform, top and left properties.
- 13. SECTION LECTURE CREATING COOL CSS ANIMATIONS NATOURS PROJECT — SETUP AND FIRST STEPS (PART 1)
- 14. WHAT YOU WILL LEARN IN THIS LECTURE • How to create CSS animations using @keyframes and the animation property.
- 15. SECTION LECTURE BUILDING A COMPLEX ANIMATED BUTTON - PART 1 NATOURS PROJECT — SETUP AND FIRST STEPS (PART 1)
- 16. WHAT YOU WILL LEARN IN THIS LECTURE • What pseudo-elements and pseudo-classes are; • How and why to use the ::after pseudo- element; • How to create a creative hover animation effect using the transition property.
- 17. SECTION LECTURE BUILDING A COMPLEX ANIMATED BUTTON - PART 2 NATOURS PROJECT — SETUP AND FIRST STEPS (PART 1)
- 18. SECTION 3 — HOW CSS WORKS
- 19. SECTION LECTURE HOW CSS WORKS: A LOOK BEHIND THE SCENES SECTION INTRO
- 20. SECTION LECTURE THREE PILLARS OF WRITING GOOD HTML AND CSS (NEVER FORGET THEM!) HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 21. THREE PILLARS TO WRITE GOOD HTML AND CSS... AND BUILD GOOD WEBSITES Web performance Maintainable and scalable code Responsive design • Fluid layouts • Media queries • Responsive images • Correct units • Desktop-first vs mobile-first • Clean • Easy-to-understand • Growth • Reusable • How to organize files • How to name classes • How to structure HTML • Less HTTP requests • Less code • Compress code • Use a CSS preprocessor • Less images • Compress images
- 22. SECTION LECTURE HOW CSS WORKS BEHIND THE SCENES: AN OVERVIEW HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 23. WHAT HAPPENS TO CSS WHEN WE LOAD UP A WEBPAGE? Load HTML Process fi nal CSS values Resolve conflicting CSS declarations (cascade) Parse HTML CSS Object Model (CSSOM) Document Object Model (DOM) Load CSS Final rendered website Parse CSS Render tree Website rendering: the visual formatting model
- 24. SECTION LECTURE HOW CSS IS PARSED, PART 1: THE CASCADE AND SPECIFICITY HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 25. QUICK REVIEW: CSS TERMINOLOGY Declaration block Selector Declared value Property Declaration A CSS RULE .my-class { color: blue; text-align: center; font-size: 20px; }
- 26. THE CASCADE (THE “C” IN CSS) Process fi nal CSS values Resolve conflicting CSS declarations (cascade) Parse CSS IMPORTANCE (WEIGHT) SPECIFICITY > SOURCE ORDER > Process of combining different stylesheets and resolving conflicts between different CSS rules and declarations, when more than one rule applies to a certain element. CASCADE • Author • User • Browser (user agent) Resolve conflicting CSS declarations (cascade)
- 27. IMPORTANCE SPECIFICITY > > 1. User !important declarations 2. Author !important declarations 3. Author declarations 4. User declarations 5. Default browser declarations SOURCE ORDER Same importance?
- 28. IMPORTANCE SPECIFICITY > > 1. User !important declarations 2. Author !important declarations 3. Author declarations 4. User declarations 5. Default browser declarations 1. Inline styles 2. IDs 3. Classes, pseudo-classes, attribute 4. Elements, pseudo-elements SOURCE ORDER Same importance? The last declaration in the code will override all other declarations and will be applied. Same specificity? (0, 1, 2, 2) (0, 0, 0, 1) (0, 1, 2, 1) (0, 0, 1, 0) I n l i n e I D s C l a s s e s E l e m e n t s 1 2 3 4
- 29. CASCADE AND SPECIFICITY: WHAT YOU NEED TO KNOW • CSS declarations marked with !important have the highest priority; • But, only use !important as a last resource. It’s better to use correct speci fi cities — more maintainable code! • Inline styles will always have priority over styles in external stylesheets; • A selector that contains 1 ID is more speci fi c than one with 1000 classes; • A selector that contains 1 class is more speci fi c than one with 1000 elements; • The universal selector * has no speci fi city value (0, 0, 0, 0); • Rely more on specificity than on the order of selectors; • But, rely on order when using 3rd-party stylesheets — always put your author stylesheet last. Web performance Maintainable and scalable code Responsive design
- 30. SECTION LECTURE SPECIFICITY IN PRACTICE HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 31. SECTION LECTURE HOW CSS IS PARSED, PART 2: VALUE PROCESSING HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 32. HOW CSS VALUES ARE PROCESSED 1. Declared value (author declarations) 2. Cascaded value (after the cascade) 3. Specified value (defaulting, if there is no cascaded value) 4. Computed value (converting relative values to absolute) 5. Used value (final calculations, based on layout) 6. Actual value (browser and device restrictions) 140px 66% 66% 66% 66% 184.8px 185px — — 0px 0px 0px font-size (section) font-size (root) padding (paragraph) width (paragraph) font-size (paragraph) — 16px 16px 16px 16px 1.5rem 1.5rem 1.5rem 24px 24px — — 24px 24px 24px 24px 16px (Browser default) 0px (Initial value) 24px (1.5 * 16px) INHERITANCE (Let’s analyse the green paragraph) (66% of 280px)
- 33. HOW UNITS ARE CONVERTED FROM RELATIVE TO ABSOLUTE (PX) 4. Computed value (converting relative values to absolute) 5. Used value (final calculations, based on layout) % (fonts) % (lengths) em (font) em (lengths) rem vh vw 150% 24px x% * parent’s computed font-size 10% 100px x% * parent’s computed width 3em 72px (3 * 24) x * parent computed font-size 2em 48px x * current element computed font-size 10rem 160px x * root computed font-size 90vh 90% of the current viewport height x * 1% of viewport height 80vw x * 1% of viewport width 80% of the current viewport width Viewport-based Font-based How to convert to pixels Example (x) Result in pixels
- 34. CSS VALUE PROCESSING: WHAT YOU NEED TO KNOW • Each property has an initial value, used if nothing is declared (and if there is no inheritance — see next lecture); • Browsers specify a root font-size for each page (usually 16px); • Percentages and relative values are always converted to pixels; • Percentages are measured relative to their parent’s font-size, if used to specify font-size; • Percentages are measured relative to their parent’s width, if used to specify lengths; • em are measured relative to their parent font-size, if used to specify font-size; • em are measured relative to the current font-size, if used to specify lengths; • rem are always measured relative to the document’s root font-size; • vh and vw are simply percentage measurements of the viewport’s height and width.
- 35. SECTION LECTURE HOW CSS IS PARSED, PART 3: INHERITANCE HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 36. INHERITANCE IN CSS Every CSS property must have a value Is there a cascaded value? Specified value = Cascaded value YES Is the property inherited? (speci fi c to each property) NO NO Specified value = Initial value (speci fi c to each property) Specified value = Computed value of parent element YES THIS IS INHERITANCE! Source: https://developer.mozilla.org/en/docs/Web/CSS/line-height line-height property specification Let’s analyse line-height on .child EXAMPLE 30px
- 37. INHERITANCE: WHAT YOU NEED TO KNOW • Inheritance passes the values for some speci fi c properties from parents to children — more maintainable code; • Properties related to text are inherited: font-family, font-size, color, etc; • The computed value of a property is what gets inherited, not the declared value. • Inheritance of a property only works if no one declares a value for that property; • The inherit keyword forces inheritance on a certain property; • The initial keyword resets a property to its initial value.
- 38. SECTION LECTURE CONVERTING PX TO REM: AN EFFECTIVE WORKFLOW HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 39. WHAT YOU WILL LEARN IN THIS LECTURE • How and why to use rem units in our project; • A great workflow for converting px to rem.
- 40. SECTION LECTURE HOW CSS RENDERS A WEBSITE: THE VISUAL FORMATTING MODEL HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 41. REMEMBER...? Load HTML Process fi nal CSS values Resolve conflicting CSS declarations (cascade) Parse HTML CSS Object Model (CSSOM) Document Object Model (DOM) Load CSS Final rendered website Parse CSS Render tree Website rendering: the visual formatting model
- 42. THE VISUAL FORMATTING MODEL Algorithm that calculates boxes and determines the layout of theses boxes, for each element in the render tree, in order to determine the fi nal layout of the page. DEFINITION • Dimensions of boxes: the box model; • Box type: inline, block and inline-block; • Positioning scheme: floats and positioning; • Stacking contexts; • Other elements in the render tree; • Viewport size, dimensions of images, etc.
- 43. 1. THE BOX MODEL • Content: text, images, etc; • Padding: transparent area around the content, inside of the box; • Border: goes around the padding and the content; • Margin: space between boxes; • Fill area: area that gets fi lled with background color or background image. FILL AREA
- 44. 1. THE BOX MODEL: HEIGHTS AND WIDTHS total width = right border + right padding + speci fi ed width + left padding + left border Example: height = 0 + 20px + 100px + 20px + 0 = 140px total height = top border + top padding + speci fi ed height + bottom padding + bottom border
- 45. 1. THE BOX MODEL WITH BOX-SIZING: BORDER-BOX box-sizing: border-box total width = right border + right padding + speci fi ed width + left padding + left border Example: height = 0 + 20px + 100px + 20px + 0 = 100px total height = top border + top padding + speci fi ed height + bottom padding + bottom border
- 46. 2. BOX TYPES: INLINE, BLOCK-LEVEL AND INLINE-BLOCK Block-level boxes • Elements formatted visually as blocks • 100% of parent’s width • Vertically, one after another • Box-model applies as showed display: block (display: flex) (display: list-item) (display: table) Inline boxes • Content is distributed in lines • Occupies only content’s space • No line-breaks • No heights and widths • Paddings and margins only horizontal (left and right) display: inline Inline-block boxes display: inline-block • A mix of block and inline • Occupies only content’s space • No line-breaks • Box-model applies as showed
- 47. 3. POSITIONING SCHEMES: NORMAL FLOW, ABSOLUTE POSITIONING AND FLOATS Normal flow • Default positioning scheme; • NOT floated; • NOT absolutely positioned; • Elements laid out according to their source order. Default position: relative Absolute positioning • Element is removed from the normal flow • No impact on surrounding content or elements; • We use top, bottom, left and right to offset the element from its relatively positioned container. position: absolute position: fixed Floats float: left float: right • Element is removed from the normal flow; • Text and inline elements will wrap around the floated element; • The container will not adjust its height to the element. = ≠
- 48. 4. STACKING CONTEXTS z-index: 3 position: relative z-index: 2 position: absolute z-index: 1 position: relative
- 49. SECTION LECTURE CSS ARCHITECTURE, COMPONENTS AND BEM HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 50. THE THINK - BUILD - ARCHITECT MINDSET THINK BUILD ARCHITECT Think about the layout of your webpage or web app before writing code. Build your layout in HTML and CSS with a consistent structure for naming classes. Create a logical architecture for your CSS with fi les and folders. Web performance Maintainable and scalable code Responsive design • Clean • Modular • Reusable • Ready for growth
- 51. THINKING ABOUT THE LAYOUT THINK BUILD ARCHITECT ATOMIC DESIGN COMPONENT [Image taken from bradfrost.com] • Modular building blocks that make up interfaces; • Held together by the layout of the page; • Re-usable across a project, and between different projects; • Independent, allowing us to use them anywhere on the page. COMPONENT-DRIVEN DESIGN
- 52. BUILDING WITH MEANINGFUL CLASS NAMES ARCHITECT THINK BUILD • Block Element Modi fi er • BLOCK: standalone component that is meaningful on its own. • ELEMENT: part of a block that has no standalone meaning. • MODIFIER: a different version of a block or an element. BEM Low-specificity BEM selectors
- 53. ARCHITECTING WITH FILES AND FOLDERS BUILD THINK ARCHITECT 7 different folders for partial Sass fi les, and 1 main Sass fi le to import all other fi les into a compiled CSS stylesheet. THE 7-1 PATTERN • base/ • components/ • layout/ • pages/ • themes/ • abstracts/ • vendors/ THE 7 FOLDERS
- 54. SECTION LECTURE IMPLEMENTING BEM IN THE NATOUR PROJECT HOW CSS WORKS: A LOOK BEHIND THE SCENES
- 55. WHAT YOU WILL LEARN IN THIS LECTURE • How to use the BEM method in practice.
- 56. SECTION 4 — INTRODUCTION TO SASS AND NPM
- 57. SECTION LECTURE INTRODUCTION TO SASS AND NPM SECTION INTRO
- 58. SECTION LECTURE INTRODUCTION TO SASS AND NPM WHAT IS SASS?
- 59. WHAT IS SASS AND HOW DOES IT WORK? SASS SOURCE CODE COMPILED CSS CODE Sass compiler Sass is a CSS preprocessor, an extension of CSS that adds power and elegance to the basic language. SASS
- 60. MAIN SASS FEATURES • Variables: for reusable values such as colors, font-sizes, spacing, etc; • Nesting: to nest selectors inside of one another, allowing us to write less code; • Operators: for mathematical operations right inside of CSS; • Partials and imports: to write CSS in different fi les and importing them all into one single fi le; • Mixins: to write reusable pieces of CSS code; • Functions: similar to mixins, with the difference that they produce a value that can than be used; • Extends: to make different selectors inherit declarations that are common to all of them; • Control directives: for writing complex code using conditionals and loops (not covered in this course).
- 61. SASS AND SCSS: CLEARING UP THE CONFUSION Sass syntax SCSS syntax
- 62. SECTION LECTURE INTRODUCTION TO SASS AND NPM FIRST STEPS WITH SASS: VARIABLES AND NESTING
- 63. SECTION LECTURE INTRODUCTION TO SASS AND NPM FIRST STEPS WITH SASS: MIXINS, EXTENDS AND FUNCTIONS
- 64. SECTION LECTURE INTRODUCTION TO SASS AND NPM A BRIEF INTRODUCTION TO THE COMMAND LINE
- 65. SECTION LECTURE INTRODUCTION TO SASS AND NPM NPM PACKAGES: LET'S INSTALL SASS LOCALLY
- 66. A BRIEF INTRODUCTION TO NPM AND THE NODE ECOSYSTEM Allows developers to write and run JavaScript applications on the server. Developers started using node.js to also write tools to help them with local web development. NPM is a simple command line interface that allows developers to install and manage packages on their local computers. There are all kinds of open- source tools, libraries and frameworks needed for modern development. Modern web development could simply not exist without a package manager.
- 67. SECTION LECTURE INTRODUCTION TO SASS AND NPM NPM SCRIPTS: LET'S WRITE AND COMPILE SASS LOCALLY
- 68. SECTION LECTURE INTRODUCTION TO SASS AND NPM THE EASIEST WAY OF AUTOMATICALLY RELOADING A PAGE ON FILE CHANGES
- 69. SECTION 5 — NATOURS PROJECT PART 2
- 70. SECTION LECTURE SECTION INTRO NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 71. SECTION LECTURE CONVERTING OUR CSS CODE TO SASS: VARIABLES AND NESTING NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 72. SECTION LECTURE IMPLEMENTING THE 7-1 CSS ARCHITECTURE WITH SASS NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 73. SECTION LECTURE REVIEW: RESPONSIVE DESIGN PRINCIPLES AND LAYOUT TYPES NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 74. REVIEW: BASIC RESPONSIVE DESIGN PRINCIPLES 1 FLUID LAYOUTS 2 RESPONSIVE UNITS 3 FLEXIBLE IMAGES 4 MEDIA QUERIES • To allow webpage to adapt to the current viewport width (or even height) • Use % (or vh / vw) unit instead of px for elements that should adapt to viewport (usually layout) • Use max-width instead of width • Use rem unit instead of px for most lengths • To make it easy to scale the entire layout down (or up) automatically • By default, images don’t scale automatically as we change the viewport, so we need to fi x that • Always use % for image dimensions, together with the max-width property • To change CSS styles on certain viewport widths (called breakpoints)
- 75. LAYOUT TYPES FLOAT LAYOUTS FLEXBOX CSS GRID THIS PROJECT 2ND PROJECT 3RD PROJECT Modern way of laying out elements in a 1-dimensional row without using floats. Perfect for component layouts. For laying out element in a fully-fledged 2-dimensional grid. Perfect for page layouts and complex components. The old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated.
- 76. WHY USE A FLOAT LAYOUT IN THIS PROJECT? • The focus of this project is on using modern CSS properties and techniques: clips, transforms, animations, background video, etc. • Even though flexbox and CSS Grid are more modern, every web developer should still know how float layouts work • As a professional developer, your job will include working with older CSS codebases, which will contain float layouts
- 77. SECTION LECTURE BUILDING A CUSTOM GRID WITH FLOATS NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 78. WHAT YOU WILL LEARN IN THIS LECTURE • How to architect and build a simple grid system; • How the attribute selector works; • How the :not pseudo-class works; • How calc() works, and what’s the difference between calc() and simple Sass operations.
- 79. SECTION LECTURE BUILDING THE ABOUT SECTION - PART 1 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 80. WHAT YOU WILL LEARN IN THIS LECTURE • Thinking about components; • How and why to use utility classes; • How to use the background-clip property; • How to transform multiple properties simultaneously; • How to use the outline-offset property together with outline; • How to style elements that are NOT hovered while others are.
- 81. SECTION LECTURE BUILDING THE ABOUT SECTION - PART 2 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 82. SECTION LECTURE BUILDING THE ABOUT SECTION - PART 3 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 83. SECTION LECTURE BUILDING THE FEATURES SECTION NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 84. WHAT YOU WILL LEARN IN THIS LECTURE • How to include and use an icon font; • Another way of creating the “skewed section” design; • How and when to use the direct child selector.
- 85. SECTION LECTURE BUILDING THE TOURS SECTION - PART 1 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 86. WHAT YOU WILL LEARN IN THIS LECTURE • How to build an amazing, rotating card; • How to use perspective in CSS; • How to use the backface-visibility property; • Using background blend modes; • How and when to use box-decoration-break;
- 87. SECTION LECTURE BUILDING THE TOURS SECTION - PART 2 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 88. SECTION LECTURE BUILDING THE TOURS SECTION - PART 3 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 89. SECTION LECTURE BUILDING THE STORIES SECTION - PART 1 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 90. WHAT YOU WILL LEARN IN THIS LECTURE • How to make text flow around shapes with shape-outside and float; • How to apply a filter to images; • How to create a background video covering an entire section; • How to use the <video> HTML element; • How and when to use the object-fit property.
- 91. SECTION LECTURE BUILDING THE STORIES SECTION - PART 2 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 92. SECTION LECTURE BUILDING THE STORIES SECTION - PART 3 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 93. SECTION LECTURE BUILDING THE BOOKING SECTION - PART 1 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 94. WHAT YOU WILL LEARN IN THIS LECTURE • How to implement “solid-color gradients”; • How the general and adjacent sibling selectors work and why we need them; • How to use the ::input-placeholder pseudo-element; • How and when to use the :focus, :invalid, placeholder-shown and :checked pseudo- classes; • Techniques to build custom radio buttons.
- 95. SECTION LECTURE BUILDING THE BOOKING SECTION - PART 2 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 96. SECTION LECTURE BUILDING THE BOOKING SECTION - PART 3 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 97. SECTION LECTURE BUILDING THE FOOTER NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 98. WHAT YOU WILL LEARN IN THIS LECTURE • How to design a simple website footer.
- 99. SECTION LECTURE BUILDING THE NAVIGATION - PART 1 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 100. WHAT YOU WILL LEARN IN THIS LECTURE • What the “checkbox hack” is and how it works; • How to create custom animation timing functions using cubic bezier curves; • How to animate “solid-color gradients”; • How and why to use transform-origin; • In general: create an amazingly creative effect!
- 101. SECTION LECTURE BUILDING THE NAVIGATION - PART 2 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 102. SECTION LECTURE BUILDING THE NAVIGATION - PART 3 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 103. SECTION LECTURE BUILDING A PURE CSS POPUP - PART 1 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 104. WHAT YOU WILL LEARN IN THIS LECTURE • How to build a nice popup with only CSS; • How to use the :target pseudo-class; • How to create boxes with equal height using display: table-cell; • How to create CSS text columns; • How to automatically hyphenate words using hyphens.
- 105. SECTION LECTURE BUILDING A PURE CSS POPUP - PART 2 NATOURS PROJECT — USING ADVANCED CSS AND SASS (PART 2)
- 106. SECTION 6 — NATOURS PROJECT PART 3
- 107. SECTION LECTURE SECTION INTRO NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 108. SECTION LECTURE MOBILE-FIRST VS DESKTOP-FIRST AND BREAKPOINTS NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 109. RESPONSIVE DESIGN STRATEGIES DESKTOP-FIRST MOBILE-FIRST • Start writing CSS for mobile devices: small screen; • Then, media queries expand design to a large desktop screen; • Forces us to reduce websites and apps to the absolute essentials. • Start writing CSS for the desktop: large screen; • Then, media queries shrink design to smaller screens.
- 110. RESPONSIVE DESIGN STRATEGIES: MAX-WIDTH AND MIN-WIDTH 0px ∞ 600px 900px 1200px DESKTOP-FIRST Our initial desktop- first code goes here MOBILE-FIRST Our initial mobile- first code goes here max-width: 600px (is width <= 600px ?) max-width: 900px (is width <= 900px ?) max-width: 1200px (is width <= 1200px ?) min-width: 600px (is width >= 600px ?) min-width: 900px (is width >= 900px ?) min-width: 1200px (is width >= 1200px ?) Maximum width at which media query still applies 500px Minimum width at which media query starts to apply Media queries don’t add any importance or speci fi city to selectors, so code order matters — media queries at the end
- 111. IS MOBILE-FIRST RIGHT FOR YOU? PROS CONS • 100% optimised for the mobile experience; • Reduces websites and apps to the absolute essentials; • Results in smaller, faster and more ef fi cient products; • Prioritizes content over aesthetic design, which may be desirable. • The desktop version might feel overly empty and simplistic; • More dif fi cult and counterintuitive to develop; • Less creative freedom, making it more dif fi cult to create distinctive products; • Clients are used to see a desktop version of the site as a prototype; • Do your users even use the mobile internet? What’s the purpose of your website? NO MATTER WHAT YOU DO, ALWAYS KEEP BOTH DESKTOP AND MOBILE IN MIND
- 112. SELECTING OUR BREAKPOINTS: THE OPTIONS PERFECT BAD GOOD Design breaks Design breaks Design breaks Design breaks
- 113. SELECTING OUR BREAKPOINTS: A GOOD APPROACH [http://gs.statcounter.com/screen-resolution- stats#monthly-201608-201708-bar] 0px 2000px 1000px 800px 600px 400px 200px 1200px 1400px 1600px 1800px 360 x 640 375 x 667 320 x 568 480 x 800 720 x 1280 768 x 1024 1024 x 768 1280 x 800 1366 x 768 1440 x 900 1280 x 1024 1920 x 1080 1600 x 900 PHONE ONLY TABLET PORTRAIT TABLET LANDSCAPE DESKTOP BIG DESKTOP
- 114. SECTION LECTURE LET'S USE THE POWER OF SASS MIXINS TO WRITE MEDIA QUERIES NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 115. WHAT YOU WILL LEARN IN THIS LECTURE • How to use a powerful Sass mixing to write all our media queries; • How to use the @content and @if Sass directives; • Taking advantage of Chrome DevTools for responsive design.
- 116. SECTION LECTURE WRITING MEDIA QUERIES - BASE, TYPOGRAPHY AND LAYOUT NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 117. SECTION LECTURE WRITING MEDIA QUERIES - LAYOUT, ABOUT AND FEATURES SECTIONS NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 118. SECTION LECTURE WRITING MEDIA QUERIES - TOURS, STORIES AND BOOKING SECTIONS NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 119. SECTION LECTURE AN OVERVIEW OF RESPONSIVE IMAGES NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 120. WHAT ARE RESPONSIVE IMAGES ANYWAY? Web performance Maintainable and scalable code Responsive design The goal of responsive images is to serve the right image to the right screen size and device, in order to avoid downloading unnecessary large images on smaller screens. RESPONSIVE IMAGES 1MB 😀 1MB 😡 1MB 😀 200kb 😀
- 121. WHEN TO USE RESPONSIVE IMAGES: THE 3 USE CASES Large screen Small screen RESOLUTION SWITCHING (Decrease image resolution on smaller screen) @2x screen (high-res) @1x screen (low-res) DENSITY SWITCHING (Half the image resolution on @1x screen) Large screen Small screen ART DIRECTION (Different image on smaller screen) Image details were preserved, but the image is different
- 122. SECTION LECTURE RESPONSIVE IMAGES IN HTML - ART DIRECTION AND DENSITY SWITCHING NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 123. WHAT YOU WILL LEARN IN THIS LECTURE • How to use the srcset attribute on the <img> and <source> elements, together with density descriptors; • How and why to use the <picture> element for art direction; • How to write media queries in HTML.
- 124. SECTION LECTURE RESPONSIVE IMAGES IN HTML - DENSITY AND RESOLUTION SWITCHING NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 125. WHAT YOU WILL LEARN IN THIS LECTURE • How to allow the browser to decide the best image to download, using the srcset attribute, width descriptors, and the sizes attribute of the <img> element.
- 126. SECTION LECTURE RESPONSIVE IMAGES IN CSS NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 127. WHAT YOU WILL LEARN IN THIS LECTURE • How to implement responsive images in CSS; • How to use resolution media queries to target high-resolution screens with 2x. • How to combine multiple conditions in media queries.
- 128. SECTION LECTURE TESTING FOR BROWSER SUPPORT WITH @SUPPORTS NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 129. WARNING! MANY OF THE NEW CSS FEATURES I SHOWED YOU ARE HIGHLY EXPERIMENTAL AND ONLY WORK IN TOP MODERN BROWSERS ALWAYS CHECK CANIUSE.COM BEFORE USING A MODERN CSS PROPERTY IN PRODUCTION USE GRACEFUL DEGRADATION WITH @SUPPORTS
- 130. WHAT YOU WILL LEARN IN THIS LECTURE • How to use @supports feature queries; • Implement graceful degradation on selected properties; • How to use backdrop-filter.
- 131. SECTION LECTURE SETTING UP A SIMPLE BUILD PROCESS WITH NPM SCRIPTS NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 132. A SIMPLE BUILD PROCESS main.sass icon-font.css style.comp.css style.pre fi x.css style.concat.css style.css COMPILATION CONCATENATION PREFIXING COMPRESSING (Production code)
- 133. SECTION LECTURE WRAPPING UP THE NATOURS PROJECT: FINAL CONSIDERATIONS NATOURS PROJECT — ADVANCED RESPONSIVE DESIGN (PART 3)
- 134. SECTION 7 — TRILLO PROJECT: MASTER FLEXBOX!
- 135. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! SECTION INTRO
- 136. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! WHY FLEXBOX: AN OVERVIEW OF THE PHILOSOPHY BEHIND FLEXBOX
- 137. A TRUE REVOLUTION FLEXBOX • Flexbox is a new module in CSS3 that makes it easy to align elements to one another, in different directions and orders; • The main idea behind flexbox is to give the container the ability to expand and to shrink elements to best use all the available space; • Flexbox replaces float layouts, using less, and more readable and logical code; • Flexbox completely changes the way that we build one-dimensional layouts; • A true revolution in CSS!
- 138. MAIN FLEXBOX CONCEPTS MAIN AXIS CROSS AXIS Flex container Flex items display: flex (display: flex-inline)
- 139. FLEXBOX PROPERTIES OVERVIEW MAIN AXIS CROSS AXIS CONTAINER ITEM flex-direction: row | row-reverse | column | column-reverse 1 flex-wrap: nowrap | wrap | wrap-reverse 2 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly 3 align-items: stretch | flex-start | flex-end | center | baseline 4 align-content: stretch | flex-start | flex-end | center | space-between | space-around 5 align-self: auto | stretch | flex-start | flex- end | center | baseline 1 order: 0 | <integer> 2 flex-grow: 0 | <integer> 3 flex-shrink: 1 | <integer> 4 flex-basis: auto | <length> 5 flex: 0 1 auto | <int> <int> <len>
- 140. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! A BASIC INTRO TO FLEXBOX: THE FLEX CONTAINER
- 141. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! A BASIC INTRO TO FLEXBOX: FLEX ITEMS
- 142. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! A BASIC INTRO TO FLEXBOX: ADDING MORE FLEX ITEMS
- 143. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! PROJECT OVERVIEW
- 144. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! DEFINING PROJECT SETTINGS AND CUSTOM PROPERTIES
- 145. WHAT YOU WILL LEARN IN THIS LECTURE • How and why to use CSS custom properties.
- 146. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE OVERALL LAYOUT
- 147. WHAT YOU WILL LEARN IN THIS LECTURE • How to think about the overall layout of an app; • Use flexbox in a real-world project for the fi rst time.
- 148. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE HEADER - PART 1
- 149. WHAT YOU WILL LEARN IN THIS LECTURE • Why to use SVG icons vs. font icons; • How to fi nd, generate and use SVG sprites in HTML; • How to change the color of an SVG icon in CSS; • How to use more advanced flexbox alignment techniques, including justify-content, align- items, align-self and flex.
- 150. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE HEADER - PART 2
- 151. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE HEADER - PART 3
- 152. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE NAVIGATION - PART 1
- 153. WHAT YOU WILL LEARN IN THIS LECTURE • How to use scaleY and multiple transition properties with different settings, to create a creative hover effect; • How and why to use the currentColor CSS variable; • How to use some more advanced flexbox alignment techniques, including flex-direction, justify-content and align-items.
- 154. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE NAVIGATION - PART 2
- 155. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE HOTEL OVERVIEW - PART 1
- 156. WHAT YOU WILL LEARN IN THIS LECTURE • How to create an in fi nite animation; • How to use margin: auto with flexbox, and why it’s so powerful; • Continue to use flexbox properties for easy positioning and alignment.
- 157. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE HOTEL OVERVIEW - PART 2
- 158. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE DESCRIPTION SECTION - PART 1
- 159. WHAT YOU WILL LEARN IN THIS LECTURE • Continue to use flexbox, including flex-wrap to build a multi-column list; • How and why to use CSS masks with mask-image and mask-size.
- 160. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE DESCRIPTION SECTION - PART 2
- 161. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE USER REVIEWS SECTION
- 162. WHAT YOU WILL LEARN IN THIS LECTURE • Continue using and practicing flexbox.
- 163. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! BUILDING THE CTA SECTION
- 164. WHAT YOU WILL LEARN IN THIS LECTURE • Yet another creative and modern hover effect 😍
- 165. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! WRITING MEDIA QUERIES - PART 1
- 166. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! WRITING MEDIA QUERIES - PART 2
- 167. SECTION LECTURE TRILLO PROJECT — MASTER FLEXBOX! WRAPPING UP THE TRILLO PROJECT: FINAL CONSIDERATIONS
- 168. CHALLENGES, ANYONE? 1. Display some kind of user menu when hovering over the username in .user-nav; 2. Display a message menu when hovering over the chat icon in .user-nav (maybe like facebook); 3. Display a box with search suggestions as soon as the user starts typing in the search fi eld; 4. Create a caption for the .gallery__item with a nice hover effect; 5. Make the page 100% responsive even for viewport sizes below 500px, maybe even responsive images.
- 169. SECTION 8 — CSS GRID INTRO
- 170. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS SECTION INTRO
- 171. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS WHY CSS GRID: A WHOLE NEW MINDSET
- 172. A WHOLE NEW MINDSET CSS GRID • CSS Grid Layout is a brand new module that brings a two-dimensional grid system to CSS for the fi rst time; • CSS Grid replaces float layouts, using less, and more readable and logical CSS and HTML; • CSS Grid works perfectly together with Flexbox, which is best to handle one- dimensional components and layouts; • CSS Grid completely changes the way that we envision and build two- dimensional layouts.
- 173. A WHOLE NEW MINDSET
- 174. CSS GRID TERMINOLOGY display: grid (display: grid-inline) COLUMN AXIS ROW AXIS Grid container Grid items
- 175. CSS GRID TERMINOLOGY ROW AXIS COLUMN AXIS Grid line Grid track/ column Grid track/ row Gutter 1 2 3 4 1 2 3 Grid area Grid cell
- 176. CONTAINER ITEM grid-template-rows 1 grid-template-columns 2 grid-row-gap 3 grid-column-gap 4 justify-items CSS GRID PROPERTIES OVERVIEW grid-template grid-gap align-items justify-content align-content grid-auto-rows grid-auto-columns grid-auto-flow 1 grid-row-start grid-row-end grid-column-start grid-column-end grid-row grid-column grid-area 2 justify-self align-self grid-template-areas 3 order
- 177. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS QUICK SETUP FOR THIS SECTION
- 178. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS CREATING OUR FIRST GRID
- 179. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS GETTING FAMILIAR WITH THE FR UNIT
- 180. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS POSITIONING GRID ITEMS
- 181. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS SPANNING GRID ITEMS
- 182. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS GRID CHALLENGE
- 183. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS GRID CHALLENGE: A BASIC SOLUTION
- 184. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS NAMING GRID LINES
- 185. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS NAMING GRID AREAS
- 186. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS IMPLICIT GRIDS VS. EXPLICIT GRIDS
- 187. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS ALIGNING GRID ITEMS
- 188. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS ALIGNING TRACKS
- 189. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS USING MIN-CONTENT, MAX-CONTENT AND THE MINMAX() FUNCTION
- 190. SECTION LECTURE A QUICK INTRODUCTION TO CSS GRID LAYOUTS RESPONSIVE LAYOUTS WITH AUTO-FIT AND AUTO-FILL
- 191. SECTION 9 — NEXTER PROJECT — MASTER CSS GRID LAYOUTS!
- 192. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! PROJECT OVERVIEW & SETUP
- 193. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE OVERALL LAYOUT - PART 1
- 194. WHAT YOU WILL LEARN IN THIS LECTURE • How to build a complex and modern layout using advanced CSS Grid techniques; • How to choose different row and column track sizes for different types of content.
- 195. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE OVERALL LAYOUT - PART 2
- 196. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE FEATURES SECTION - PART 1
- 197. WHAT YOU WILL LEARN IN THIS LECTURE • How and why to create grids inside of grids; • How to create a responsive component without media queries; • How to build a small component using CSS Grid.
- 198. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE FEATURES SECTION - PART 2
- 199. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE STORY SECTION - PART 1
- 200. WHAT YOU WILL LEARN IN THIS LECTURE • How to deal with overlapping grid items; • Why images are special and behave differently than other grid items; • How to decide if flexbox is a better tool in certain situations.
- 201. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE STORY SECTION - PART 2
- 202. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE HOMES SECTION - PART 1
- 203. WHAT YOU WILL LEARN IN THIS LECTURE • How to build a rather complex component using a mix of CSS Grid properties, overlapping and flexbox.
- 204. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE HOMES SECTION - PART 2
- 205. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE GALLERY - PART 1
- 206. WHAT YOU WILL LEARN IN THIS LECTURE • How to create a complex grid-looking gallery; • Using object-fit together with images for grid items.
- 207. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE GALLERY - PART 2
- 208. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE FOOTER
- 209. WHAT YOU WILL LEARN IN THIS LECTURE • Apply the concepts you already learned.
- 210. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE SIDEBAR
- 211. WHAT YOU WILL LEARN IN THIS LECTURE • Apply the concepts you already learned.
- 212. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE HEADER - PART 1
- 213. WHAT YOU WILL LEARN IN THIS LECTURE • How to manage vertical spacing in a responsive layout using CSS Grid techniques; • How to use ::before and ::after as grid items.
- 214. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE HEADER - PART 2
- 215. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BUILDING THE REALTORS SECTION
- 216. WHAT YOU WILL LEARN IN THIS LECTURE • Apply the concepts you already learned.
- 217. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! WRITING MEDIA QUERIES - PART 1
- 218. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! WRITING MEDIA QUERIES - PART 2
- 219. SECTION LECTURE NEXTER PROJECT — MASTER CSS GRID LAYOUTS! BROWSER SUPPORT FOR CSS GRID
- 220. SECTION 10 — THAT'S IT, EVERYONE!
- 221. SECTION LECTURE THAT'S IT, EVERYONE! SEE YOU NEXT TIME, CSS MASTER!
- 222. END