├── 01_Lesson (Introduction Tutorial) ├── style.css └── index.html ├── 08_Lesson (List Styles) ├── images │ └── checkmark.png ├── two.html ├── one.html ├── style.css └── index.html ├── Chapter 1 ├── ExternalCSS.css ├── CSSRules.html ├── InlineCSS.html ├── ExternalCSS.html ├── InternalOrEmbeddedCSS.html ├── Inheritance.html ├── CSSRulesCascading.html ├── DescendantSelector.html ├── AdjacentSiblingSelector.html ├── UniversalSelector.html ├── TypeSelector.html ├── ChildSelector.html ├── IDSelector.html ├── GeneralSiblingSelector.html └── ClassSelector.html ├── 03_Lesson (Colors) ├── style.css └── index.html ├── 09 Lesson (Mini Project) ├── one.html ├── two.html ├── index.html └── style.css ├── 07_Lesson (Styling Hyperlinks) ├── two.html ├── one.html ├── style.css └── index.html ├── 02_Lesson (Selectors) ├── style.css └── index.html ├── 04_Lesson (Units & Sizes) ├── style.css └── index.html ├── README.md ├── Chapter 2 ├── Opacity1.html ├── Colors2.html ├── HSL.html ├── HSLA.html ├── Colors1.html ├── BackgroundColors.html ├── RGBA.html └── Opacity2.html ├── 14_Lesson (Flexbox) ├── index.html └── style.css ├── 06_Lesson (Text and Fonts) ├── style.css └── index.html ├── 05_Lesson (Box Model) ├── style.css └── index.html ├── 10_Lesson (Display Property) ├── index.html └── style.css ├── 12_Lesson (Columns) ├── style.css └── index.html ├── 11_Lesson (Floats & Clears) ├── style.css └── index.html ├── 15_Lesson (Grid) ├── index.html └── style.css └── 13_Lesson (Position Property) ├── index.html └── style.css /01_Lesson (Introduction Tutorial)/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-size: 64px; 3 | color: purple; 4 | } 5 | -------------------------------------------------------------------------------- /08_Lesson (List Styles)/images/checkmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MeesamBukhari/CSS-Practice/HEAD/08_Lesson (List Styles)/images/checkmark.png -------------------------------------------------------------------------------- /Chapter 1/ExternalCSS.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: thistle; 3 | } 4 | 5 | h1 { 6 | color: indigo; 7 | } 8 | 9 | .courses { 10 | color: blueviolet; 11 | } -------------------------------------------------------------------------------- /03_Lesson (Colors)/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 22px; 3 | font-family: Arial, Helvetica, sans-serif; 4 | line-height: 1.5; 5 | background: papayawhip; 6 | color: rgb(0, 0, 0); 7 | } 8 | 9 | p { 10 | color: #333; 11 | } 12 | -------------------------------------------------------------------------------- /08_Lesson (List Styles)/two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Two 7 | 8 | 9 |

Page Two

10 | 11 | 12 | -------------------------------------------------------------------------------- /09 Lesson (Mini Project)/one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page One 7 | 8 | 9 |

Page One

10 | 11 | 12 | -------------------------------------------------------------------------------- /09 Lesson (Mini Project)/two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Two 7 | 8 | 9 |

Page Two

10 | 11 | 12 | -------------------------------------------------------------------------------- /07_Lesson (Styling Hyperlinks)/two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Two 7 | 8 | 9 |

Page Two

10 | 11 | 12 | -------------------------------------------------------------------------------- /08_Lesson (List Styles)/one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page One 7 | 8 | 9 | 10 |

Page One

11 | 12 | -------------------------------------------------------------------------------- /07_Lesson (Styling Hyperlinks)/one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page One 7 | 8 | 9 | 10 |

Page One

11 | 12 | -------------------------------------------------------------------------------- /02_Lesson (Selectors)/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 22px; 3 | } 4 | 5 | main { 6 | font-family: monospace; 7 | } 8 | 9 | h1, 10 | h2 { 11 | color: blue; 12 | } 13 | 14 | .gray { 15 | color: gray; 16 | } 17 | 18 | p { 19 | color: purple; 20 | } 21 | 22 | p { 23 | color: red; 24 | } 25 | 26 | .highlight { 27 | text-transform: uppercase; 28 | background: gold; 29 | } 30 | -------------------------------------------------------------------------------- /04_Lesson (Units & Sizes)/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | min-height: 100vh; 9 | } 10 | 11 | h1 { 12 | border: 2px dashed red; 13 | width: 50%; 14 | font-size: 3rem; 15 | padding: 0.5em; 16 | } 17 | 18 | main { 19 | font-size: 2rem; 20 | } 21 | 22 | p { 23 | font-size: 2rem; 24 | width: 40ch; 25 | } 26 | -------------------------------------------------------------------------------- /01_Lesson (Introduction Tutorial)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Introduction Tutorial 7 | 8 | 9 | 10 |

I'm learning CSS!

11 | 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS-Practice 2 | ## Practice of CSS lectures delivered by Hira Khan from PIAIC 3 | ### YouTube Playlist:
4 | CSS 5 |
6 | ## Practice of CSS lectures delivered by Dave Gray 7 | ### Youtube Playlist: 8 | CSS Tutorials for Beginners 9 | -------------------------------------------------------------------------------- /Chapter 2/Opacity1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Opacity 7 | 15 | 16 | 17 |
18 | PIAIC 19 |
20 | 21 | -------------------------------------------------------------------------------- /07_Lesson (Styling Hyperlinks)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | 3 | body { 4 | padding: 10%; 5 | font-size: 2rem; 6 | font-family: "Roboto", sans-serif; 7 | } 8 | 9 | a { 10 | color: hsl(207, 44%, 49%); 11 | } 12 | 13 | a:visited { 14 | color: purple; 15 | } 16 | 17 | a:hover, 18 | a:focus { 19 | color: hsl(207, 44%, 49%, 0.8); 20 | background-color: gold; 21 | } 22 | 23 | a:active { 24 | color: red; 25 | } 26 | -------------------------------------------------------------------------------- /Chapter 2/Colors2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Colors 7 | 14 | 15 | 16 |

17 | Hello World 18 |

19 | 20 |

21 | PIAIC 22 |

23 | 24 | -------------------------------------------------------------------------------- /Chapter 1/CSSRules.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Rules 5 | 11 | 12 | 13 |

Presidential Initiative For Artificial Intelligence & Computing (PIAIC)

14 |

Available Programs:

15 |

Blockchain

16 |

Artificial Intelligence

17 | 18 | -------------------------------------------------------------------------------- /14_Lesson (Flexbox)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Flexbox 7 | 8 | 9 | 10 |
11 |
1
12 |
2
13 |
3
14 |
4
15 |
5
16 |
6
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /06_Lesson (Text and Fonts)/style.css: -------------------------------------------------------------------------------- 1 | /* Typography is the way that text is arranged and presented. */ 2 | 3 | body { 4 | padding: 10%; 5 | font-size: 2rem; 6 | font-family: Arial, Helvetica, sans-serif; 7 | } 8 | 9 | /* input, 10 | button { 11 | font: inherit; 12 | } */ 13 | 14 | p { 15 | text-indent: 5rem; 16 | line-height: 1.5; 17 | /* text-transform: capitalize; */ 18 | /* text-align: justify; */ 19 | /* text-decoration: underline; */ 20 | /* text-transform: uppercase; */ 21 | /* letter-spacing: 0.1em; */ 22 | /* word-spacing: 0.5em; */ 23 | /* font-weight: 700; */ 24 | font-style: italic; 25 | } 26 | -------------------------------------------------------------------------------- /Chapter 1/InlineCSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Inline CSS 7 | 8 | 9 |

PIAIC Offers The Following Courses:

10 |
11 |
  • Artificial Intelligence
    • 12 |
  • Blockchain
    • 13 |
  • Cloud Native Computing
    • 14 |
  • Internet Of Things
    • 15 |
    16 | 17 | -------------------------------------------------------------------------------- /05_Lesson (Box Model)/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | border: 10px double red; 9 | font-size: 1.5rem; 10 | margin: 1.5em; 11 | /* margin-top: 1.5em; 12 | margin-right: 2em; 13 | margin-bottom: 2em; 14 | margin-left: 2em; */ 15 | padding: 1.5em; 16 | outline: 5px solid purple; 17 | outline-offset: -20px; 18 | } 19 | 20 | .circle { 21 | margin: 3rem auto; 22 | background-color: gold; 23 | width: 100px; 24 | height: 100px; 25 | border: 2px solid #000; 26 | border-radius: 50px; 27 | outline: 2px solid red; 28 | outline-offset: 0.25rem; 29 | } 30 | -------------------------------------------------------------------------------- /Chapter 2/HSL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HSL 7 | 18 | 19 | 20 |

    HSL Colors

    21 |
    22 | Hello World 23 |
    24 | 25 |
    26 | Hello World 27 |
    28 | 29 | -------------------------------------------------------------------------------- /Chapter 1/ExternalCSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | External CSS 7 | 8 | 9 | 10 |

    PIAIC Offers The Following Courses:

    11 |
    12 |
      13 |
    1. Artificial Intelligence
      2. 14 |
    2. Blockchain
      3. 15 |
    3. Cloud Native Computing
      4. 16 |
    4. Internet Of Things
      5. 17 |
    18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /10_Lesson (Display Property)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Display Property 7 | 8 | 9 | 10 |
    11 | 18 |

    This is a paragraph.

    19 |

    This is another paragraph.

    20 |
    21 | 22 | 23 | -------------------------------------------------------------------------------- /04_Lesson (Units & Sizes)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Units & Sizes 7 | 8 | 9 | 10 |
    11 |

    CSS Units

    12 |
    13 |
    14 |

    15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia 16 | laudantium exercitationem corporis quia dolores esse enim? 17 | Necessitatibus quisquam, magni iste beatae earum et fugiat aut delectus 18 | porro voluptate, praesentium totam? 19 |

    20 |
    21 | 22 | 23 | -------------------------------------------------------------------------------- /12_Lesson (Columns)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); 2 | 3 | body { 4 | font-size: 1.5rem; 5 | font-family: "Roboto", sans-serif; 6 | } 7 | 8 | .columns { 9 | /* column-count: 4; 10 | column-width: 250px; */ 11 | columns: 4 250px; 12 | column-rule: 3px solid #333; 13 | column-gap: 3rem; 14 | } 15 | 16 | .columns p { 17 | margin-top: 0; 18 | } 19 | 20 | .columns h2 { 21 | margin-top: 0; 22 | background-color: #333; 23 | color: #fff; 24 | padding: 1rem; 25 | break-inside: avoid; 26 | } 27 | 28 | .quote { 29 | margin-top: 2rem; 30 | font-size: 3rem; 31 | text-align: center; 32 | color: #333; 33 | column-span: all; 34 | } 35 | 36 | .nowrap { 37 | white-space: nowrap; 38 | } 39 | -------------------------------------------------------------------------------- /Chapter 2/HSLA.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HSLA 7 | 23 | 24 | 25 |

    HSLA Colors

    26 |
    27 | Hello World 28 |
    29 | 30 |
    31 | Hello World 32 |
    33 | 34 | -------------------------------------------------------------------------------- /08_Lesson (List Styles)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); 2 | 3 | body { 4 | padding: 5% 10%; 5 | font-size: 2rem; 6 | font-family: "Roboto", sans-serif; 7 | } 8 | 9 | ol { 10 | list-style-type: lower-alpha; 11 | } 12 | 13 | ul { 14 | list-style-type: square; 15 | text-align: center; 16 | list-style-position: inside; 17 | color: #00f; 18 | line-height: 1.6; 19 | /* list-style-image: url("images/checkmark.png"); 20 | list-style: square url("images/checkmark.png") inside; */ 21 | } 22 | 23 | ul li:nth-child(2) { 24 | color: red; 25 | } 26 | 27 | /* ul li:nth-child(odd) { 28 | color: red; 29 | } */ 30 | 31 | ul ::marker { 32 | color: red; 33 | font-family: fantasy; 34 | font-size: 1em; 35 | content: "Only $5 >> "; 36 | } 37 | -------------------------------------------------------------------------------- /11_Lesson (Floats & Clears)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); 2 | 3 | body { 4 | font-size: 1.5rem; 5 | font-family: "Roboto", sans-serif; 6 | width: 600px; 7 | margin: 1rem auto; 8 | border: 1px solid #f3f; 9 | padding: 2rem; 10 | } 11 | 12 | .block { 13 | width: 15vw; 14 | height: 15vw; 15 | background-color: #000; 16 | color: #fff; 17 | padding: 1rem; 18 | } 19 | 20 | .left { 21 | float: left; 22 | margin-right: 1rem; 23 | } 24 | 25 | .right { 26 | float: right; 27 | margin-left: 1rem; 28 | } 29 | 30 | .clear { 31 | clear: both; 32 | } 33 | 34 | section { 35 | background-color: bisque; 36 | border: 1px solid #333; 37 | padding: 1rem; 38 | /* overflow: auto; */ 39 | /* OR */ 40 | display: flow-root; 41 | } 42 | -------------------------------------------------------------------------------- /Chapter 1/InternalOrEmbeddedCSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Internal Or Embedded CSS 7 | 18 | 19 | 20 |

    PIAIC Offers The Following Courses:

    21 |
    22 |
  • Artificial Intelligence
    • 23 |
  • Blockchain
    • 24 |
  • Cloud Native Computing
    • 25 |
  • Internet Of Things
    • 26 |
    27 | 28 | -------------------------------------------------------------------------------- /05_Lesson (Box Model)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Box Model 7 | 8 | 9 | 10 |
    11 |

    CSS Box Model

    12 |
    13 |
    14 |

    15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia 16 | laudantium exercitationem corporis quia dolores esse enim? 17 | Necessitatibus quisquam, magni iste beatae earum et fugiat aut delectus 18 | porro voluptate, praesentium totam? 19 |

    20 |
    21 |
    22 | 23 | 24 | -------------------------------------------------------------------------------- /15_Lesson (Grid)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Grid 7 | 8 | 9 | 10 |
    11 |

    Header

    12 |
    13 |
    14 |
    1
    15 |
    2
    16 |
    3
    17 |
    4
    18 |
    5
    19 |
    6
    20 |
    21 | 24 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /08_Lesson (List Styles)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Lists 7 | 8 | 9 | 10 |
    11 |

    CSS Lists

    12 |
    13 |
    14 |
    15 |

    Ordered List

    16 |
      17 |
    1. Step One
      2. 18 |
    2. Step Two
      3. 19 |
    3. Step Three
      4. 20 |
    21 |
    22 |
    23 |

    Unordered List

    24 | 29 |
    30 |
    31 | 32 | 33 | -------------------------------------------------------------------------------- /09 Lesson (Mini Project)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Menu 7 | 8 | 9 | 10 | 20 |

    21 | Learn more about 22 | Amazing Foods! 26 |

    27 | 28 | 29 | -------------------------------------------------------------------------------- /06_Lesson (Text and Fonts)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Text and Fonts 7 | 8 | 9 | 10 |
    11 |

    CSS Typography

    12 |
    13 |
    14 |

    15 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis sed odit 16 | rerum fugiat reiciendis, aperiam aliquid, accusamus, necessitatibus 17 | error laboriosam nulla possimus corporis ducimus. Sit, voluptates. Nemo 18 | at nam cum. 19 |

    20 | 25 |
    26 | 27 | 28 | -------------------------------------------------------------------------------- /10_Lesson (Display Property)/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-size: 2rem; 11 | font-family: "Roboto", sans-serif; 12 | } 13 | 14 | p { 15 | background-color: lightgray; 16 | } 17 | 18 | .opposite { 19 | display: inline-block; 20 | background-color: #333; 21 | color: whitesmoke; 22 | margin-top: 100px; 23 | height: 200px; 24 | padding: 4rem; 25 | } 26 | 27 | ul { 28 | list-style-type: none; 29 | padding: 0.5rem; 30 | text-align: right; 31 | background-color: #000; 32 | margin: 0; 33 | } 34 | 35 | li { 36 | display: inline-block; 37 | margin-inline: 0.5rem; 38 | } 39 | 40 | li a { 41 | color: #fff; 42 | text-decoration: none; 43 | } 44 | 45 | li a:hover, li a:focus { 46 | text-decoration: underline; 47 | } -------------------------------------------------------------------------------- /Chapter 2/Colors1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Colors 7 | 20 | 21 | 22 |

    PIAIC

    23 |

    Presidential Initiative For Artificial Intelligence & Computing (PIAIC)

    24 |

    25 | The mission of PIAIC is to reshape Pakistan by revolutionizing education, research, and business by 26 | dopting latest, cutting-edge technologies. Experts are calling this the 4th industrial revolution. 27 | We want Pakistan to become a global hub for AI, data science, cloud native computing, edge computing, 28 | blockchain, augmented reality, and internet of things. 29 |

    30 | 31 | -------------------------------------------------------------------------------- /09 Lesson (Mini Project)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin: 0.5rem; 11 | font-family: "Roboto", sans-serif; 12 | text-align: center; 13 | } 14 | 15 | nav { 16 | border: 2px solid #333; 17 | border-radius: 2rem; 18 | margin: 0 auto 1rem; 19 | max-width: 600px; 20 | font-size: 3rem; 21 | line-height: 6.5rem; 22 | } 23 | 24 | h2 { 25 | padding: 1rem; 26 | background-color: gold; 27 | border-radius: 2rem 2rem 0 0; 28 | } 29 | 30 | ul { 31 | list-style-type: none; 32 | } 33 | 34 | li { 35 | border-top: 1px solid #333; 36 | } 37 | 38 | li a { 39 | display: block; 40 | } 41 | 42 | li a, 43 | li a:visited { 44 | text-decoration: none; 45 | color: #333; 46 | } 47 | 48 | li a:hover, 49 | li a:focus { 50 | background-color: #333; 51 | color: whitesmoke; 52 | cursor: pointer; 53 | } 54 | 55 | li:last-child a { 56 | border-radius: 0 0 2rem 2rem; 57 | } 58 | -------------------------------------------------------------------------------- /Chapter 1/Inheritance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Inheritance 7 | 25 | 26 | 27 |

    CSS Rules

    28 |

    The Women Empowerment Division of the Presidential Initiative For Artificial Intelligence & Computing (PIAIC) 29 | is committed to the empowerment and autonomy of women in Pakistan.

    30 |

    PIAIC Women in Technology WIT is a group dedicating to providing opportunities to women.

    31 | 32 |
    To find out more about PIAIC WIT, please visit PIAIC WIT
    33 | 34 | -------------------------------------------------------------------------------- /Chapter 1/CSSRulesCascading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Rules Cascading 7 | 28 | 29 | 30 |

    CSS Rules

    31 |

    The Women Empowerment Division of the Presidential Initiative For Artificial Intelligence & Computing (PIAIC) 32 | is committed to the empowerment and autonomy of women in Pakistan.

    33 |

    PIAIC Women in Technology WIT is a group dedicating to providing opportunities to women.

    34 | 35 |
    Women currently make up for only 10% of the student body at PIAIC.
    36 | 37 | -------------------------------------------------------------------------------- /07_Lesson (Styling Hyperlinks)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Links 7 | 8 | 9 | 10 |
    11 |

    CSS Links

    12 |
    13 |
    14 |

    15 | Welcome to my page about 16 | cool web links. 17 |

    18 | 19 |

    20 | Actually.. that isn't a good search phrase. Let's search for 21 | hypertext links 24 | instead! 25 |

    26 | 27 |

    28 | I created page one with information about 29 | guitars. 30 |

    31 | 32 |

    33 | I created page two with information about 34 | JavaScript. 35 |

    36 |
    37 | 38 | 39 | -------------------------------------------------------------------------------- /Chapter 2/BackgroundColors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Colors 7 | 25 | 26 | 27 |

    PIAIC

    28 |

    Presidential Initiative For Artificial Intelligence & Computing (PIAIC)

    29 |

    30 | The mission of PIAIC is to reshape Pakistan by revolutionizing education, research, and business by 31 | dopting latest, cutting-edge technologies. Experts are calling this the 4th industrial revolution. 32 | We want Pakistan to become a global hub for AI, data science, cloud native computing, edge computing, 33 | blockchain, augmented reality, and internet of things. 34 |

    35 | 36 | -------------------------------------------------------------------------------- /13_Lesson (Position Property)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Position Property 7 | 8 | 9 | 10 | 26 | 27 | 28 |
    29 |
    Header One
    30 |
    31 |
    32 |
    Header Two
    33 |

    Two

    34 |
    35 |
    36 |
    Header Three
    37 |

    Three

    38 |
    39 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Chapter 2/RGBA.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RGBA 7 | 37 | 38 | 39 |
    40 |
    41 | 100% Opacity 42 |
    43 |
    44 |
    45 |
    46 | 60% Opacity 47 |
    48 |
    49 |
    50 |
    51 | 30% Opacity 52 |
    53 |
    54 |
    55 |
    56 | 10% Opacity 57 |
    58 |
    59 | 60 | -------------------------------------------------------------------------------- /Chapter 2/Opacity2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Opacity 7 | 39 | 40 | 41 |
    42 |
    43 | 100% Opacity 44 |
    45 |
    46 |
    47 |
    48 | 60% Opacity 49 |
    50 |
    51 |
    52 |
    53 | 30% Opacity 54 |
    55 |
    56 |
    57 |
    58 | 10% Opacity 59 |
    60 |
    61 | 62 | -------------------------------------------------------------------------------- /14_Lesson (Flexbox)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Roboto", sans-serif; 11 | min-height: 100vh; 12 | padding: 20px; 13 | } 14 | 15 | .container { 16 | max-width: 800px; 17 | min-height: 400px; 18 | margin-inline: auto; 19 | border: 1px solid #000; 20 | display: flex; 21 | gap: 1rem; 22 | justify-content: center; 23 | align-items: center; 24 | align-content: space-evenly; 25 | /* flex-direction: row; 26 | flex-wrap: wrap; */ 27 | flex-flow: row wrap; /* shorthand for flex-direction and flex-wrap */ 28 | } 29 | 30 | .box { 31 | /* min-width: 100px; */ 32 | height: 100px; 33 | background-color: #000; 34 | color: #fff; 35 | font-size: 2rem; 36 | padding: 0.5rem; 37 | 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | 42 | flex-grow: 1; 43 | flex-basis: 100px; 44 | /* below is the shorthand for flex-grow, flex-shrink and flex-basis */ 45 | flex: 1 1 100px; 46 | } 47 | 48 | .box:nth-child(2) { 49 | flex-grow: 2; 50 | order: 4; 51 | /* to make the below line work, you need to comment out the above line */ 52 | /* flex: 2 2 150px; */ 53 | } 54 | 55 | /* Change the 'flex-flow' property of 'wrap' to 'nowrap' and also change the flex-grow to ;'flex-shrink' in box class styled above. Also, increase the value of 'flex-basis' to about '250px' */ 56 | /* .box:nth-child(2) { 57 | flex-shrink: 2; 58 | } */ 59 | -------------------------------------------------------------------------------- /12_Lesson (Columns)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Columns 7 | 8 | 9 | 10 |
    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ad sed 13 | numquam eius id vel placeat iste quam. Voluptatum, odio. 14 |

    15 |

    16 | Saepe dolorum nostrum fuga. Nulla repellat eius explicabo suscipit nam 17 | in corporis veniam. Voluptas non debitis nihil saepe iure molestias. 18 |

    19 | 20 |

    21 | “Where's my rug?” 22 | —The Dude 23 |

    24 |

    25 | Adipisci natus quia dolorum, obcaecati reprehenderit necessitatibus 26 | incidunt laborum quidem perspiciatis nihil ut libero eos vel quos 27 | voluptas neque nobis? 28 |

    29 |

    30 | Laborum, mollitia voluptates excepturi obcaecati vero voluptatum quaerat 31 | doloremque at dignissimos, molestias et ipsum beatae aspernatur 32 | asperiores accusantium, eveniet optio? 33 |

    34 |
    35 |

    36 | Earum non praesentium ducimus nulla dicta qui architecto repellat, 37 | asperiores maxime similique, quaerat laudantium quia facere perspiciatis 38 | voluptatibus dolores fuga? 39 |

    40 | 41 | 42 | -------------------------------------------------------------------------------- /03_Lesson (Colors)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Colors 7 | 8 | 9 | 10 |
    11 |

    CSS Colors

    12 |
    13 |
    14 |
    15 |

    Article 1

    16 |

    17 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam 18 | cumque voluptatum tempore officiis deserunt officia, molestias tenetur 19 | tempora. Numquam assumenda eligendi ipsam ut quibusdam ex autem 20 | placeat deleniti hic optio? 21 |

    22 |
    23 |
    24 |

    Article 2

    25 |

    26 | Iste, possimus, delectus blanditiis, in dolores voluptatem culpa 27 | officia quae eius consequatur suscipit optio cum hic. Architecto ipsum 28 | rem accusamus! Quaerat repellendus nihil ratione tenetur 29 | voluptas veritatis, sunt nesciunt rem. 30 |

    31 |
    32 |
    33 |

    Article 3

    34 |

    35 | Iste, possimus, delectus blanditiis, in dolores voluptatem culpa 36 | officia quae eius consequatur suscipit optio cum hic. Architecto 37 | ipsum rem accusamus! Quaerat repellendus nihil ratione 38 | tenetur voluptas veritatis, sunt nesciunt rem. 39 |

    40 |
    41 |
    42 | 43 | 44 | -------------------------------------------------------------------------------- /02_Lesson (Selectors)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Selectors 7 | 8 | 9 | 10 | 11 |
    12 |

    CSS Selectors

    13 |
    14 |
    15 |
    16 |

    Article 1

    17 |

    18 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam 19 | cumque voluptatum tempore officiis deserunt officia, molestias tenetur 20 | tempora. Numquam assumenda eligendi ipsam ut quibusdam ex autem 21 | placeat deleniti hic optio? 22 |

    23 |
    24 |
    25 |

    Article 2

    26 |

    27 | Iste, possimus, delectus blanditiis, in dolores voluptatem culpa 28 | officia quae eius consequatur suscipit optio cum hic. Architecto ipsum 29 | rem accusamus! Quaerat repellendus 30 | nihil ratione tenetur voluptas 31 | veritatis, sunt nesciunt rem. 32 |

    33 |
    34 |
    35 |

    Article 3

    36 |

    37 | Iste, possimus, delectus blanditiis, in dolores voluptatem culpa 38 | officia quae eius consequatur suscipit optio cum hic. Architecto 39 | ipsum rem accusamus! Quaerat 40 | repellendus nihil ratione tenetur voluptas veritatis, sunt nesciunt 41 | rem. 42 |

    43 |
    44 |
    45 | 46 | 47 | -------------------------------------------------------------------------------- /15_Lesson (Grid)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Roboto", sans-serif; 11 | min-height: 100vh; 12 | 13 | display: grid; 14 | grid-template-columns: repeat(9, 1fr); 15 | grid-auto-rows: 50px auto 50px; 16 | grid-template-areas: 17 | "hd hd hd hd hd hd hd hd hd" 18 | "mn mn mn mn mn mn mn sb sb" 19 | "ft ft ft ft ft ft ft ft ft"; 20 | gap: 0.5rem; 21 | } 22 | 23 | .el { 24 | background-color: rebeccapurple; 25 | color: white; 26 | display: grid; 27 | place-content: center; 28 | } 29 | 30 | .header { 31 | grid-area: hd; 32 | } 33 | 34 | .sidebar { 35 | grid-area: sb; 36 | background-color: #00f; 37 | } 38 | 39 | .footer { 40 | grid-area: ft; 41 | } 42 | 43 | .container { 44 | grid-area: mn; 45 | min-height: 400px; 46 | display: grid; 47 | grid-template-columns: repeat(2, 1fr 2fr); 48 | grid-auto-rows: minmax(150px, auto); 49 | gap: 1rem; 50 | } 51 | 52 | .box { 53 | background-color: #000; 54 | color: #fff; 55 | font-size: 2rem; 56 | padding: 0.5rem; 57 | } 58 | 59 | .box:first-child { 60 | background-color: #00f; 61 | /* grid-column-start: 1; 62 | grid-column-end: 4; */ 63 | /* below is the shorthand for grid-column-start and grid-column-end */ 64 | grid-column: 1 / 4; 65 | /* grid-row-start: 1; 66 | grid-row-end: 3; */ 67 | /* below is the shorthand for grid-row-start and grid-row-end */ 68 | grid-row: 1 / 3; 69 | 70 | /* below are the lines which we use to align the content vertically and horizontally inside a grid */ 71 | display: grid; 72 | align-items: center; 73 | justify-content: center; 74 | /* below is the shorthand for align-items and justify-content */ 75 | place-content: center center; 76 | } 77 | 78 | .box:nth-child(2) { 79 | background-color: purple; 80 | grid-column: 1 / 5; 81 | grid-row: 3 / 4; 82 | } 83 | -------------------------------------------------------------------------------- /11_Lesson (Floats & Clears)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Floats & Clears 7 | 8 | 9 | 10 |
    11 |
    Float
    12 |

    13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 14 | reiciendis deleniti ab perferendis omnis incidunt placeat ea, ullam 15 | eveniet non. 16 |

    17 |
    18 | 19 |

    20 | Explicabo blanditiis pariatur tempora necessitatibus dolor accusantium 21 | porro, in sed quam cum reprehenderit eaque libero autem quae! Pariatur, 22 | porro odio. 23 |

    24 |

    25 | Excepturi corrupti reiciendis beatae sapiente cumque quae consequatur 26 | dolore dolor voluptates minima pariatur, modi quod molestiae quia at vitae 27 | illo? 28 |

    29 |

    30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum consectetur 31 | ratione nemo quaerat quidem ex fugiat eius doloremque blanditiis repellat. 32 |

    33 |
    34 |
    Float
    35 |

    36 | Porro ratione repellendus nemo deleniti facere tempore cum accusantium? 37 | Quas minus sit harum enim dolores repellat repudiandae, laudantium 38 | officia! Sapiente. 39 |

    40 |
    41 | 42 |

    43 | Excepturi ipsa doloremque repellat delectus minus, est totam fugit placeat 44 | ad quos nam suscipit sit deserunt iure repudiandae autem neque! 45 |

    46 |

    47 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, omnis 48 | voluptatem corrupti similique pariatur fuga neque doloribus iusto sed 49 | exercitationem! 50 |

    51 |

    52 | Quasi earum temporibus nobis doloribus rem illum eum eveniet magni 53 | cupiditate, inventore et, atque fuga non. Voluptate nostrum laboriosam 54 | itaque! 55 |

    56 | 57 | 58 | -------------------------------------------------------------------------------- /13_Lesson (Position Property)/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Roboto", sans-serif; 11 | min-height: 200vh; 12 | font-size: 1.5rem; 13 | } 14 | .outer-container { 15 | border: 3px dashed #000; 16 | width: 75vw; 17 | height: 85vh; 18 | margin: 40px auto; 19 | position: relative; 20 | } 21 | 22 | .inner-container { 23 | border: 2px solid #00f; 24 | width: 40vw; 25 | height: 50vh; 26 | margin: 200px auto; 27 | } 28 | 29 | .box { 30 | width: 150px; 31 | height: 150px; 32 | color: #fff; 33 | padding: 1rem; 34 | } 35 | 36 | .absolute { 37 | background-color: #00f; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | z-index: 1; 42 | } 43 | 44 | .relative { 45 | background-color: #f00; 46 | position: relative; 47 | top: 300px; 48 | left: 100px; 49 | } 50 | 51 | .fixed { 52 | background-color: green; 53 | position: fixed; 54 | top: 100px; 55 | } 56 | 57 | .sticky { 58 | background-color: #000; 59 | position: sticky; 60 | top: 0; 61 | } 62 | 63 | /* /////////////////////////////////// */ 64 | 65 | html { 66 | scroll-behavior: smooth; 67 | } 68 | 69 | section { 70 | height: 100vh; 71 | } 72 | 73 | .blue { 74 | background-color: #00f; 75 | } 76 | 77 | .red { 78 | background-color: #f00; 79 | } 80 | 81 | .green { 82 | background-color: green; 83 | } 84 | 85 | header, 86 | footer { 87 | color: #fff; 88 | text-align: center; 89 | height: 100px; 90 | } 91 | 92 | header { 93 | position: sticky; 94 | top: 0; 95 | font-size: 5rem; 96 | } 97 | 98 | footer { 99 | background-color: #000; 100 | position: sticky; 101 | bottom: 0; 102 | font-size: 3rem; 103 | } 104 | 105 | a { 106 | color: #fff; 107 | text-decoration: none; 108 | } 109 | 110 | a:visited { 111 | color: burlywood; 112 | } 113 | 114 | a:hover, 115 | a:focus { 116 | color: #f00; 117 | text-decoration: underline; 118 | } 119 | 120 | .social { 121 | background-color: orange; 122 | color: #fff; 123 | font-size: inherit; 124 | padding: 1rem; 125 | border-radius: 0 20px 20px 0; 126 | position: fixed; 127 | top: 30%; 128 | left: 0; 129 | z-index: 1; 130 | } 131 | -------------------------------------------------------------------------------- /Chapter 1/DescendantSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Descendant Selector 7 | 12 | 13 | 14 |

    Descendant Selector

    15 |

    PIAIC offers the folowing courses:

    16 |
    17 |

    1) Artificial Intelligence

    18 |
    19 | 20 |
    21 |

    2) Blockchain

    22 |
    23 | 24 |
    25 |

    3) Cloud Native Computing

    26 |
    27 | 28 |
    29 |

    4) Internet Of Things

    30 |
    31 | 32 |

    Below is the list of students

    33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 98 | 99 |
    S. NoNameRoll No.Courses
    1AliPIAIC001 46 |
      47 |
    1. Artificial Intelligence
      2. 48 |
    2. Blochchain
      3. 49 |
    3. Cloud Native Computing
      4. 50 |
    4. Internet Of Things
      5. 51 |
    52 |
    2AineePIAIC002 60 |
      61 |
    1. Artificial Intelligence
      2. 62 |
    2. Internet Of Things
      3. 63 |
    64 |
    3SaraPIAIC003 72 |
      73 |

    1. Cloud Native Computing

      2. 74 |

    2. Internet Of Things

      3. 75 |
    76 |
    4ImranPIAIC004 84 |
      Artificial Intelligence
    85 |
    5IrfanPIAIC005 93 |
      94 |
    1. Blockchain
      2. 95 |
    2. Cloud Native Computing
      3. 96 |
    97 |
    100 | 101 | -------------------------------------------------------------------------------- /Chapter 1/AdjacentSiblingSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Adjacent Sibling Selector 7 | 12 | 13 | 14 |

    Adjacent Sibling Selector

    15 |

    PIAIC offers the folowing courses:

    16 |
    17 |

    1) Artificial Intelligence

    18 |
    19 | 20 |
    21 |

    2) Blockchain

    22 |
    23 | 24 |
    25 |

    3) Cloud Native Computing

    26 |
    27 | 28 |
    29 |

    4) Internet Of Things

    30 |
    31 | 32 |

    Below is the list of students

    33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 98 | 99 |
    S. NoNameRoll No.Courses
    1AliPIAIC001 46 |
      47 |
    1. Artificial Intelligence
      2. 48 |
    2. Blochchain
      3. 49 |
    3. Cloud Native Computing
      4. 50 |
    4. Internet Of Things
      5. 51 |
    52 |
    2AineePIAIC002 60 |
      61 |
    1. Artificial Intelligence
      2. 62 |
    2. Internet Of Things
      3. 63 |
    64 |
    3SaraPIAIC003 72 |
      73 |

    1. Cloud Native Computing

      2. 74 |

    2. Internet Of Things

      3. 75 |
    76 |
    4ImranPIAIC004 84 |
      Artificial Intelligence
    85 |
    5IrfanPIAIC005 93 |
      94 |
    1. Blockchain
      2. 95 |
    2. Cloud Native Computing
      3. 96 |
    97 |
    100 | 101 | -------------------------------------------------------------------------------- /Chapter 1/UniversalSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Universal Selector 7 | 12 | 13 | 14 |

    Universal Selector

    15 |

    PIAIC offers the folowing courses:

    16 |
    17 |

    1) Artificial Intelligence

    18 |
    19 | 20 |
    21 |

    2) Blockchain

    22 |
    23 | 24 |
    25 |

    3) Cloud Native Computing

    26 |
    27 | 28 |
    29 |

    4) Internet Of Things

    30 |
    31 | 32 |

    Below is the list of students

    33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 100 | 101 |
    S. NoNameRoll No.Courses
    1AliPIAIC001 46 |
      47 |
    1. Artificial Intelligence
      2. 48 |
    2. Blochchain
      3. 49 |
    3. Cloud Native Computing
      4. 50 |
    4. Internet Of Things
      5. 51 |
    52 |
    2AineePIAIC002 60 |
      61 |
    1. Artificial Intelligence
      2. 62 |
    2. Internet Of Things
      3. 63 |
    64 |
    3SaraPIAIC003 72 |
      73 |

    1. Native Computing

      2. 74 |

    2. Internet Of Things

      3. 75 |
    76 |
    4ImranPIAIC004 84 |
      85 |
    1. Artificial Intelligence
      2. 86 |
    87 |
    5IrfanPIAIC005 95 |
      96 |
    1. Blockchain
      2. 97 |
    2. Cloud Native Computing
      3. 98 |
    99 |
    102 | 103 | -------------------------------------------------------------------------------- /Chapter 1/TypeSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Type Selector 7 | 16 | 17 | 18 |

    Type Selector

    19 |

    PIAIC offers the folowing courses:

    20 |
    21 |

    1) Artificial Intelligence

    22 |
    23 | 24 |
    25 |

    2) Blockchain

    26 |
    27 | 28 |
    29 |

    3) Cloud Native Computing

    30 |
    31 | 32 |
    33 |

    4) Internet Of Things

    34 |
    35 | 36 |

    Below is the list of students

    37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 102 | 103 |
    S. NoNameRoll No.Courses
    1AliPIAIC001 50 |
      51 |
    1. Artificial Intelligence
      2. 52 |
    2. Blochchain
      3. 53 |
    3. Cloud Native Computing
      4. 54 |
    4. Internet Of Things
      5. 55 |
    56 |
    2AineePIAIC002 64 |
      65 |
    1. Artificial Intelligence
      2. 66 |
    2. Internet Of Things
      3. 67 |
    68 |
    3SaraPIAIC003 76 |
      77 |

    1. Cloud Native Computing

      2. 78 |

    2. Internet Of Things

      3. 79 |
    80 |
    4ImranPIAIC004 88 |
      Artificial Intelligence
    89 |
    5IrfanPIAIC005 97 |
      98 |
    1. Blockchain
      2. 99 |
    2. Cloud Native Computing
      3. 100 |
    101 |
    104 | 105 | -------------------------------------------------------------------------------- /Chapter 1/ChildSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Child Selector 7 | 16 | 17 | 18 |

    Child Selector

    19 |

    PIAIC offers the folowing courses:

    20 |
    21 |

    1) Artificial Intelligence

    22 |
    23 | 24 |
    25 |

    2) Blockchain

    26 |
    27 | 28 |
    29 |

    3) Cloud Native Computing

    30 |
    31 | 32 |
    33 |

    4) Internet Of Things

    34 |
    35 | 36 |

    Below is the list of students

    37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 102 | 103 |
    S. NoNameRoll No.Courses
    1AliPIAIC001 50 |
      51 |
    1. Artificial Intelligence
      2. 52 |
    2. Blochchain
      3. 53 |
    3. Cloud Native Computing
      4. 54 |
    4. Internet Of Things
      5. 55 |
    56 |
    2AineePIAIC002 64 |
      65 |
    1. Artificial Intelligence
      2. 66 |
    2. Internet Of Things
      3. 67 |
    68 |
    3SaraPIAIC003 76 |
      77 |

    1. Cloud Native Computing

      2. 78 |

    2. Internet Of Things

      3. 79 |
    80 |
    4ImranPIAIC004 88 |
      Artificial Intelligence
    89 |
    5IrfanPIAIC005 97 |
      98 |
    1. Blockchain
      2. 99 |
    2. Cloud Native Computing
      3. 100 |
    101 |
    104 | 105 | -------------------------------------------------------------------------------- /Chapter 1/IDSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ID Selector 7 | 16 | 17 | 18 |

    ID Selector

    19 |

    PIAIC offers the folowing courses:

    20 |
    21 |

    1) Artificial Intelligence

    22 |
    23 | 24 |
    25 |

    2) Blockchain

    26 |
    27 | 28 |
    29 |

    3) Cloud Native Computing

    30 |
    31 | 32 |
    33 |

    4) Internet Of Things

    34 |
    35 | 36 |

    Below is the list of students

    37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 102 | 103 |
    S. NoNameRoll No.Courses
    1AliPIAIC001 50 |
      51 |
    1. Artificial Intelligence
      2. 52 |
    2. Blochchain
      3. 53 |
    3. Cloud Native Computing
      4. 54 |
    4. Internet Of Things
      5. 55 |
    56 |
    2AineePIAIC002 64 |
      65 |
    1. Artificial Intelligence
      2. 66 |
    2. Internet Of Things
      3. 67 |
    68 |
    3SaraPIAIC003 76 |
      77 |

    1. Cloud Native Computing

      2. 78 |

    2. Internet Of Things

      3. 79 |
    80 |
    4ImranPIAIC004 88 |
      Artificial Intelligence
    89 |
    5IrfanPIAIC005 97 |
      98 |
    1. Blockchain
      2. 99 |
    2. Cloud Native Computing
      3. 100 |
    101 |
    104 | 105 | -------------------------------------------------------------------------------- /Chapter 1/GeneralSiblingSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | General Sibling Selector 7 | 16 | 17 | 18 |

    CSS Selectors

    19 |

    General Sibling Selector

    20 |

    PIAIC offers the folowing courses:

    21 |
    22 |

    1) Artificial Intelligence

    23 |
    24 | 25 |
    26 |

    2) Blockchain

    27 |
    28 | 29 |
    30 |

    3) Cloud Native Computing

    31 |
    32 | 33 |
    34 |

    4) Internet Of Things

    35 |
    36 | 37 |

    Below is the list of students

    38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 103 | 104 |
    S. NoNameRoll No.Courses
    1AliPIAIC001 51 |
      52 |
    1. Artificial Intelligence
      2. 53 |
    2. Blochchain
      3. 54 |
    3. Cloud Native Computing
      4. 55 |
    4. Internet Of Things
      5. 56 |
    57 |
    2AineePIAIC002 65 |
      66 |
    1. Artificial Intelligence
      2. 67 |
    2. Internet Of Things
      3. 68 |
    69 |
    3SaraPIAIC003 77 |
      78 |

    1. Cloud Native Computing

      2. 79 |

    2. Internet Of Things

      3. 80 |
    81 |
    4ImranPIAIC004 89 |
      Artificial Intelligence
    90 |
    5IrfanPIAIC005 98 |
      99 |
    1. Blockchain
      2. 100 |
    2. Cloud Native Computing
      3. 101 |
    102 |
    105 | 106 | -------------------------------------------------------------------------------- /Chapter 1/ClassSelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Class Selector 7 | 20 | 21 | 22 |

    Class Selector

    23 |

    PIAIC offers the folowing courses:

    24 |
    25 |

    1) Artificial Intelligence

    26 |
    27 | 28 |
    29 |

    2) Blockchain

    30 |
    31 | 32 |
    33 |

    3) Cloud Native Computing

    34 |
    35 | 36 |
    37 |

    4) Internet Of Things

    38 |
    39 | 40 |

    Below is the list of students

    41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 108 | 109 |
    S. NoNameRoll No.Courses
    1AliPIAIC001 54 |
      55 |
    1. Artificial Intelligence
      2. 56 |
    2. Blochchain
      3. 57 |
    3. Cloud Native Computing
      4. 58 |
    4. Internet Of Things
      5. 59 |
    60 |
    2AineePIAIC002 68 |
      69 |
    1. Artificial Intelligence
      2. 70 |
    2. Internet Of Things
      3. 71 |
    72 |
    3SaraPIAIC003 80 |
      81 |

    1. Cloud Native Computing

      2. 82 |

    2. Internet Of Things

      3. 83 |
    84 |
    4ImranPIAIC004 92 |
      93 |
    1. Artificial Intelligence
      2. 94 |
    95 |
    5IrfanPIAIC005 103 |
      104 |
    1. Blockchain
      2. 105 |
    2. Cloud Native Computing
      3. 106 |
    107 |
    110 | 111 | --------------------------------------------------------------------------------