├── README.md
└── WebDev-Beginner
    ├── Images
        ├── x.text
        ├── bi.jpg
        ├── mq.png
        ├── rm.jpg
        ├── x.jpeg
        ├── bvi.png
        ├── end.gif
        ├── full.jpg
        ├── fvb.jpg
        ├── intro.gif
        ├── js-intro.jpg
        ├── pseudo-class.jpg
        ├── static-dynamic.jpg
        └── web.svg
    ├── jQuery Setup
        ├── README.md
        ├── assets
        │   └── images
        │   │   ├── README.md
        │   │   └── end.gif
        ├── scripts
        │   └── script.js
        ├── styles
        │   └── style.css
        └── index.html
    ├── Basic Setup
        ├── README.md
        ├── images
        │   ├── README.md
        │   └── end.gif
        ├── script.js
        ├── index.html
        └── style.css
    ├── Bootstrap
        ├── script
        │   └── script.js
        ├── styles
        │   └── style.css
        └── index.html
    └── README.md


/README.md:
--------------------------------------------------------------------------------
1 | # Resources
2 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/x.text:
--------------------------------------------------------------------------------
1 | sdfsd
2 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/jQuery Setup/README.md:
--------------------------------------------------------------------------------
1 | # Jquery
2 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/Basic Setup/README.md:
--------------------------------------------------------------------------------
1 | # Basic Setup
2 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/Basic Setup/images/README.md:
--------------------------------------------------------------------------------
1 | ## Assets
2 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/Bootstrap/script/script.js:
--------------------------------------------------------------------------------
1 | alert("Qwerty")


--------------------------------------------------------------------------------
/WebDev-Beginner/jQuery Setup/assets/images/README.md:
--------------------------------------------------------------------------------
1 | # Images
2 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/bi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/bi.jpg


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/mq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/mq.png


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/rm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/rm.jpg


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/x.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/x.jpeg


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/bvi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/bvi.png


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/end.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/end.gif


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/full.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/full.jpg


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/fvb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/fvb.jpg


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/intro.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/intro.gif


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/js-intro.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/js-intro.jpg


--------------------------------------------------------------------------------
/WebDev-Beginner/Bootstrap/styles/style.css:
--------------------------------------------------------------------------------
1 | body{
2 |     padding: 0;
3 |     margin: 0;
4 |     box-sizing: border-box;
5 | }
6 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/pseudo-class.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/pseudo-class.jpg


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/static-dynamic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Images/static-dynamic.jpg


--------------------------------------------------------------------------------
/WebDev-Beginner/Basic Setup/images/end.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/Basic Setup/images/end.gif


--------------------------------------------------------------------------------
/WebDev-Beginner/jQuery Setup/assets/images/end.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sandeep-shaw10/resources/HEAD/WebDev-Beginner/jQuery Setup/assets/images/end.gif


--------------------------------------------------------------------------------
/WebDev-Beginner/jQuery Setup/scripts/script.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 | 
 3 |     // All the jQuery scripts go here ...
 4 |     let loaded = true;
 5 | 
 6 | 
 7 |     //If loaded then call
 8 |     loaded && fetchApi();
 9 | 
10 |     // Fetch Api
11 |     async function fetchApi(){
12 |         try{
13 |             fetch('https://jsonplaceholder.typicode.com/todos')
14 |             .then(response => response.json())
15 |             .then(json => console.table(json))
16 |         }catch(error){
17 |             console.log(`Error: ${error}`)
18 |         }
19 |     }
20 | 
21 |   
22 | });
23 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/Basic Setup/script.js:
--------------------------------------------------------------------------------
 1 | //Basic Popup
 2 | 
 3 | if(confirm("Do you want to continue")){
 4 |     alert("Welcome to Web Devlopment")
 5 | }
 6 | else{
 7 |     alert("You click to cancel")
 8 | }
 9 | 
10 | 
11 | let person = prompt("Please enter your name", "Harry Potter");
12 | let text;
13 | 
14 | //Condition First Way
15 | if (person == null || person == "") {
16 |     text = "Stranger"
17 | }
18 | else {
19 |     text = person
20 | }
21 | 
22 | //Condition Other Way
23 | text = (person == null || person == "")? "Stranger": person;
24 | 
25 | 
26 | document.getElementById("putName").innerHTML = `Welcome ${text}`


--------------------------------------------------------------------------------
/WebDev-Beginner/Basic Setup/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |         <title>Document</title>
 9 | 
10 |         <!--CDN / Base Style-->
11 | 
12 |         <!--Custom CSS File (Last)-->
13 |         <link rel="stylesheet" href="style.css">
14 | 
15 |     </head>
16 | 
17 |     <body>
18 |         <!--Content-->
19 |         <img src="images/end.gif" alt="gif">
20 |         <h1 id="putName"></h1>
21 | 
22 | 
23 |         <!--Custom Script (Last)-->
24 |         <script src="script.js"></script>
25 |     </body>
26 | </html>


--------------------------------------------------------------------------------
/WebDev-Beginner/Basic Setup/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 2 | 
 3 | body{
 4 |     padding: 0;
 5 |     margin: 0;
 6 |     box-sizing: border-box;
 7 | }
 8 | 
 9 | h1{
10 |     animation: changeColor 4s infinite;
11 |     font-family: 'Roboto', sans-serif; /*Imported from google font*/
12 | }
13 | 
14 | /*
15 | Custom Styles
16 | */
17 | 
18 | 
19 | /*For Animation*/
20 | @keyframes changeColor{
21 |     0%   {color: rgb(0, 255, 85); }
22 |     50% {color: blue;}
23 |     100% {color: #00c3ff; }
24 | }
25 | 
26 | /*
27 | - For responsive web design 
28 | - Should be placed at last
29 | - Around 2-3 breakpoint is sufficient (mobile, tabs, desktop)
30 | */
31 | @media screen and (max-width: 567px) {
32 |     img{
33 |         display: none;
34 |     }
35 | }


--------------------------------------------------------------------------------
/WebDev-Beginner/jQuery Setup/styles/style.css:
--------------------------------------------------------------------------------
 1 | /*Default setting*/
 2 | body{
 3 |     padding: 0px;
 4 |     margin: 0px;
 5 |     box-sizing: border-box;
 6 | }
 7 | 
 8 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 9 | 
10 | body{
11 |     padding: 0;
12 |     margin: 0;
13 |     box-sizing: border-box;
14 | }
15 | 
16 | h1{
17 |     animation: changeColor 4s infinite;
18 |     font-family: 'Roboto', sans-serif; /*Imported from google font*/
19 | }
20 | 
21 | /*
22 | Custom Styles
23 | */
24 | 
25 | 
26 | /*For Animation*/
27 | @keyframes changeColor{
28 |     0%   {color: rgb(0, 255, 85); }
29 |     50% {color: blue;}
30 |     100% {color: #00c3ff; }
31 | }
32 | 
33 | /*
34 | - For responsive web design 
35 | - Should be placed at last
36 | - Around 2-3 breakpoint is sufficient (mobile, tabs, desktop)
37 | */
38 | @media screen and (max-width: 567px) {
39 |     img{
40 |         display: none;
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/WebDev-Beginner/jQuery Setup/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |     <head>
 5 |         <meta charset="UTF-8">
 6 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |         <title>Document</title>
 9 | 
10 |         <!--CDN / Base Style-->
11 | 
12 |         <!--Custom CSS File (Last)-->
13 |         <link rel="stylesheet" href="styles/style.css">
14 | 
15 |     </head>
16 | 
17 |     <body>
18 |         <!--Content-->
19 |         <img src="assets/images/end.gif" alt="gif">
20 | 
21 |         <h1>Check the Console: Ctrl+Shft+I</h1>
22 | 
23 | 
24 |         <!--Script Imported-->
25 |         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
26 | 
27 |         <!--Custom Script (Last)-->
28 |         <script src="scripts/script.js"></script>
29 |     </body>
30 | </html>


--------------------------------------------------------------------------------
/WebDev-Beginner/Bootstrap/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Required meta tags -->
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 
 8 |     <!-- Bootstrap CSS -->
 9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
10 | 
11 |     <!--Font Awesome CDN-->
12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
13 | 
14 |     <!--Custom CSS-->
15 |     <link rel="stylesheet" href="styles/style.css">
16 | 
17 |     <title>Hello, world!</title>
18 |   </head>
19 |   <body>
20 |     
21 |     <!--Navbar-->
22 |     <div class="container-fluid m-0 bg-dark ">
23 |         <nav class="navbar navbar-dark navbar-expand-md">
24 |             <a href="#" class="navbar-brand">Demo</a>
25 |             <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
26 |                 <span class="navbar-toggler-icon"></span>
27 |             </button>
28 |             <div class="navbar-collapse collapse" id="navbar">
29 |                 <ul class="navbar-nav ms-auto">
30 |                     <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
31 |                     <li class="nav-item"><a href="#" class="nav-link">About</a></li>
32 |                     <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
33 |                 </ul>
34 |             </div>
35 |         </nav>
36 |     </div>
37 |     <!--End of Navbar-->
38 | 
39 |     <!--Content-->
40 |     <div class="container">
41 |         <div class="text-center mt-5">
42 |             <a href="https://getbootstrap.com/docs/5.1/components/button-group" target="_blank" class="btn btn-secondary btn-lg">
43 |                 Bootstrap
44 |             </a>
45 |         </div>
46 |     </div>
47 |     <!---->
48 | 
49 |     <!-- Option 1: Bootstrap Bundle with Popper -->
50 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
51 | 
52 |     <!--CUSTOM JS-->
53 |     <script src="script/script.js"></script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/WebDev-Beginner/Images/web.svg:
--------------------------------------------------------------------------------
 1 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 2 |                 width="786.7px" height="442.5px" viewBox="0 0 786.7 442.5" style="enable-background:new 0 0 786.7 442.5;"
 3 |                 xml:space="preserve">
 4 |                 <style type="text/css">
 5 |                     .st0-web {
 6 |                         fill: #E6E6E6;
 7 |                     }
 8 | 
 9 |                     .st1-web {
10 |                         fill: #222222;
11 |                     }
12 | 
13 |                     .st2-web {
14 |                         fill: #CCCCCC;
15 |                     }
16 | 
17 |                     .st3-web {
18 |                         fill: #FFFFFF;
19 |                     }
20 | 
21 |                     .st4-web {
22 |                         fill: #C7C7C7;
23 |                     }
24 | 
25 |                     .st5-web {
26 |                         opacity: 0.32;
27 |                         fill: #272727;
28 |                     }
29 |                 </style>
30 |                 <defs>
31 |                 </defs>
32 |                 <path id="Desktop_1_" class="st0-web" d="M786.7,13v416.6c0,7.1-5.8,13-13,13H13c-7.1,0-13-5.8-13-13V13C0,5.8,5.8,0,13,0h760.8
33 |             C780.9,0,786.7,5.8,786.7,13z" />
34 |                 <g id="Navbar_1_">
35 |                     <path id="Navbar-Bg_1_" class="st1-web"
36 |                         d="M786.7,13v33.6H0V13C0,5.8,5.8,0,13,0h760.8C780.9,0,786.7,5.8,786.7,13z" />
37 |                     <g id="Navbar-Link_1_">
38 |                         <path class="st0-web" d="M145.7,38.5h-109c-8.2,0-15-6.7-15-15v0c0-8.2,6.7-15,15-15h109c8.2,0,15,6.7,15,15v0
39 |                 C160.7,31.8,153.9,38.5,145.7,38.5z" />
40 |                         <path class="st0-web" d="M733.2,38.5h-47.1c-7.4,0-13.5-6.1-13.5-13.5V22c0-7.4,6.1-13.5,13.5-13.5h47.1c7.4,0,13.5,6.1,13.5,13.5v3.1
41 |                 C746.7,32.5,740.6,38.5,733.2,38.5z" />
42 |                         <path class="st0-web" d="M542.2,38.5h-47.1c-7.4,0-13.5-6.1-13.5-13.5V22c0-7.4,6.1-13.5,13.5-13.5h47.1c7.4,0,13.5,6.1,13.5,13.5v3.1
43 |                 C555.7,32.5,549.6,38.5,542.2,38.5z" />
44 |                         <path class="st0-web" d="M637.7,38.5h-47.1c-7.4,0-13.5-6.1-13.5-13.5V22c0-7.4,6.1-13.5,13.5-13.5h47.1c7.4,0,13.5,6.1,13.5,13.5v3.1
45 |                 C651.2,32.5,645.1,38.5,637.7,38.5z" />
46 |                     </g>
47 |                 </g>
48 | 
49 |                 <g id="Content_1_">
50 |                     <path class="st2-web" d="M660.7,116.5h-202c-10.4,0-19-8.5-19-19v0c0-10.4,8.5-19,19-19h202c10.5,0,19,8.5,19,19v0C679.7,108,671.1,116.5,660.7,116.5z" >
51 |                         <animateTransform attributeType="xml" attributeName="transform" begin="XMountain_1_.begin" type="translate" dur="4s" values="-300,0; 0,0; 0,0; 0,0; -300,0" repeatCount="indefinite" />
52 |                         <animate attributeName="fill" values="#E6E6E6;#CCCCCC;#CCCCCC;#CCCCCC;#E6E6E6" dur="4s" repeatCount="indefinite" />  
53 |                     </path>
54 |                     <path class="st2-web" d="M563.5,162.5H459.9c-6.1,0-11.2-5-11.2-11.2v-2.7c0-6.1,5-11.2,11.2-11.2h103.7c6.1,0,11.2,5,11.2,11.2v2.7
55 |             C574.7,157.5,569.7,162.5,563.5,162.5z" >
56 |                         <animateTransform attributeType="xml" attributeName="transform" begin="XMountain_1_.begin" type="translate" dur="4s" values="-200,0; 0,0; 0,0; 0,0; -200,0" repeatCount="indefinite" />
57 |                         <animate attributeName="fill" values="#E6E6E6;#CCCCCC;#CCCCCC;#CCCCCC;#E6E6E6" dur="4s" repeatCount="indefinite" />  
58 |                     </path>
59 |                     <path class="st2-web" d="M715.3,367.5H463.1c-10.1,0-18.4-8.3-18.4-18.4V207c0-10.1,8.3-18.4,18.4-18.4h252.1
60 |             c10.1,0,18.4,8.3,18.4,18.4v142.1C733.7,359.2,725.4,367.5,715.3,367.5z" >
61 |                         <animateTransform attributeType="xml" attributeName="transform" begin="XMountain_1_.begin" type="translate" dur="4s" values="-400,0; 0,0; 0,0; 0,0; -400,0" repeatCount="indefinite" />
62 |                         <animate attributeName="fill" values="#E6E6E6;#CCCCCC;#CCCCCC;#CCCCCC;#E6E6E6" dur="4s" repeatCount="indefinite" />  
63 |                     </path>
64 |                     <path class="st2-web" d="M559.5,409.5H455.9c-6.1,0-11.2-5-11.2-11.2v-2.7c0-6.1,5-11.2,11.2-11.2h103.7c6.1,0,11.2,5,11.2,11.2v2.7
65 |             C570.7,404.5,565.7,409.5,559.5,409.5z" >
66 |                         <animateTransform attributeType="xml" attributeName="transform" begin="XMountain_1_.begin" type="translate" dur="4s" values="-200,0; 0,0; 0,0; 0,0; -200,0" repeatCount="indefinite" />
67 |                         <animate attributeName="fill" values="#E6E6E6;#CCCCCC;#CCCCCC;#CCCCCC;#E6E6E6" dur="4s" repeatCount="indefinite" />  
68 |                     </path>
69 |                 </g>
70 | 
71 |                 <g id="Post-UI_1_">
72 |                     <path class="st3-web" d="M418.7,91.4v305.3c0,7.1-5.8,12.8-12.8,12.8H52.5c-7.1,0-12.8-5.8-12.8-12.8V91.4c0-7.1,5.8-12.8,12.8-12.8
73 |             h353.3C412.9,78.5,418.7,84.3,418.7,91.4z" />
74 |                     <path id="Post_1_" class="st4-web"
75 |                         d="M418.7,358.5v37.9c0,7.2-5.8,13.1-12.8,13.1H52.5c-7.1,0-12.8-5.9-12.8-13.1v-37.9H418.7z" />
76 |                     <path id="Post-name_1_" class="st0-web" d="M324.2,397.5h-250c-6.9,0-12.5-5.6-12.5-12.5l0,0c0-6.9,5.6-12.5,12.5-12.5h250
77 |             c6.9,0,12.5,5.6,12.5,12.5l0,0C336.7,391.9,331.1,397.5,324.2,397.5z" />
78 |                     <path id="post-like_1_" class="st1-web"
79 |                         d="M394.9,371.8L394.9,371.8c-3.7-3.7-9.7-3.7-13.4,0l-0.8,0.8l-0.8-0.8
80 |             c-3.7-3.7-9.7-3.7-13.4,0l0,0c-3.7,3.7-3.7,9.7,0,13.4l0.8,0.8l13.4,13.4l13.4-13.4l0.8-0.8C398.6,381.5,398.6,375.5,394.9,371.8z" >
81 |                     <animate attributeName="fill" values="#777;#111" dur="5s" repeatCount="indefinite" begin="3s"/></path>
82 |                 </g>
83 | 
84 | 
85 |                 
86 |                 <circle id="sun_1_" class="st5-web" cx="221.2" cy="173" r="37.5" >
87 |                     <animateTransform id="Xsun_1_" attributeType="xml" attributeName="transform" begin="XMountain_1_.begin" type="translate" dur="5s" values="0,100;0,0;0,0;0,100;0,100;" repeatCount="indefinite" />
88 |                 </circle>
89 | 
90 |                 <polygon id="Mountain_1_" class="st1-web" points="305.7,202.5 219.6,289.2 143.5,218 39.7,315.1 39.7,358.5 150.7,358.5 293.7,358.5 
91 |             418.7,358.5 418.7,316.3 " >
92 |                 <animate id="XMountain_1_" attributeName="fill" values="#222;#444;#444;#222;#222;" dur="5s" repeatCount="indefinite" />  
93 |         </polygon>
94 | 
95 | 
96 |             </svg>


--------------------------------------------------------------------------------
/WebDev-Beginner/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 
  3 | # `GETTING STARTED WITH WEB-DEVELOPMENT`
  4 | 
  5 | <br/>
  6 | 
  7 | <a> 
  8 |     <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" width="180" height="120"/>
  9 | </a>
 10 | <a>
 11 |     <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" width="180" height="120"/>
 12 | </a>
 13 | <a>
 14 |     <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" width="180" height="120"/>
 15 | </a>
 16 | 
 17 | 
 18 | <br><br>
 19 | 
 20 | ### Hi 👋, I'm `Sandeep Shaw`
 21 | #### Computer Science & Engineering, 3rd Year 
 22 | 
 23 | </div>
 24 | 
 25 | - - -
 26 | 
 27 | # DISCUSSIONS
 28 | - [x] **Types of Basic Websites**: `STATIC`, `DYNAMIC`
 29 | - [x] **Developer Types**: `FRONTEND`, `BACKEND`, `FULLSTACK`
 30 | - [x] **Development Setup**: `CODE EDITORS`, `DEBUGGER TOOLS`
 31 | - [X] **Basics of HTML**: `DOCUMENT STRUCTURE`, `BLOCK` `INLINE`, `TAGS`
 32 | - [X] **Important CSS Concept**: `LINK`, `INLINE`, `EMBEDDED` `EXTERNAL`, `SPECIFICITY`, `PSEUDO SELECTOR`, `MEDIA-QUERY`
 33 | - [X] **Attributes of Decent Website**: `OPTIMIZATION`, `RESPONSIVE`, `UX`, `UI`
 34 | - [x] **Content Delivery Network**
 35 | - [x] **Introduction to JavaScript**: `BASIC`, `DOM`, `ES6`, `jQuery`, `NodeJS`
 36 | - [X] **Future Roadmap**
 37 | - [X] **Useful Resources**
 38 | 
 39 | - - -
 40 | 
 41 | ## 0. WHY HTML / CSS / JS
 42 | ![static-vs-dynamic](Images/intro.gif)
 43 | 
 44 | ## 1. STATIC & DYNAMIC WEBSITES
 45 | ![static-vs-dynamic](Images/static-dynamic.jpg)
 46 | 
 47 | ## 2. DEVELOPER STAGES
 48 | ![static-vs-dynamic](Images/fvb.jpg)
 49 | ![static-vs-dynamic](Images/full.jpg)
 50 | 
 51 | ## 3. SETUP
 52 | 
 53 | ### > CODE EDITORS
 54 | #### `Visual Studio`
 55 | #### `Sublime Text`
 56 | #### `Atom Editor`
 57 | #### `Vim`
 58 | #### `NetBeans`
 59 | #### `Notepad++`
 60 | 
 61 | ### > DEBUGGER TOOLS
 62 | #### `Chrome Developer Tools`
 63 | #### `Firefox Developer Tools.`
 64 | #### `Fiddler`(IE)
 65 | #### `Safari Developer Tools`
 66 | #### `Open Dragonfly`(Opera)
 67 | 
 68 | ## 4. BASICS OF HTML
 69 | 
 70 | > Hyper Text Markup Language
 71 | > Extension: `.html`
 72 | ```html
 73 | <!--HTML document declaration-->
 74 | <!DOCTYPE html>
 75 | 
 76 | <!--HTML Tag: The root-->
 77 | <html lang="en">
 78 | 
 79 |     <!--Header file, Metadata, Title, etc. -->
 80 |     <head>
 81 |         <meta charset="UTF-8">
 82 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 83 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 84 |         <title>Document</title>
 85 |     </head>
 86 | 
 87 |     <body>
 88 |         <!--Visible Content-->
 89 |     </body>
 90 | 
 91 | </html>
 92 | ```
 93 | 
 94 | #### BLOCK VS INLINE
 95 | ![static-vs-dynamic](Images/bi.jpg)
 96 | ![static-vs-dynamic](Images/bvi.png)
 97 | [![Generic badge](https://img.shields.io/badge/CLICK%20HERE-1abc9c.svg)](https://www.w3schools.com/html/html_blocks.asp)
 98 | 
 99 | ## 5. BASICS OF CSS
100 | 
101 | > Cascading Styling Sheets
102 | > Extension: `.css`
103 | 
104 | ### Ways to use CSS:
105 | - Inline Styling
106 | - Embedded Styling
107 | - External Styling 
108 | 
109 | #### 1. Inline Styling
110 | ```html
111 |     <body style="background-color: rgb(30, 210, 150);">
112 |         <div>
113 |             <h1>Hello Every One</h1>
114 |         </div>
115 |     </body>
116 | ```
117 | 
118 | #### 2. Embedded Styling
119 | ```html
120 |     <head>
121 |         <title>Document</title>
122 |         <style>
123 |             body{
124 |                 background-color: #59b7b7d4;
125 |                 color: beige;
126 |             }
127 |         </style>
128 |     </head>
129 | 
130 |     <body>
131 |         <div>
132 |             <h1>Hello Every One</h1>
133 |         </div>
134 |     </body>
135 | ```
136 | 
137 | #### 3. External Styling
138 | index.html
139 | ```html
140 | <!DOCTYPE html>
141 | <html>
142 |     
143 |     <head>
144 |         <title>Document</title>
145 | 
146 |         <!--Linking CSS file to html -->
147 |         <link rel="stylesheet" href="style.css">
148 |     </head>
149 | 
150 |     <body>
151 |         <div>
152 |             <h1>Hello Every One</h1>
153 |         </div>
154 |     </body>
155 | 
156 | </html>
157 | ```
158 | <br/>
159 | 
160 | style.css
161 | ```css
162 | body {
163 |     background-color: #59b7b7d4;
164 |     color: beige;
165 | }
166 | ```
167 | 
168 | ### PRIORITY:
169 | > **CSS code: TOP-BOTTOM**
170 | > 1) **Inline CSS**
171 | > 2) **Embedded** OR **External** (Based on position)
172 | 
173 | 
174 | ### SELECTORS:
175 | - id
176 | - class
177 | - tag
178 | 
179 | index.html
180 | ```html
181 |     <div class="container">
182 |         <h1 id="header-1">Hello Every One</h1>
183 |         <p>
184 |             Lorem ipsum dolor sit amet consectetur 
185 |             adipisicing elit. Voluptas, magnam.
186 |         </p>
187 |     </div>
188 | 
189 |     <div class="container">
190 |         <h1 id="header-2">Hello Peter !</h1>
191 |         <p>
192 |             Lorem ipsum dolor sit amet consectetur 
193 |             adipisicing elit. Voluptas, magnam.
194 |         </p>
195 |     </div>
196 | ```
197 | <br/>
198 | 
199 | style.css
200 | ```css
201 | 
202 | /* Set stle on Tag Name */
203 | body {
204 |     margin: 0px;
205 |     padding: 0px;
206 |     box-sizing: border-box;
207 | }
208 | 
209 | p { font-size: 20px; }
210 | 
211 | /* Set stle on Class Name (.) */
212 | .container{
213 |     display: flex;
214 |     flex-direction: row;
215 |     padding: 10px 20px;
216 | }
217 | 
218 | /* Set stle on Id Name (#) */
219 | #header-1{
220 |     color: #343434;
221 | }
222 | 
223 | #header-2{
224 |     color: #546785;
225 | }
226 | 
227 | ```
228 | <br/>
229 | 
230 | ### NESTED STYLING:
231 | ```css
232 | /*0,0,1,1*/
233 | .container h1{
234 |     color: green;
235 | }
236 | 
237 | /*0,1,1,0*/
238 | .container #header-1{
239 |     color: orange;
240 | }
241 | 
242 | /*0,0,0,2*/
243 | div h1 {
244 |     color: red;
245 | }
246 | 
247 | /*0,0,0,3*/
248 | body div h1 {
249 |     color: blue;
250 | }
251 | ```
252 | <br/>
253 | 
254 | ### ! IMPORTANT:
255 | ```css
256 | 
257 | /*1,0,0,3*/
258 | body div h1 {
259 |     color: blue !important;
260 | }
261 | ```
262 | <br/>
263 | 
264 | ### SPECIFICITY:
265 | If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
266 | 
267 | < **IMPORTANT**, **ID**, **CLASS**, **TAG** >
268 | 
269 | [![Generic badge](https://img.shields.io/badge/CLICK%20HERE-1abc9c.svg)](https://www.w3schools.com/css/css_specificity.asp)
270 | 
271 | <br/>
272 | 
273 | ### PSEUDO SELECTOR:
274 | CSS pseudo-selector are used to add special effects to some selectors on specific events.
275 | ![static-vs-dynamic](Images/pseudo-class.jpg)
276 | 
277 | [![Generic badge](https://img.shields.io/badge/CLICK%20HERE-1abc9c.svg)](https://www.w3schools.com/css/css_pseudo_classes.asp)
278 | 
279 | <BR/>
280 | 
281 | 
282 | ### MEDIA QUERY:
283 | Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones
284 | ![static-vs-dynamic](Images/mq.png)
285 | [![Generic badge](https://img.shields.io/badge/CLICK%20HERE-1abc9c.svg)](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
286 | 
287 | <br/>
288 | 
289 | ## FEATURES OF WEBSITES
290 | 
291 | ![static-vs-dynamic](Images/web.svg)
292 | 
293 | <br/>
294 | 
295 | ## USE OF CDN
296 | A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content.
297 | 
298 | A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.
299 | 
300 | 
301 | > FontAwesome CDN
302 | ```html
303 | <!DOCTYPE html>
304 |     <html>
305 |         <head>
306 |             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
307 |         </head>
308 |         <body>
309 |             <i class="fa fa-car"></i>
310 |             <i class="fa fa-car" style="font-size:48px;"></i>
311 |             <i class="fa fa-car" style="font-size:60px;color:red;"></i>
312 |             <i class="fa fa-refresh fa-spin"></i>
313 |         </body>
314 |     </html>
315 | ```
316 | 
317 | [![Generic badge](https://img.shields.io/badge/CLICK%20HERE-1abc9c.svg)](https://www.w3schools.com/icons/fontawesome_icons_brand.asp)
318 | 
319 | >ChartJS
320 | ```html
321 | <!DOCTYPE html>
322 | <html>
323 |     <body>
324 |         <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
325 | 
326 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
327 |         <script>
328 |         var xyValues = [
329 |         {x:50, y:7}, {x:60, y:8}, {x:70, y:8}, {x:80, y:9},{x:90, y:9},{x:100, y:9},
330 |         ];
331 | 
332 |         new Chart("myChart", {
333 |         type: "scatter",
334 |         data: {
335 |             datasets: [{
336 |             pointRadius: 4,
337 |             pointBackgroundColor: "rgb(0,0,255)",
338 |             data: xyValues
339 |             }]
340 |         },
341 |         options: {
342 |             legend: {display: false},
343 |             scales: {
344 |             xAxes: [{ticks: {min: 40, max:160}}],
345 |             yAxes: [{ticks: {min: 6, max:16}}],
346 |             }
347 |         }
348 |         });
349 |         </script>
350 | 
351 |     </body>
352 | </html>
353 | ```
354 | 
355 | 
356 | [![Generic badge](https://img.shields.io/badge/CLICK%20HERE-1abc9c.svg)](https://www.chartjs.org/docs/latest/getting-started/)
357 | 
358 | <br/>
359 | 
360 | 
361 | ## BASICS OF JavaScript
362 | 
363 | ### Basics
364 | ```html
365 | <!DOCTYPE html>
366 | <html>
367 |     <head>
368 |         <title>Document</title>
369 |     </head>
370 |     <body>
371 |         
372 |         <!--Content-->
373 | 
374 |         <script>
375 |             //Comment
376 | 
377 |             //Variable
378 |             let a = 10;
379 |             var b = 20;
380 |             const pi = 3.14;
381 | 
382 |             //Types
383 |             let x1 = 10;
384 |             let x2 = true;
385 |             let x3 = "Amit";
386 |             let array = [3, 5, 7];
387 |             let mixedArray = [3, true, "Fine"];
388 |             let data = {
389 |                 L : "Lateral",
390 |                 R : "Registered",
391 |             }
392 |             var nothing = null;
393 |             var empty = undefined;
394 | 
395 |             //Reserved key words
396 | 
397 |             //Conditionals
398 |             if(x2){
399 |                 alert("Hello First Condition");
400 |             }
401 | 
402 |             x2 && alert("Hello Second Condition");
403 | 
404 |             //Using Loops
405 | 
406 |             //Function
407 |             function displayName(x){
408 |                 alert("Hello, "+x)
409 |             }
410 | 
411 |             x2 && displayName("Sandeep")
412 | 
413 |             //Prints the value to console
414 |             console.log("Hello, "+x3);
415 |             console.log(`Hello, ${x3}`);
416 |             console.log(array);
417 |             console.log(mixedArray);
418 |             console.log(data);
419 |             console.log(nothing);
420 |             console.log(empty);
421 |             
422 | 
423 |         </script>
424 |     </body>
425 | </html>
426 | ```
427 | <br/>
428 | 
429 | ### Useful Console object
430 | ```html
431 | <!DOCTYPE html>
432 | <html >
433 |     <head>
434 |         <title>Document</title>
435 |     </head>
436 |     <body>
437 |         
438 |         <h1>Loaded</h1>
439 |         <!--Content-->
440 | 
441 |         <script>
442 |             let data = {
443 |                 B : "B. Tech",
444 |                 M : "M. Tech",
445 |             }
446 | 
447 |             console.log("Start");
448 |             console.clear();
449 | 
450 |             console.log(data);
451 |             console.warn(data);
452 |             console.error(data);
453 |             console.table(data);
454 | 
455 |             console.time()
456 |             complex()
457 |             console.timeEnd()
458 | 
459 |             function complex(){
460 |                 for(let i=0; i<100000; i++){
461 |                     for(let j=0; j<100000; j++){}
462 |                 }
463 |             }
464 | 
465 |         </script>
466 |     </body>
467 | </html>
468 | ```
469 | 
470 | <br/>
471 | 
472 | ### Methods DOM
473 | ![static-vs-dynamic](Images/js-intro.jpg)
474 | 
475 | 
476 | 
477 | 
478 | 
479 |  Method | 	Description | Example
480 |  --- | --- | --- 
481 | document.getElementById(id) | 	Find an element by element id | document.getElementById("header-1")
482 | document.getElementsByTagName(name) |	Find elements by tag name | document.getElementsByTagName("span")
483 | document.getElementsByClassName(name) |	Find elements by class name | document.getElementsByClassName("container")
484 | document.querySelectorAll() | Query Selector (Combination) | document.querySelectorAll(".conatiner#header")
485 | 
486 | [![Generic badge](https://img.shields.io/badge/EVENT%20HANDLER-1abc9c.svg)](https://www.javatpoint.com/javascript-events)
487 | 
488 | [![Generic badge](https://img.shields.io/badge/CSS%20MANIPULATION-1abc9c.svg)](https://www.w3schools.com/js/tryit.asp?filename=tryjs_change_style)
489 | 
490 | 
491 | <br/>
492 | 
493 | ## FUTURE ROADMAP
494 | ![static-vs-dynamic](Images/rm.jpg)
495 | ![static-vs-dynamic](Images/x.jpeg)
496 | 
497 | 
498 | <br/>
499 | 
500 | ## RESOURCES
501 | 
502 | ### Web Resources:
503 | | Website |
504 | | ------- |
505 | | https://www.w3schools.com |
506 | | https://freecodecamp.org |  
507 | | https://codecademy.com |  
508 | | https://javascript30.com |  
509 | | https://frontendmentor.io |  
510 | | https://testautomationu.applitools.com |  
511 | | https://coursera.org |  
512 | | https://edx.org |  
513 | | https://khanacademy.org |    
514 | 
515 | ### Photos:
516 | 
517 | | Website |
518 | | ------- |
519 | | https://unsplash.com |    
520 | | https://pixabay.com |  
521 | | https://pexels.com | 
522 | | https://reshot.com | 
523 | | https://librestock.com |
524 | | https://visualhunt.com | 
525 | | https://freephotos.cc | 
526 | | https://picjumbo.com | 
527 | | https://www.pxfuel.com |
528 | | https://www.splitshire.com |
529 | 
530 | 
531 | ### Illustrations:
532 | 
533 | | Website |
534 | | ------- |
535 | | https://www.opendoodles.com |
536 | | https://undraw.co/illustrations |  
537 | | https://drawkit.io |  
538 | | https://icons8.com/ouch |  
539 | | https://iradesign.io |  
540 | | https://interfacer.xyz |  
541 | | https://blush.design |
542 | | https://avataaars.com |
543 | 
544 | ### Icons:
545 | 
546 | | Website |
547 | | ------- |
548 | | https://fontawesome.com |  
549 | | https://flaticon.com |  
550 | | https://icons8.com |  
551 | | https://iconfinder.com |  
552 | | https://material.io/resources/icons |  
553 | | https://iconmonstr.com | 
554 | | https://heroicons.com |
555 | | https://boxicons.com |
556 | 
557 | ### Fonts:
558 | 
559 | | Website |
560 | | ------- |
561 | | https://fonts.google.com |  
562 | | https://fontspace.com |  
563 | | https://1001fonts.com |
564 | 
565 | ###  Youtube Channels:
566 | 
567 | | Website |
568 | | ------- |
569 | | [Programming with Mosh](https://www.youtube.com/user/programmingwithmosh) |
570 | | [CodeWithHarry](https://www.youtube.com/c/CodeWithHarry) |
571 | | [Thapa Technical](https://www.youtube.com/c/ThapaTechnical) |
572 | | [Traversy Media](https://www.youtube.com/c/TraversyMedia) |  
573 | | [freeCodeCamp.org](https://www.youtube.com/c/FreeCodeCamp) |  
574 | | [The Net Ninja](https://youtube.com/c/TheNetNinja) |  
575 | | [Google Chrome Developers](https://www.youtube.com/c/GoogleChromeDevelopers) |  
576 | | [Derek Banas](https://www.youtube.com/c/derekbanas) |  
577 | | [Academind](https://www.youtube.com/c/Academind) |  
578 | | [CodingTech](https://www.youtube.com/c/CodingTech) |  
579 | | [Codú Community](https://www.youtube.com/channel/UCvI5azOD4eDumpshr00EfIw) |  
580 | | [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified/) |  
581 | | [Dev Ed](https://www.youtube.com/c/DevEd/) |
582 | | [CodeSTACKr](https://youtube.com/c/codeSTACKr) |
583 | | [Coding Addict](https://www.youtube.com/c/CodingAddict) |
584 | | [Kevin Powell](https://youtube.com/kepowob) |
585 | | [Code with Ania Kubów](https://youtube.com/c/AniaKub%C3%B3w) |
586 | | [The Coding Train](https://www.youtube.com/c/TheCodingTrain/) |
587 | 
588 | [![Generic badge](https://img.shields.io/badge/MORE-1abc9c.svg)](https://github.com/markodenic/web-development-resources/edit/main/README.md)
589 | 
590 | - - -
591 | 
592 | <div align="center">
593 | 
594 | ![static-vs-dynamic](Images/end.gif)
595 | 
596 | ## Thank You!
597 | ### So much
598 | 
599 | </div>
600 | 


--------------------------------------------------------------------------------