HTML 5 and CSS 3 – tricks and workarounds

Course Curriculum

Chapter 1: Introduction

Lecture 1: Intoduction

Chapter 2: What is New in HTML5?

Lecture 1: New HTML 5 Elements and API's

Lecture 2: Elements Removed and Adding New Elements

Lecture 3: The Complete Shiv Solution

Chapter 3: HTML Layouts

Lecture 1: HTML Layout with Div and HTML Layout with Table

Lecture 2: Website Layout Using HTML5

Chapter 4: HTML 5 Semantic

Lecture 1: HTML 5 Section and Article

Lecture 2: Header and Footer

Lecture 3: Nav and Aside Element

Lecture 4: Figure and FIgureCaption Elements

Chapter 5: Migration to HTML5

Lecture 1: Migrating to HTML5 and Changes in Head

Lecture 2: Changing CSS and Body Elements

Lecture 3: Difference between Article, Section, and Div

Chapter 6: CSS3 Introduction

Lecture 1: Whats New in CSS3 and Border-radius Property

Lecture 2: Border Radius Each Corner

Lecture 3: Including Cross-browser compatibility

Lecture 4: Using border-radius and border-collapse

Lecture 5: CSS3 Filter Blue and Brightness

Lecture 6: Contrast and Drop-Shadow

Lecture 7: Grayscale and Hue Rotation

Lecture 8: Saturate and Multiple Filters

Lecture 9: Using blur background

Lecture 10: How to use cross-browser blurring

Lecture 11: BorderImage Property and Different Slice Values

Lecture 12: BorderImage Outset and Repeat

Lecture 13: Using border image

Lecture 14: Problems using border images

Lecture 15: Multiple Backgrounds and Background Size

Lecture 16: Full Size Background Image and BackgroundOrigin Property

Lecture 17: Background-Clip Property

Lecture 18: How to center a background image

Lecture 19: Adding background image to div using css

Lecture 20: RGBA and HSL Colors

Lecture 21: HSLA and Opacity

Lecture 22: Using button background opacity and text opacity together

Lecture 23: How to give a transparent background to text or image

Lecture 24: LInear Gradients with Angles

Lecture 25: Multiple Color Stops and Transparency

Lecture 26: Radial Gradients and Shape Gradients

Lecture 27: Using a Different Size Keywords

Lecture 28: CSS3 gradient background

Lecture 29: Linear gradient working as background of page

Lecture 30: Text Shadow and Multiple Shadows

Lecture 31: BoxShadow Property and Cards

Lecture 32: Using shadow CSS feature on images

Lecture 33: Styling boxes with shadow effect

Chapter 7: CSS3 Text and Web Fonts

Lecture 1: Text Overflow and Word Wrapping

Lecture 2: Word Breaking

Lecture 3: Text-overflow property

Lecture 4: Difference between word-break:break-all and word-wrap:break-word

Lecture 5: Font-face Rule and Using the font you want

Lecture 6: Using Bold Text

Lecture 7: Specifying correct folder name for font-face

Lecture 8: Using much less code for implemention a variation of fonts

Chapter 8: CSS3 2D and 3D Transforms

Lecture 1: Transformations Translate and Rotate

Lecture 2: Scale and Skew Method

Lecture 3: SkewY and Skew Method

Lecture 4: Matrix Method

Lecture 5: 2D transforms – how syntax works

Lecture 6: Correct work with transform scale method

Lecture 7: 3D Transformations RotateX and RotateY

Lecture 8: Rotate Z

Lecture 9: Work with SVG

Lecture 10: CSS3 3D Transform and IE11

Chapter 9: CSS3 Transitions

Lecture 1: CSS3 Transitions and Changing Several Property Values

Lecture 2: Speed Curve Transition and Transition Delay

Lecture 3: Transition and Transformation

Lecture 4: Logo with animation

Lecture 5: Adding transition effects to images

Chapter 10: CSS3 Animations and images

Lecture 1: Keyframes Rule and Animation Delay

Lecture 2: Animation Iteration and Direction

Lecture 3: Animation Timing and Shorthand Property

Lecture 4: how CSS3 Animation works

Lecture 5: How to play reverse keyframe animation for hover off

Lecture 6: Rounded Images and Thumbnails

Lecture 7: Responsive Images and Image Text

Lecture 8: Polaroid Images

Lecture 9: Elegant work work image width and height

Lecture 10: Text on top of the image – typical problem you may get

Chapter 11: CSS Buttons and Pagination

Lecture 1: Button Styling and Animations

Lecture 2: CSS3 Button Colors and Sizes

Lecture 3: Rounded Buttons and Colored Button Borders

Lecture 4: Hoverable and Shadowed Buttons

Lecture 5: Adding hover effets to button

Lecture 6: CSS Button Value Styling

Lecture 7: Simple Pagination with Active and Hoverable Effects

Lecture 8: Rounded Active&Hoverable Buttons, Bordered Pagination

Lecture 9: Space Between Links and Pagination Size

Lecture 10: Problem with animated pagination using CSS3