HTML Module 10x Academy

  1)  Mobile View Desktop view 2) Solution: 1st with Mobile view HTML file: <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Fitness Project</ title > <!-- google-fonts imports --> < link rel = "preconnect" href = "https://fonts.googleapis.com" > < link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin > < link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel = "stylesheet" > <!-- All these fonts are from google-fonts and these should always be above our custom styles --> <!-- This is our cust...

  1)

  Web accessibility topics at a glance 1) 2) 3) 4) 5) 6) 7) 8) 9) 10)

  CSS Animations topics at a glance 1) CSS animations is a journey of an element from one state to another in a period of time. 2) Example 1: Eventually it will turn back to its' original state. 2) Example 2: Output will start from 10x10 px dimensions and then becomes 100x100px in dimensions and will stay in 100x100px, as it was the original dimension. 3) Example 3: 4) Example 4: Using animation-iteration-count: property; This property will allow us to repeat our animations in any number of times specified by the user. here, our animation will repeat for 5 times. here our animation will repeat endlessly as the property is set to infinite, animation-iteration-count: infinite;

  1)  What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element Syntax The syntax of pseudo-elements: selector::pseudo-element  {   property :  value ; } The ::first-line Pseudo-element The  ::first-line  pseudo-element is used to add a special style to the first line of a text. The following example formats the first line of the text in all <p> elements: Example  p::first-line  {   color :  #ff0000 ;   font-variant :  small-caps ; } Note:  The  ::first-line  pseudo-element can only be applied to block-level elements. The following properties apply to the  ::first-line  pseudo-element: font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform lin...