Feedback

Week-1/README.MD

@@ -0,0 +1,122 @@
+
+<h1>Week-1 Assignment </h1>
+<h3>Exercise:1.1</h3>
+1.When a user enters an URL in the browser, how does the browser fetch the desired result ? Explain this with the below in mind and Demonstrate this by drawing a diagram for the same.
+
+<ul><li>a. What is the main functionality of the browser?</li>
+<li>b. High Level Components of a browser.</li>
+<li>c. Rendering engine and its use.</li>
+<li>d. Parsers (HTML, CSS, etc)</li>
+<li>e .Script Processors</li>
+<li>f .Tree construction</li>
+<li>g .Order of script processing</li>
+<li>h .Layout and Painting</li>
+</ul>
+
+<details>
+  <summary>How A Browser  Works ?</summary>
+<p align="left">Before understanding how a Browser’s work its necessary to know what is URL,DNS a URL Stands for  Uniform resource locator which provides a address that helps the web browsers to identify a specific page across internet.As the websites are being hosted on the servers across the internet its very difficult to find them without the address each server is associated with a particular IP ,And Its Responsibility Of The Browser To Fetch The Content From That Server  but as a user its difficult  for us to remember such IP address ,That Where DNS (Domain Name system )comes to play it make the weird IP address into a user readable and flexible form.
+If we look in detail of the URL 
+<a align="center">https://codesandbox.io/</a>
+https:// responds to the protocol mention the browser to transfer the data over a secure layer 
+Codesandbox.io is the Domain name .
+A web browser takes URL as input the browser has to lookup for the DNS and identify the IP of the server associated with the DNS  on which the site is being hosted and establishes a Secure connection with the server and transfer data over the TCP connection with either of the protocols(HTTP or HTTPS) and the  Rendering Engine which is the most crucial part of the browser is responsible for displaying the content in structured form.
+A web browser has various functional components. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem</p>
+
+
+<img src="https://i.ibb.co/RvH5rpz/Group-1-1.png" alt="Group-1-1" border="0"><br />
+
+
+
+  </details>
+
+
+
+ <details>
+  <summary>Components of Browser and what is use of rendering Engine ? </summary>
+<p>
+ <ul><li> User Interface :That acts as a frontend to the user it consists of searchbar ,and other browser options Each browser has a different User Interface.</li>
+<li>Browser Engine:Which acts a intermediate between the UI and the main component named rendering engine</li>
+<li>Rendering Engine:The most crucial component that is responsible for display the web pages content on to the site ,it first processes the HTML Or Xml structure then applies the CSS or Javascript.Different browsers use different rendering engines,WebKit is an open source rendering engine.The rendering engine will start parsing the HTML document and convert elements to DOM nodes in a tree called the "content tree". The engine will parse the style data, both in external CSS files and in style elements.
+</li>
+<li>Networking:It is responsible for providing the security and maintaining privacy for safe and secure  access of information over the network.</li>
+<li>JavaScript interpreter:Helpful in  parsing and execute JavaScript code.</li>
+<li>Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies.</li>
+  </p>
+<img src="https://i.ibb.co/rxc1m8G/renderengine.png" alt="renderengine" border="0"><br /><br />
+  <img src='https://i.postimg.cc/W4GZfdnx/Group-1-1.png' border='0' alt='Group-1-1'/>
+  </details>
+
+
+
+   <details>
+  <summary>What is Render Tree and How Script Execution Works? </summary>
+  <p>While the DOM tree is being constructed, the browser constructs another tree, the render tree. This tree is of visual elements in the order in which they will be displayed. It is the visual representation of the document. A renderer knows how to lay out and paint itself and its children.
+The renderers correspond to DOM elementsNon-visual DOM elements will not be inserted in the render tree.
+TThese are usually elements with complex structure that cannot be described by a single rectangle. For example, the "select" element has three renderers: one for the display area, one for the drop down list box and one for the button. Also when text is broken into multiple lines because the width is not sufficient for one line, the new lines will be added as extra renderers.
+Some render objects correspond to a DOM node but not in the same place in the tree. Floats and absolutely positioned elements are out of flow, placed in a different part of the tree, and mapped to the real frame.
+  </p>
+
+![image](https://user-images.githubusercontent.com/114641619/193092165-0fe03f00-32c2-426f-97c5-aa6bf9a623ec.png)
+
+
+
+  <details>
+  <summary>How Script Execution works?</summary>
+    <p> 
+    Once the HTML and css processing  is done tha browser starts downloading the javascript ,the browsr is faster in downloading files,The javascript file is then interepted,parsed,compiled ,The scripts are parsed into Abstract Syntax tree which are then parsed by interpreter that output's bytecode .This is how the Javascript execution takes place </p>
+  </details>
+   </details>
+
+
+   <details>
+  <summary>Parsers ?</summary>
+<p>Parsing is the process in which analyzing and converting of program into a 
+  interpreted format that is available at run time and parser parse’s  tokenized input input to document building upto DOM 
+  </p><br>
+   <p>In simple terms Parsing is process in which the data chunk received over the network are converted into DOM ,CSSOM which is ten painted onto screen by rendering engine
+The DOM is exposed and manipulated  by API'S in javascript ,If HTML'S Page received id greater than 14KB then HTML,CSS,JS must be processed<br>
+<img src="https://i.ibb.co/0VwSFNm/Picture1.png" alt="Picture1" border="0"><br >
+  <h5>HTML Parser(DOM)</h5>
+  When a browser receive bytes of data that needs to be converted to DOM ,It follws follwoing steps:
+  <ol>
+<li>1.First parse bytes into character</li>
+<li>2.Characters are converted into tokens by the tokenizer</li>
+<li>3.The tokenizer starts parsing each starting and closing tags and converts into nodes until it will end up into converting to DOM</li>
+  </ol></p>
+
+  <h5>CSS Parser(CSSOM)</h5>
+<P>  The CSS object model us similar to DOM ,the browser goes through each rule set of CSS electors creating a tree of nodes with
+  parent,child,sibling relationships based on selection rules.
+Building CSSOM is faster tree includes style from user agent stylesheet</p>
+    </details>
+
+
+  <details>
+  <summary>What are Layouts ,Painting ? </summary>
+  <details>
+  <summary>Layouts </summary>
+<p>Layout is the process in which the width height and all locations of node are determined ,determination of size and position of object of a page
+<br>
+layouts is one of the process in rendered tree it started once’s the rendered tree formation takes place
+to determine the exact size of the browser starts at root of rendered tree and traverse it 
+Different devices and desktop preferences means a unlimited viewport size,In layer phase we take view port size into consideration, taking view port size into consideration helps in layout to start with body and laying out dimensions of all the body’s descendants with each elements box model properties
+  the recalculation of size and position is also know as reflow</p>
+  </details>
+   <details>
+  <summary>Painting</summary>
+     <p>    It’s  the last phase in rendering path,In this phase browser converts each box calculated in layout phase to pixels on screen.
+painting involves drawing every part of element on screen with colour shadows ,button etc<br>
+To ensure faster painting on screen the screen is usually broken down into layers ,p
+       ainting can take place with help of GPU too if rather than use of CPU threads certain layers are being used by certain layers</p>
+  </details>
+  </details>
+
+
+  <h3>Exercise1.2:<a href="http://week1-ash.42web.io/?i=1"> http://week1-ash.42web.io</a></h3>
+
+
+
+
+
+

Week-1/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Week 1Assignment-Ashwanth</title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
+<body>
+  <nav class="navbar">
+    <i class="las la-bars"></i>
+    <i class="las la-home"></i>
+    <i class="las la-search"></i>
+    <i class="las la-volume-up"></i>
+    <i class="las la-user"></i>
+   <i class="lab la-spotify"></i>
+  <i class="las la-cog"></i>
+   <i class="lab la-soundcloud"></i>
+  </nav>
+  <main>
+    <div class="column">
+      <img src="https://vif1g.csb.app/src/assets/cattyboard.jpg">
+    </div>
+    <div class="column2">
+        <h3 >CattyBoard Top 100 Single Charts(11.06.36)</h3>
+        <h5 >Unknown Artist</h5>
+        <p >2016.Charts.100songs</p>
+    <div class="main_icons">
+        <a href = "javascript:void(0);"><i class="las la-play ">Play all</i></a>
+        <a href = "javascript:void(0);"> <i class="las la-plus">Add to</i></a>
+        <a href = "javascript:void(0);"><i class="las la-ellipsis-h">More</i></a>
+    </div>
+    </div>
+  </main>
+  <table>
+    <tr>
+      <td>1.</td>
+      <td>Cant stop the feeling</td>
+      <td>CrakefeetCatKid&Cyla</td>
+      <td>2:54</td>
+      <td>CATT CLOUD SYNC</td>
+    </tr>
+    <tr>
+      <td>2.</td>
+      <td>Panda</td>
+      <td>Cattee</td>
+      <td>4:06</td>
+      <td>CATT CLOUD SYNC</td>
+    </tr>
+    <tr>
+      <td>3.</td>
+      <td>Can't Stop The Feeling</td>
+      <td>Catin cimberlake</td>
+      <td>3:56</td>
+      <td>CATT CLOUD SYNC</td>
+    </tr>
+    <tr>
+      <td>4.</td>
+      <td>Work From Home</td>
+      <td>Cat Harmony feat Colla</td>
+      <td>3:04</td>
+      <td>CATT CLOUD SYNC</td>
+    </tr>
+
+  </table>
+ <footer>
+  <img src="https://vif1g.csb.app/src/assets/cattyboard.jpg" width="5%;">
+ <div class="footer_column1">
+    <p>If It Ain't Love</p>
+    <p> Catson Derula</p>
+ </div>
+<div class="footer_column2 ">
+    <input type="range"min="0" max="100" >
+    <a href = "javascript:void(0);"><i class="las la-step-backward icons "></i></a>
+    <a href = "javascript:void(0);"><i class="las la-pause icons "></i></a>
+    <a href = "javascript:void(0);"> <i class="las la-step-forward icons"></i></a>
+        <a href = "javascript:void(0);"><i class="las la-undo-alt icons"></i></a>
+            <a href = "javascript:void(0);"> <i class="las la-random icons"></i></a>
+</div>
+
+</footer>
+</body>
+
+</html>

Week-1/style.css

@@ -0,0 +1,123 @@
+*{
+    margin:0 ;
+    font-family: 'Lato';
+    color: rgb(250, 251, 252);
+    font-weight: 1%;
+  }
+
+
+  .navbar{
+    /*background-color: #cbcece;*/
+    background:linear-gradient(130deg,#1ee269,#cb6fdd);
+    width:40px;; 
+    position:absolute;
+    height:100%;
+
+    }
+    nav i{
+    padding-top:20%;
+    margin-top:40px;
+    margin-left:10px;
+    color:rgb(3, 3, 3);
+    }
+  main{
+    background:linear-gradient(25deg,#1acc79,#fc00ff,#ebb113);
+ display: flex;
+ font-weight: 1px;
+  }
+   .column1{
+    width:30%
+  }
+  .column2{
+    padding-top: 2%;
+    padding-left: 2%;
+  }
+  main img{
+    padding-top:10%;
+    padding-left:30%;
+    width:70%;
+    padding-bottom:2%;
+  }
+  .main_icons{
+padding-top:80px;
+  }
+
+ table{
+  width:100%;
+  margin-left:5%;
+
+ padding-right:10%;
+    }
+	tr{
+		margin-right:10px;
+
+	}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  td{
+    text-align: center;
+    padding:10px;
+    color: black;
+
+  }
+
+  td:nth-child(5n) {
+    color: #486bdd; 
+  }
+  tr:nth-child(even) {
+    background-color: #cbcece; 
+  }
+
+  footer{
+   /*background-color:#3c617d;*/
+   background:linear-gradient(120deg,#1acc79,#fc00ff,#ebb113);
+    bottom:0;
+    left:0;
+    position:fixed;
+    width:100%;
+    display:flex;
+  }
+  footer img{
+      padding:0.5% 0.5% 0.5% 0.5%;
+  }
+
+  .footer_column1{
+padding-left:1%;
+
+width:30%;
+}
+.footer_column2{
+    width:70%;
+    display: flex;
+  padding-left: 10%;
+}
+.icons{
+    padding: 10px 10px 20px 100px;
+}
+footer p{
+    padding-top:10px;
+}
+input[type="range"]{
+    padding-top:7%;
+    padding-left:7%;
+    position: fixed;
+    width:50%;
+    color:black;
+
+}