Posts

Showing posts from November, 2021

Transform Property In CSS

 <!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>CSS Transform</title>     <style>         * {             margin: 0px;             padding: 0px;         }         .container {             height: 80vh;             background-color: rgb(44, 19, 92);             display: flex;             justify-content: center;             align-items: center;         }         .box {             displ...
Post a Comment
Read more

Creating Transitions in CSS

 <!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>CSS Transition</title> </head> <style>     body{         background-color: black;     }      #Box{          display: flex;          height: 200px;          width: 200px;          background-color: rgb(63, 25, 201);          justify-content: center;          align-content: center;          align-items: center;          /* transition-property: background-color;          transition-duration: 3s;   ...
Post a Comment
Read more

Creating Animations & Keyframes

 <!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>Keyframes and Animations</title>     <style>         .container {             background-color: rgb(51, 45, 45);         }         .box {             background-color: grey;             width: 250px;             height: 250px;             position: relative;             animation-name: suraj1;             animation-duration: 2s;             animation-iteration-count: 5;   ...
Post a Comment
Read more

Variables & Custom Properties

 <!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>CSS Variable/Custom Properties</title>     <style>         :root {             --box-color: grey;             --primary-color: blue;             --danger-color: red;             --maxw: 333px;         }         .box {             --box-color: pink;             width: 200px;             height: 200px;             background-color: var(--box-color);         ...
Post a Comment
Read more

Box Shadow and Text Shadow

 <!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>Box Shadow and Text Shadow</title>     <style>         .container {             display: flex;         }         .card {             padding: 23px 12px;             margin: 23px 12px;             /* border: 2px solid red; */             background-color: grey;             /* box-shadow: offset-x offset-y color; */             /* box-shadow: offset-x offset-y blur-radius color; */        ...
Post a Comment
Read more

Before and after Pseudo selectors

 <!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>Before and after Pseudo selectors</title>     <style>         body {             background-color: black;             color: white;             margin: 0px;             padding: 0px;         }         header::before {             background: url('https://source.unsplash.com/1600x900/?technology') no-repeat center center/cover;             content: "";             position: absolute;       ...
Post a Comment
Read more

Attribute & nth child pseudo Selectors

 <!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>Attribute and nth pseudo selectors</title>     <style>         body {             background-color: rgb(22, 19, 19);         }         .container {             display: block;             width: 233px;             margin: auto;         }         input {             display: block;         }         input[type='text'] {             padding: 23px;   ...
Post a Comment
Read more

More on CSS Selectors

 <!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>More on selectors</title>     <style>         h1{             background-color: red;             color: black;             font-weight: bold;             text-align: center;         }         body{             background-color: rgb(97, 92, 97);         }         /* if p is contained by any li which is contained by div  */         /* div li p{             color: rgb(255, 25...
Post a Comment
Read more

Media Queries

 <!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>Media Queries</title>     <style>        .box{            font-size: 35px;            text-align: center;             background-color: rgb(252, 10, 10);             color: rgb(255, 255, 255);             display: none;         }         @media only screen and (max-width:300px){             #box-1{                 display: block;                 background-c...
Post a Comment
Read more

em, rem, vh, and vw units

 <!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>Size units</title>     <style>         html{             font-size: 25px;         }         .container {             width: 400px;             height: 100vh;             width: 100vw;             font-size: 10px;             border: 2px solid red;         }         h1 {             text-align: center;         }         #first{ ...
Post a Comment
Read more

Flexbox Tutoria Guide

 <!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>Flexbox Tutorial</title>     <style>         .container {             height: 544px;             width: 100%;             border: 2px solid black;             /* initialize the container as a flex box  */             display: flex;             /* flex properties for flex container  */             /* default value of flex direction is row  */             /* flex-direction: row; */       ...
Post a Comment
Read more

Visibility & Z-index

 <!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>Visibility and z-index</title>     <style>         .box{             width: 170px;             height: 170px;             border: 2px solid black;         }         #box1{             position: relative;             top: 49px;             z-index: 35;             background-color: green;         }         #box2{             position: rela...
Post a Comment
Read more

1st Project(Creating A Gym Website)

 <!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>Suraj Fitness</title> </head> <link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <style>     /* <!-- css reset --> */     body {         font-family: 'Zen Kurenaido', sans-serif;         color: white;         margin: 0px;         padding: 0px;         background: url('img/bg.jpg');     }     .left {         display: inline-block;         /* border: 2px solid rgb(15, 216, 15); */   ...
Post a Comment
Read more

Position Absolute, Relative, Fixed and Sticky in CSS

 <!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>Document</title>     <style>         .container {             border: 2px solid black;             background-color: rgb(5, 5, 5);             height: 3444px;         }         /* CSS Position: static(default), absolute, relative, fixed, sticky */         .box {             display: inline-block;             border: 2px solid red;             width: 150px;             height: 150px; ...
Post a Comment
Read more

CSS Display Property

 <!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>CSS Display property</title>     <style>         *{             box-sizing: border-box;         }         header{             border: 2px solid red;             margin: auto;             width: 1200px;         }         img{             margin: auto;             display: block;             width: 34px;         }         h3{ ...
Post a Comment
Read more

Creating A Navigation Menu

 <!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>Navigation</title>     <style>         .navbar {             background-color: rgb(0, 0, 0);             border-radius: 30px;         }         .navbar ul {             overflow: auto;         }         .navbar li {             float: left;             list-style: none;             margin: 13px 20px;         }         .navbar li a {       ...
Post a Comment
Read more

Styling List and Buttons

 <!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>Pseudo selectors & more designing</title>     <style>         .container{             border: 2px solid rgb(19, 17, 17);             background-color: rgb(165 143 157);             padding: 34px;             margin: 34px auto;             width: 666px;         }         a{             text-decoration: none;             color: black;         }         a:hover{ ...
Post a Comment
Read more

Float And Clear Explained

 <!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>Alignment</title>     <link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet">     <style>         * {             box-sizing: border-box;         }         body {             font-family: 'Zen Kurenaido', sans-serif;         }         .container {             width: 900px;             border: 3px solid purple;             margin: 30px auto;       ...
Post a Comment
Read more

CSS Box Model ,Margin, and, Padding

 <!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>Box Model</title>     <style>         body{             background-color: rgb(129 124 131);         }         *{             box-sizing: border-box;         }         .container{             background-color: rgb(173 180 205);             border: 3px solid rgb(0, 0, 0);             padding: 19px;             margin: 40px;             border-top-left-radius: 34px; ...
Post a Comment
Read more

Borders And Backgrounds

 <!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>Height, Width, borders and backgrounds</title>     <style>         #firstPara{             background-color: rgb(7, 160, 27);             height: 100px;             width: 455px;             border-width: 4px;             border-color: purple;             border-style: solid;             border-radius: 10px;         }         #secondPara{             background-color: rgb(74, 2...
Post a Comment
Read more

Colors in CSS

 <!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>Colors in CSS</title>     <style>         #firstPara{             color: rgb(251, 255, 0);         }         #secondPara{             color: rgb(71, 13, 233);         }         #thirdPara{             color: #e7e7e7;             background-color: rgb(245, 96, 27);         }     </style> </head> <body>     <h2>This is my first box</h2>     <p id="firstPara">This is a parag...
Post a Comment
Read more

Fonts in CSS

 <!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>CSS Fonts</title>     <link href="https://fonts.googleapis.com/css2?family=Fruktur&display=swap" rel="stylesheet">     <style>         p{             font-family: cursive;             font-size: 50px;             line-height: 1.3em;         }         span{             font-weight: bold;             font-style: italic;         }     </style> </head> <body>     <h4>CSS Fonts</h4>...
Post a Comment
Read more

Chrome Developer Tool

 <!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>Developers tools</title>     <style>         p{             color: purple;             font-style: italic;             background-color: rosybrown;         }     </style> </head> <body>     <h4>Developers Tools Tutorial</h4>     <p>This is Tutorial for Developer Tools</p> </body> </html>
Post a Comment
Read more

Selectors in CSS

 <!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>CSS Selectors</title>     <style>         /* Element Selector */         p{             border: 2px solid red;         }         /* Id Selector */         #firstPara{             color:green;         }         /* Class selector */         .bgBlue{             color: orange;             background-color: blue;         }         /* Grouping Selector */   ...
Post a Comment
Read more

Inline, Internal and External CSS

Post a Comment
Read more

Introduction to CSS

 HTML <!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>CSS Tutorial</title>     <link rel="stylesheet" href="tutorial13.css">     <style>         p{             color: red;             background-color:yellow;         }         </style> </head> <body>     <h3>this is CSS Tutorial</h3>     <p>this tutorial will teach you everything you need to know about/CSS</p> </body> </html> CSS p{     color: rgb(13, 202, 13);     background-color: yellow; }
Post a Comment
Read more

Semantic Tags(HTML)

 <!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>HTML Semantic Tags</title> </head> <body>     <h3>Semantic Elements</h3>     <details>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure quae et impedit eligendi explicabo dolore quas reprehenderit dignissimos corporis! Provident necessitatibus corrupti iure temporibus explicabo odio ipsam perferendis. Similique, eaque?</details> </body> </html>
Post a Comment
Read more

HTML Entities(HTML)

<!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>HTML Entities</title> </head> <body>     <div class="container">         <p>this is a paragraph</p>     </div>     <div class="container">         <p>this is another &nbsp; paragraph</p>         <p>paragraph is written like this &lt;p&gt; </p>         <p>pound is written like this &pound; </p>         <p>Copyright is written like this &copy; </p>         <p>another character &rAarr; </p>         <p...
Post a Comment
Read more

Ids and Classes(HTML)

 <!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>Ids and classes in HTML</title> </head> <body>     <h3>Ids and classes Tutorials</h3>     <div id="mainbox" class="redbg blackborder">this is mainbox</div>     <span class="redbg"></span>     <!-- emmit -->     <!-- . is for class and # is for id -->     <span class="redbg"></span>     <span id="mainSpan"></span>     <div class="redbg blackborder anotherclass"></div>     <!-- emmet takes div tag as default -->     <div class="background"></div>     <!-- span.myclas...
Post a Comment
Read more

Inline and Block Elements(HTML)

 <!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>Inline and Block Elements</title> </head> <body>     <strong style="border: 2px solid blue;">this is a paragraph</strong>     <a style="border: 2px solid blue;">this is also a paragraph</a>     <span style="border: 2px solid blue;">this is span</span> <span style="border: 2px solid blue;">this is also         span</span>         <li style="border: 2px solid red;">this is para</li>         <em style="border: 2px solid red;">this is em</em>         <div style="border: 2px solid red;">this is d...
Post a Comment
Read more

Forms and Input Tags(HTML)

 <!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>Forms</title> </head> <body>     <h2>I am going to create form</h2>     <form action="backend.php">         <label for="name">Name</label>         <div>             <input type="text" name="myname" id="name">         </div>         <label for="project">Project</label>         <div>             <input type="text" name="myproject" id="project">         </div>         <div>  ...
Post a Comment
Read more

Lists And Tables(HTML)

 <!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>Tables and Lists</title> </head> <body>     <!-- lists -->     <ul type="circle">         <li>This is first item of my unordered list</li>         <li>This is second item of my unordered list</li>         <ul>             <li>another one</li>             <li>another two</li>             <li>another three</li>             <li>another four</li>         </ul>   ...
Post a Comment
Read more

Image and Anchor Tags(HTML)

 <!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>links and images</title> </head> <body>     <!-- create a external link and open the website in a new tab -->     <a href="https://google.com"target="_blank">Go To Google</a><br>     <a href="https://facebook.com"target="_blank">Go To facebook</a><br>     <a href="https://twitter.com"target="_blank">Go To twitter</a><br>     <a href="https://linkedin.com"target="_blank">Go To linkedin</a><br>     <!-- create internal link and open the website in a new tab -->     <a href="/tutorial5.html...
Post a Comment
Read more

Headings and Paragraphs(HTML)

 <!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>Heading Paragraphs and Emmet</title> </head> <body>     <!-- we can create max 6 num of headings -->     <h1>suraj</h1>     <h2>suraj</h2>     <h3>suraj</h3>     <h4>suraj</h4>     <h5>suraj</h5>     <h6>suraj</h6>     <p>this is suraj</p>     <!-- lorem40 for creating 40 dummy words  -->     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi deleniti nobis enim molestiae <strong>this is strong</strong> nemo impedit, corporis tempore fuga laudant...
Post a Comment
Read more