Web Technology Tutorials

Designing a HTML5 game (Snakes and Ladders) Making of snakes and ladders game Store the positions of start_ladder to end_ladder as a pair Store the positions of start_snake to end_snake as a pair Store the above data in two one-dimensional arrays For example: If the snakes are at positions 4, 9, 17, 35, 44,59,61,78,93] and the ladders start at positions [7,16,92,62], then let arr1 = [4,9,17,35,44,59,61,78,93] ; let arr2 = [7,16,92,62] Write start() function which will initialize the state of the game In this function, do the following tasks. Create a 1000 * 1000 board with 100 boxes, 10 boxes in one row and having alternate colors ("red" and "yellow") Mark the start of a ladder as green color Mark the start of a snake with a black color Assign a number to each box from one to hundred Assign player1 as "white" color Assign playe...

"em" and "rem" units em and rem are units of measurement which take their measurements based on or relative to its immediate parent element For example, if the "<div>" tag has a font-size attribute in CSS as 12px. and if it contains as an element whose font-size is 1.2em it means that the font-size of the element is 1.2 times the font-size of its parent. Thus, the font-size of the child html element will be 1.2*12 = 14.4px rem is relative to the root element size i.e. html tag size suppose the default size of the html page elements which are not styled by CSS is 14 px then if we specify that the font-sizee be 1.2rem it means the font size will be 14*1.2 =16.8px They are mainly used for creating thumbnails or different sizes of the same image For example, Consider the following piece of code: img:hover {width: 2em;} will scale the image horizontally to double its width when you hover over i...

CSS Hands-on | Part 2 Animations @keyframes rule defones an animation for an HTML elemnt For example: @keyframes animation_rule_name_1 { div.gaurav { from : { background-color: red; } to : { background-color: green; } } } @keyframes animation_rule_name_2 { span.gaurav { 0% : { border-width : 5px; } 10% : { border-width: 10px; } 40% : { border-width: 15px; } 80% : { border-width : 20px; } 100% : { border-width : 25px; } } } Usage: Consider the first example. It will change the background-color from red to green in a linear fashion. Consider the second example. The border width of an element will slowly change from 5px to 25px in a speed variable defined by the percentage div.gaurav { animation-mame: animation_rule_name_1; animation-duration: 10s; animation-iteration-count: 4; animation-delay: 2s; animation-timing-functi...

CSS Hands-on Let use see how to insert a content after every paragraph. Just sepcify like p::after { content : "..." } Similarly,to insert a text before the start of every paragraph, use p::before { content : "Hi" } Positions in CSS are different ways to display an element at specific areas in a web page. There are three possible positioning techniques like: position : absolute; position : relative; position : fixed; Let us understand these one by one: The position : absolute value specifies that the top - left coordinate will be referenced from the window's top left corner For example if we specify left : 30px for position : absolute , the element will be positioned 30px to the left of the screen But in position: relative if we specify the same left:30px , it means that the element will be positoned 30px left of its enclosing parent element in the DOM tree ...

CSS Advanced Topics Transforms Suppose, we have to display an element in a differently rather than normal visibility. To accomplish this, CSS3 has introduced something called as "CSS Transforms". The "Transforms" word comes from changing the size, shape and orientation of an HTML element There are many types of transforms, we will see some of them and their examples and use in the following paragraph. ROTATE SCALE SKEW Let us now go in-depth about each of them: rotate(30deg) transform the angular orientation of thr elent to a different which is given as parameter to the function scaleX(3.5) will make the element double or as many times you want along the X-axis using the vaue you give to the function scaleY(2) will make the element double or as many times you want along the Y-axis usin...

CSS box model CSS has a rule called box model rule while displaying and positioning HTML elements. The first attribute is called padding. Padding is defined as the difference in units of an HTML element's content and the border surrounding it. For example, if the padding for an element is 10 px then the difference between the width of the text of that HTML element and the border surrounding is 10 px. The width of an element is inclusive of the padding and exclusive of the border surrounding. After the width is taken by the element the border is printed around the element, if it is specified in the CSS stylesheet. For examle, if the width of an HTML element is 30 px and the padding is 10 pf and border with 2 pf, the element content will have the dimension of 10px by 10px the space taken wii bem30 by 30 and surrounding 2 pixel border surrounding the 30px boundary and the total width will be 32 by 32px. After the border whatever the margi...

CSS Functions and Pseudo Selectors CSS supports the following functions: calc() function url() function rgb() function rgba() function -webkit-gradient() function Transform functions: rotateX() rotateY() rotateZ() rotate() cubic_beizer_function() The units of measurements like padding and margins is: px -> pixel (1px = 0.128mm) pt -> points in -> inches cm -> centimeters There are two more units of measurement like em and rem which are discussed in https://thewebdesk.blogspot.com/2023/02/em-and-rem.html The "none" value:- The "none" value is written whenever you don't want a property of any HTML elements. For example: a { border:none;text-decoration:none;} The above CSS code snippet will not dispaly a brder for the anchor tag and there will be no underline for the hyperlink To center an element horizontally: Use {margin :0 auto} Th...

Debugging using Javascript CSS(Cascading style sheets) is a mechanism to add style to a web page to create a style sheet, create a file with the .css extension To include an external stylesheet, use the <link rel="stylesheet" href="gaurav.css" type="text/css"/> To include an internal stylesheet , use the <style type="text/css"></style> inside the head element. To style an HTML element directly, use inline styling to specify all the CSS properties in the style attribute. !important is used to override the previous value of the selector Points to remember The class is included by using "." prefix to a class name atribute. The id selector is included selector is iccluded by using by "#" prefix to a id name attribute To apply styling to all, elements having class = "first", use p.first {} To apply styling to all elements having class="first...

Introduction to BootStrap 3 The Bootstrap grid dsystem is a way to position different elements in a web page. To accomplish this, a set of different classes for different sized devices. The Bootstrap grid system divides sections in 12 equal width columns. There are short names for different devices. sm md lg xl All these names are prefixed by the text : col- All these names are suffixed by the number of divisions it will take out of the total 12 divisions. Note: t Example: To make a section with an iimage on the left spanning 4 divisions, a paragraph in the middle spannihg 3 divisions and some text spanning 5 divisions, we must write the folowing markup: <div class="row"> <div class="col-lg-4"> <img src="example.jpg" alt="some text" /> </div> <div class="col-lg-3"> <p>Some paragraph</p> </...

Responsive Web Design Since the evolution of the world wide web, devices with different sizes have come into existence. To match the web page for different screen sizes, developers have started making code for different sized devices using responsive web design techniques. We will see one way in this article. Technique Using the <meta> tag. The name attribute of the meta tag should be viewport and value should be content="width=device-width, initial-size=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> The consequences of the above code snippet is that the user width will be automically scaled up or down as per the device size and the user cannot pinch the screen on smartphone or tablets.