Web Development

 Front end


Full stack web development means frontend plus backend development. 

Front End vs Back End Explained


Front end development consists of everything that the user directly interacts with. 

Two main components of frontend development are:
Responsiveness 
Performance

Basics of web architecture:
Website- Front end to interact with the user
Server- Back end to hold and manage all the data
IP address- Address assigned to the website to be accessible on the internet

The user is not concerned with the backend of the website. 

HTML helps to structure the webpage. 

HTML has nested tags.

Here is an HTML code and the webpage:

<HTML>
<Head> <Title>I am trying to build a website </Title></Head>

<Body>
<h1> This is the first heading </h1>
<p> This is a paragraph tag </p>
<h2> This is the second heading </h2>
<img src= "lupin-tonks-fanart.jpg" width="200" height="200">

</Body>


</HTML>




Bold, Italic, and Underline

<HTML>
<Head> <Title>I am trying to build a website </Title></Head>

<Body>
<h1 "font-family: 'Courier New', Courier, monospace;"> This is the first heading </h1>
<p> <i>This is a <b>paragraph</b> tag </i></p>
<h2> This is the <u>second heading</u> </h2>
<img src= "lupin-tonks-fanart.jpg" width="200" height="200">

</Body>


</HTML>



How to fill background color all over the webpage

<HTML>
<Head> <Title>I am trying to build a website </Title></Head>

<Body style="background-color: pink;">
<h1 "font-family: 'Courier New', Courier, monospace;"> This is the first heading </h1>
<p> <i>This is a <b>paragraph</b> tag </i></p>
<h2> This is the <u>second heading</u> </h2>
<img src= "lupin-tonks-fanart.jpg" width="200" height="200">

</Body>


</HTML>


Notice how the attributes of h1  tag are making no difference. It is as if they didn't exist. 




Adding color to the text

<HTML>
<Head> <Title>I am trying to build a website </Title></Head>

<Body style="background-color: pink;">
<h1 style="color:blue;"> This is the first heading </h1>
<p> <i>This is a <b>paragraph</b> tag </i></p>
<h2 style="color:green;"> This is the <u>second heading</u> </h2>
<img src= "lupin-tonks-fanart.jpg" width="200" height="200">

</Body>


</HTML>



Changing the font style

<HTML>
<Head> <Title>I am trying to build a website </Title></Head>

<Body style="background-color: pink;">
<h1 style="font-family:Verdana;"> This is the first heading </h1>
<p> <i>This is a <b>paragraph</b> tag </i></p>
<h2 style="font-family:Courier;"> This is the <u>second heading</u> </h2>
<img src= "lupin-tonks-fanart.jpg" width="200" height="200">

</Body>


</HTML>




Changing the font style
<HTML>
<Head> <Title>I am trying to build a website </Title></Head>

<Body style="background-color: pink;">
<h1 style="font-size:300%;"> This is the first heading </h1>
<p> <i>This is a <b>paragraph</b> tag </i></p>
<h2 style="font-size:500%;"> This is the <u>second heading</u> </h2>
<img src= "lupin-tonks-fanart.jpg" width="200" height="200">

</Body>


</HTML>



Font alignment

<HTML>
<Head> <Title>I am trying to build a website </Title></Head>

<Body style="background-color: pink;">
<h1 style="text-align: centre;"> This is the first heading </h1>
<p> <i>This is a <b>paragraph</b> tag </i></p>
<h2 style="text-align:right;"> This is the <u>second heading</u> </h2>
<img src= "lupin-tonks-fanart.jpg" width="200" height="200">

</Body>


</HTML>







Further reading:


Comments

Post a Comment

Popular posts from this blog

Diary -24th July

Image
  I tried learning Greek and Japanese. German is too easy and boring but I will get back to it as soon as I can. I wonder why not learn pretty much any real language on Duolingo? It will give me the variety I want.  The Greek letters sound just like Hindi letters. But the Greek letters are also like English letters. Here is my secret to Indian English. In Japanese gohan is rice. It sounds like go or cow or white and anna which means grain. Recipes I want to try: https://www.archanaskitchen.com/vegetarian-thukpa-recipe-by-saransh-goila-india-on-my-platter/amp https://www.cookwithmanali.com/thandai-powder/ Maggie masale noodles tastemaker and maggie masala e magic recipe https://hebbarskitchen.com/maggi-masala-powder-maggi-masala-magic/ Science and animals Hippos  https://www.usatoday.com/story/news/2022/09/27/what-do-hippos-eat/10303668002/
Read more

How to make clip art faces-Part 1: Pretty girl face with braided hair decorated with flowers

Image
  The use of circles makes a face look very amiable. And, this picture isn't as complicated as it seems.  I have used MS Word to make this clip art. But, you can use any software of your choice.  Let's begin. You will find all the shapes used in this picture in MS Word in this way: Insert>>Shapes>> Face Select an oval.  To change the color of the oval, right click on the oval, you will find 'fill' and 'outline' options.  Choose any color of your choice. I have played around a lot with colors. I must insist that you do the same according to your tastes and requirements. Hair Here is how we use the ovals to assemble the hair.  Like this, also use ovals to complete the other side.  Flowers Let us draw a single flower then we will copy and paste it again and again.  Start with a circle.  Then draw two more concentric circles of colors you like.  Now add the petals using the teardrop shape.  Use another color to draw an inner...
Read more

Object oriented programming in dart concepts

   No introduction, let us go straight to concepts :-) What is object oriented programming? It is a paradigm that involves classes and objects. First, we will understand paradigms in detail then we will understand how object oriented programming falls in this framework. Then we will explore what are classes and objects. After that we understand object oriented programming in Dart language. So, keep scrolling to get crystal clear concepts.  What is a paradigm? Paradigm is a method to solve a problem.  It may include some tools or coding languages. We can use any  programming language to solve a problem but that approach used to solve it is called a paradigm.  Types of paradigms Paradigms separate programming languages into different categories on the basis of features of various programming languages.  1. Imperative programming paradigm Statements change the state of the program.  They give commands to the computer. It  means this type of prog...
Read more