The Major Technologies of Web Design and Development

Computers,Website Design five Major Technologies of Web Design/Development Introduction There are five main equipment which can be important to construct a dynamic internet site from scratch.  Those equipment are the languages HTML,CSS,Javascript,PHP, and SQL. I'm going to present an outline of every of these languages and what they're used for. 

1. HTML

 HTML is the same old language for growing net pages.

 The acronym HTML stands for Hyper Text Markup Language.

 A markup language makes use of tags like .... In HTML a tag represents distinct factors of a web page. 

Most tags are available in a hard and fast with a gap tag (i.e. ,,or ) and a final tag (i.e. ,,or ).

 As you may see the outlet tag is made of an open triangular bracket, observed with the aid of using its call and a final triangular bracket.

2.CSS

 CSS stands for Cascading Style Sheet. While HTML is used to explain a web page, CSS is used to layout it. All of the varieties of a web page from the placement of factors to the style, shadeation, and width of a border, to the background-shadeation or photo of factors are distinct the use of CSS.  You may want to technically construct a web page entirely from HTML however it might be a totally uninteresting web page, with black letters, a white background, and an unappealing layout.

 3.  Javascript (JS) 

Javascript is an critical a part of what makes a internet site dynamic. Javascript is a language that runs immediately withinside the browser and consequently permits dynamic adjustments to be made to the internet site primarily based totally on person enter.

  Javascript can extrade positive factors withinside the web page with out requiring a complete web page reload that's quicker and makes for a higher person experience. Since Javascript works immediately from the person's (client's) browser, it's far referred to as a client-facet language. 

4. PHP 

php Just as Javascript is a client-facet language as it operates immediately from the person's browser, PHP is a server-facet language as it runs from the server, wherein pages are retrieved and sent (served) to the client.  PHP is a language that dynamically generates pages. A PHP script may be used to construct an HTML web page primarily based totally on person enter and different statistics. PHP also can be used to have interaction with databases which can be at the server and retrieve statistics from them. five. 

5.SQL 

SQL stands for dependent question language. It is a trendy time period for languages which can be used to create, access, and alter databases and their tables, along with MySQL. To positioned it pretty truely a database is a set of tables that keep statistics. These tables are very beneficial in internet site layout. It might be very hard to have a login and signup machine if a domain could not keep person statistics in a database table. This is simply certainly considered one among many makes use of for those tables. Blogofjay will stroll readers via constructing web sites from scratch with HTML, CSS, Javascript, PHP, and SQL.

 How to make preloader, create spinner only html css.

Today We will create preloader with the help of html css.

first we write  html code , so first create one "div" give class "loader" div inside create another dic keep class "left" then inside the left one another div create that class name "right" and the last one is also require class "center"

youer Html structure should like this

<div class="loader">

<div class="left">

<div class="right">

<div class="center"></div>

</div>

</div>

</div>

ofter completing the html code let's start the css code

first design background , color of background black.

*{

padding: 0;

margin: 0;

box-sizing: border-box;

}

body{

background: black;

}

now design the div which we give class loader

.loader{

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

we add in this div animation property for animate to div

.left{

width: 200px;

height: 200px;

background: cyan;

display: flex;

justify-content: center;

align-items: center;

animation: rote 4s steps(5, end) infinite;

}

.right{

width: 150px;

height: 150px;

background: black;

display: flex;

justify-content: center;

align-items: center;

transform: rotate(45deg);

animation: rot 1s steps(5, end) infinite;

}

.center{

width: 50px;

height: 50px;

background:cyan;

transform: rotate(45deg);

animation: rota 4s steps(5, end) infinite;

}

@keyframes is the css property that is uses for animation of your design 

@keyframes rote{

0%{

border-radius: 0%;

}

100%{

/*transform: rotate(-380deg);*/

border-radius: 50%;

}

}

@keyframes rot{

0%{

border-radius: 2%;

}

100%{

transform: rotate(380deg);

border-radius: 50%;

}

}

@keyframes rota{

0%{

border-radius: 0%;

}

100%{

transform: rotate(-380deg);

border-radius: 50%;

}

}

Now completed your project run your file in browser.

 How to make menu bar for website,nav bar design.

we are making  a beautiful navigation menu with smooth effect animation.we are using in this tutorial html cs and javscript.

Html code 

create one div give id "mysidenav" and class name "sidenav".

one anchor tag create and write like this '<a href="javascript:void(0)"'  give a class "closebtn" add a onclick function name of functiont"closeNav()" in anchor tag add a Entity "&times:"

ofter anchor tag create four more anchor tage for about,services,careers and contact now close the div.

and take another div give id "main" in this div create a "span" tag add onclick function give your function name "openNav()" add entity "&#9796;"

close the all tags.

your html code is ready 

<div id="mySidenav" class="sidenav">

  <a href="javascript:void(0)"

  class="closebtn"

  onclick="closeNav()">&times;</a>

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Careers</a>

  <a href="#">Contact</a>

</div>

<div id="main">

  <span style="font-size:30px;cursor:

  pointer"

  onclick="openNav()">&#9776; 

  </span>

</div>

Css Coding

now styling the html code we create another file to link with html file and  save with .css.

for example

<link rel="stylesheet" type="text/css" href="your file name.css">

after linking the css file open this css file and start styling

follow this code 

body{

    font-family: "Lato", sans-serif;

    transition: background-color .5s;

}

.sidenav {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: #111;

    overflow-x: hidden;

    transition: 0.5s;

    padding-top: 60px;

}

.sidenav a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #818181;

    display: block;

    transition: 0.3s

}

.sidenav a:hover, .offcanvas a:focus{

    color: #f1f1f1;

}

.sidenav .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

}

#main {

    transition: margin-left .5s;

    padding: 16px;

}

@media is use for responsiveniss 

@media screen and (max-height: 450px){

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}

Javscript coding

now we will create javascript code in you html file

Set the width of the side navigation to

450px and the left margin of the page content

to 450px. if you want to change the value you can change but width and margin will be same.

<script>

function openNav() {

 document.getElementById("mySidenav")

 .style.width="50px";

 document.getElementById("main")

 .style.marginLeft="450px";

 document.body.style.backgroundColor=

 "rgba(0,0,0,0.4)";

}

function closeNav() {

 document.getElementById("mySidenav")

 .style.width = "0";

 document.getElementById("main")

 .style.marginLeft= "0";

 document.body.style.backgroundColor =

 "white";

}

</script>

How to Create login page using html css and javascript.

in this tutorial we making a login page with the help of html,css and js.this page we create awesome animated inputs. when you focus on input the input text go on top.

so let's start it

First of all we take a "section" tag the create one "div" now give a heading in "h1" after heading take a "form" tag give id "login" use the "method" "get".

As after that create "input" give id "uname" the create one "label" give class "ch1" in label write 'enter your name'.

now create  two more inputs and labels one for 'email' and another for password.

now create submit button give class "button" and also add "onClick" function give to function name "login()"

now close all the tages etc form, div and section.

your code should be like that 

<section>

<div>

<h1>Please Submit This Form</h1>

<form id="login" method="get">

<input type="text" id="uname">

<label for="" class="ch1">Enter Yuor Name</label>

<br>

<input type="password" id="pass">

<label for="" class="ch2">your Password</label><br>

<input type="email">

<label for="" class="ch3" id="email">Your Email</label>

<br>

<input class="button" type="button"  name="log" id="log" value="log in here" onclick="login();">

</form>

</div>

</section>

Completing of Html code let's start the Css Code for designing the form

first add these code in your css

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: monospace;

}

body{

background: lightseagreen;

}

style the section like this

section{

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

heading should be like this

section h1{

font-size: 2rem;

letter-spacing: 5px;

font-family: fantasy;

position: absolute;

top: 4rem;

left: 30%;

color: #fff;

text-align: center;

}

give width 80% to the div background is your Choice

section div{

width: 80%;

height: 350px;

border-radius: 15px;

box-shadow: 4px 1px 8px 1px #fff;

background: darkcyan;

}

your form look like this

form{

width: 90%;

height: 50%;

margin-left: auto;

margin-right: auto;

margin-top: auto;

margin-bottom: auto;

}

Effective looking input design you add this code

input{

width: 80%;

height: 50px;

margin: 20px 0;

outline: none;

border: 4px solid #fff;

background:darkcyan;

}

if you want to change the input text so write 'input[type="text"]'

now ypu can customize you input text.

input[type="text" i],input[type="password" i],input[type="email" i]{

color:#fff;

font-weight: bolder;

font-size: 1.3rem;

padding-left: 2rem;

}

after design the input target the label which give you a class "ch1" 

.ch1{

position: absolute;

top: 29%;

left: 30%;

color: #fff;

font-family: monospace;

font-weight: bolder;

transform: translate(-50%);

pointer-events: none;

transition: all .8s ease;

}

now we using focus selector your code should be like this

input:focus + .ch1{

font-size: 15px;

top: 25%;

padding: 5px;

background:darkcyan;

}

another label which is give a class "ch2"

.ch2{

position: absolute;

top: 42%;

left: 30%;

color: #fff;

font-family: monospace;

font-weight: bolder;

transform: translate(-50%);

pointer-events: none;

transition: all .8s ease;

}

same process 

input:focus + .ch2{

font-size: 15px;

top: 38%;

padding: 5px;

background:darkcyan;

}

also same process here

.ch3{

position: absolute;

top: 56%;

left: 28%;

color: #fff;

font-family: monospace;

font-weight: bolder;

transform: translate(-50%);

pointer-events: none;

transition: all .8s ease;

}

input:focus + .ch3{

font-size: 15px;

top: 52%;

padding: 5px;

background:darkcyan ;

}

now design the button we take a class name "button"

.button{

padding: 15px 60px;

font-size: 1.2rem;

letter-spacing: 5px;

cursor: pointer;

color: #fff;

font-weight: bolder;

background:#2c515f;

outline: none;

border: none;

border-radius: 10px;

transition: all .4s;

}

for more Effective add hover animation to the button

.button:hover{

background: #436a79;

}

So your Css code is Completed now we add the javascript logic.

javascript code

come to your html file and where close the body tag eg "</body>" create here "script" tage. script tag is use to add javascript code internal in you html file if you want to make  external you should create another file. javascript file save with .js and link to your html file.

link the js file like this

<script src="index.js"></script>

in internal adding the code 

<script type="text/javascript">

function login() {

var username = document.getElementById('uname').value;

var password = document.getElementById('pass').value;

var email = document.getElementById('email').value;

if (username == 'hamza' && password == '4433') {

console.log('login successfully');

location.assign('file:///E:/Sublime%20Text%203/more%20designs/digt%20clock.html');

}

else{

window.alert('wrong password or username');

}

}

</script>

So Today This is it . I hope  this content helpful for  you.

Hello Friends today we will create flaying button for sending message.

like this.

create button tag then take div give class "svg-wrapper-1"

then another div for svg class name "svg-wrapper" now add the svg code after svg code close the both div and create "span" tag .

see the html code should like this

<button>

  <div class="svg-wrapper-1">

    <div class="svg-wrapper">

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">

        <path fill="none" d="M0 0h24v24H0z"></path>

        <path fill="currentColor" d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>

      </svg>

    </div>

  </div>

  <span>Send</span>

</button>

after completing html code lets start style your html .

first create css file and save dot css ".css". creating this file link with you html file like this

<link rel="stylesheet" type="text/css" href="css/style.css">

first style the button 

button {

 font-family: inherit;

 font-size: 20px;

 background: royalblue;

 color: white;

 padding: 0.7em 1em;

 padding-left: 0.9em;

 display: flex;

 align-items: center;

 border: none;

 border-radius: 16px;

 overflow: hidden;

 transition: all 0.2s;

}

as after that span design.

button span {

 display: block;

 margin-left: 0.3em;

 transition: all 0.3s ease-in-out;

}

now svg styling

button svg {

 display: block;

 transform-origin: center center;

 transition: transform 0.3s ease-in-out;

}

add hover selector to button

button:hover .svg-wrapper {

 animation: fly-1 0.6s ease-in-out infinite alternate;

}

button:hover svg {

 transform: translateX(1.2em) rotate(45deg) scale(1.1);

}

button:hover span {

 transform: translateX(5em);

}

add active selector  to button.

button:active {

 transform: scale(0.95);

}

for animate your button add "@keyframes" and write your animation name for example

@keyframes fly-1 {

 from {

  transform: translateY(0.1em);

 }

 to {

  transform: translateY(-0.1em);

 }

}

we completed now run your file result will awesome.

if you want to watch video cleck here   to watch a full video

  How to create Hover effect button design.

today we will show you how to make button design for your website.like this.

so let's start it.

first we create button tag and give a class "learn-more"

then under button tage create span tag give a class "circle", now another span create we will give two classes one"icon" second "arrow".Now make another Span tag give class "button-text".

we complated html coding

we make html like this.

<button class="learn-more">

  <span aria-hidden="true" class="circle">

  <span class="icon arrow"></span>

  </span>

  <span class="button-text">Learn More</span>

</button>

now we styling of our html code let's start.

create .css file and link with your html file like this.

<link rel="stylesheet" type="text/css" href="name.css">

take a button class name and code it

.learn-more {

 width: 12rem;

 height: auto;

 position: relative;

 display: inline-block;

 cursor: pointer;

 outline: none;

 border: 0;

 vertical-align: middle;

 text-decoration: none;

 background: transparent;

 padding: 0;

 font-size: inherit;

 font-family: inherit;

}

style the circle like this

.circle {

 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

 position: relative;

 display: block;

 margin: 0;

 width: 3rem;

 height: 3rem;

 background: #282936;

 border-radius: 1.625rem;

}

after circle styling take icon class and style it.

.learn-more .circle .icon {

 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

 position: absolute;

 top: 0;

 bottom: 0;

 margin: auto;

 background: #fff;

}

now take arrow class.

.learn-more .circle .icon.arrow {

 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

 left: 0.625rem;

 width: 1.125rem;

 height: 0.125rem;

 background: none;

}

now we will use pseude class for example before.

.learn-more .circle .icon.arrow::before {

 position: absolute;

 content: "";

 top: -0.29rem;

 right: 0.0625rem;

 width: 0.625rem;

 height: 0.625rem;

 border-top: 0.125rem solid #fff;

 border-right: 0.125rem solid #fff;

 transform: rotate(45deg);

}

style the text-button.

.learn-more .button-text {

 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);

 position: absolute;

 top: 0;

 left: 0;

 right: 0;

 bottom: 0;

 padding: 0.75rem 0;

 margin: 0 0 0 1.85rem;

 color: #282936;

 font-weight: 700;

 line-height: 1.6;

 text-align: center;

 text-transform: uppercase;

}

use hover selector for animation.

.learn-more:hover .circle {

 width: 100%;

}

.learn-more:hover .circle .icon.arrow {

 background: #fff;

 transform: translate(1rem, 0);

}

.learn-more:hover .button-text {

 color: #fff;

}

now we @supports its a  specific CSS features.called feature query.

@supports (display: grid) {

 body {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-gap: 0.625rem;

  grid-template-areas: ". main main ." ". main main .";

 }

so this is is now run your file in your browser i hope result very good.