Skip to main content

web development course by code with harry

Basic requirements to build a website 
  1. HTML
  2. CSS- it adds beauty 
  3. Java script- it adds brain

HTML

  • HTML stands for the hypertext transfer protocol
  • It is a standard markup language for giving a static skeleton to web applications and websites.  
  • It's a well-known standardlised system. It means no one will introduce his new language and all admitted HTML to display content. Web browser also tended to support this language which is mainly for creating web pages. 

CSS

cascading style sheets which is known as CSS. It's a style sheet language that used to handle the presentation of the web pages containing web page. 
It makes our website beautiful and modern looking. 

Java script

It is known as JS, is a high-level dynamic interpreted programming language.
It allows client-side scripting to create completely dynamic web application and websites. 

I have to learn HTML(80%), CSS(40-60%), Java script(50-70%).

We are going to use visual studio code IDE to run HTML. 

comments are used slightly different than c language
c language-: //this is my insights 
however in HTML 
<!-- my journey starts here -->
There is a short cut key to getting these things into comment ctrl+/  this will make the line comment. 

 
<strong></strong> = it bolds the line within it = <b></b>
<em></em> =it changes the font to ittalic within its tag, however it does not mean you can not use <i></i>
As new generation of language evolves, we all developers tend to use strong tag instead bold tag
Lorem4 = it automatically creates four line 
Lorem40= 40 line

HTML ignores extra space within it. 
<br> = it line breaks
it does not need closing tag 
line breaking does not work unless you use br tag with the body tag
<hr> crates a horizontal line 
ctrl+enter= to jump the new line (it is necessary to understand because it always helps you jump to the next line without taking your time so kindly do thid while yoi do yhat so it would be easy for you to make your work simple)

p*24= will create 24 paragraph tags 
if you want to add some hyperlink  or links  then you have  a <a> tag within a attribute 
eg- <a href= "https://google.com" target="_blank" rel="nofollow"> go to google and search something</a>

short cut key to write simultaneously 
alt+tap your cursor, now you are on the go
to make an comment(avoided, does not execute)
ctrl+/(key thing to remember)

<!-- hello bro how are you -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is description">
    <meta name="keywords" content="HTML,css, Javascript, web development">
    <meta name="robots" content="INDEX, FOLLOW">
    <title>Heading paragraph and emmet</title>

    <!-- This is how you include the external css -->
    <link rel="stylesheet" href="bijaya.css">

    <!-- This is how you include the external javaScript -->
    <script src="bijaya.js"></script>
</head>
<body>
     <h1>This is singh bijaya singh sabar</h1>
     <h2>me</h2>
     <h3>kaise ho bhaisab</h3>
     <h4>main toh sabse accha hun</h4>
     <h5>kya bolti public</h5>
     <h6>public kuch nahi bolti</h6>
     <p>Lorem ipsum dolor, sit <strong>this is veer</strong> <b>hello world</b>bamet <em>toh kaise ho aap log</em>consectetur adipisicing elit. Magni veritatis pariatur eaque amet commodi eos vitae natus labore neque hic suscipit accusamus, fugit perferendis laudantium ipsam dolor <i>kaise ho bhaisab</i> ratione, nostrum corrupti sit, aliquid ad? Vero veniam ex repudiandae? Ipsum, obcaecati!</p>
     <!-- ctrl+enter to jump the new line -->
     <p>Lorem <br>ipsum dolor sit.</p>
     <hr>
     <p>second</p>
     <p>third</p>
</body>
</html>

<a href="https://google.com">worlds no one search engine</a>
to show up in new tab you may write target= _blank inside a href tag
<a href="https://google.com target=_blank">worlds no one search engine</a>
to create ordered list and unordered list 
<ul type="circle">
    <li>Toh kaise ho aap log</li>
    <li>Mein badiya hun aap kaise ho</li>
    <li>jindagi mein kuch nahi bas shanti chahiye</li>
 </ul>
 <ol type="I">
     <li>jindagi thari kaisi hai bhaisab</li>
     <li>mero toh ek number hai biro</li>
     <li>hello bro</li>
 </ol>

Tailoring meta tags 
<meta name="description" content="sabarpark is focused on investing, stock market news, and cryptocurrency.">
    <meta name="keywords" content="cryptocurrency, stock marketl, bitcoin">
    <meta name="robots" content="INDEX, FOLLOW">



HTML tables

normal example
<table>
        <thead>
            <tr>
                <th>company name</th>
                <th>employee name</th>
                <th>customer id</th>
            </tr>
        </thead>
        <tbody>
            <tr>
               <td>TCS</td>
               <td>Jasobanta Das</td>
               <td>678484747</td>
            </tr>
            <tr>
               <td>Infosys</td>
               <td>Dinesh Das</td>
               <td>567674647</td>
            </tr>
            <tr>
               <td>Wipro</td>
               <td>Bibek Das</td>
               <td>47890</td>
            </tr>
        </tbody>
    </table>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
</head>
<body>
    <h2>plus three form fill up</h2>
    <form action="backend.php"></form>
    <label for="name">Name</label>
    <div>
        <input type="text" name="myNname" id="name">
    </div>
    <br>
    <label for="roll">Roll numer</label>
    <div>
    <input type="text" name="myRoll" id="roll">
    </div>
    <label for="email"> Email:</label>
    <br>
    <div>
      <input type="email" name="myEmail" id="email">
    </div>
    <label for="date">Date</label>
    <br>
    <input type="date" name="myDate" id="date" >
    <br>
    <br>
    <div>
        number<input type="number" name="myBonus" >
    </div>
    <div>
        myEligibility <input type="checkbox" name="myEligibility" checked>
    </div>
    <br>
    <div>
        male<input type="radio" name="myGender" > female <input type="radio" name="myGender" >other <input type="radio" name="myGender" >
    </div>
    <br>
    <div>
       Write about yourself <br> <textarea name="myText" cols="30" rows="10"></textarea>
    </div>

    <div>
        <input type="submit" value="Submit now"> <input type="reset" value="reset now" >
    </div>
    <label for="car">car</label>
    <select name="myCar" id="car">
        <option value="ind">indica</option>
        <option value="mrt" selected>suzuki</option>
    </select>

   
   
   
   
</body>
</html>



Paragraph is a block element, means it gets all space required to be full fille. paragraph element consumes extra space. 
span is an inline element or tag which incorporate paragraph inside it. 
This is key thing to remember. 
inline element requires the needed space for them and dont require extra space but it is not in the case of block element. It takes all space out here. 

ids and classes are being difficult for me of harrybhai. 

id means identifier                      
one element one id
. is for class and # is for ids
 <div id="mainBox" class="redBg blackBorder"> This is a mainbox</div>
    <span class="redBg"></span>
    <span class="redBg blackBorder blackBackground"></span>
    <!-- class id defined by this emmet -->
    <span id="mainBox"></span>
    <span class="redBf blG"></span>
    <span class="redBf blG"></span>
    <span class="redBf blG"></span>
    <span class="redBf blG"></span>                     

HTML entities
to create space use &nbsp;

 <p>hello world toh kaise ho aap &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; log</p>
    <p>hello world &lt;p&gt;</p>

when you forget html entities, you will search html entities reference you will get to that point

HTML semantic tag
<details></details>

CSS tutorial begin

html code=markup
web safe fonts are fonts preinstalled in our operating system. 
And web fonts are not pre-installed. 
when you add web fonts than make sure you include its link otherwise it will not show up as per your requirements. 
One problem is i did not get the font family concepts, uploading google fonts style sheet. 

Tutorial 20 and21 are hard for me to getting. repeat practice will help me. 
a:hover means if you go with the aerrow how will it be?


Labels:

Comments

Post a Comment

Popular posts from this blog

CSS by research

how to center elements inside container using text-align:center in css The `text-align: center;` property in CSS is primarily used to horizontally center inline or inline-block elements within their parent container. If you want to center block-level elements, you'd typically use other methods like margin auto, flexbox, or grid. Here's how you can use `text-align: center;` to horizontally center inline or inline-block elements: ### Example with `text-align: center;`: ```html <div class="container">     <p class="centered-element">This is a centered element.</p> </div> ``` ```css .container {     text-align: center; } .centered-element {     display: inline-block;     /* Other styling if needed */ } ``` In this example, the `text-align: center;` is applied to the `.container`, and the `.centered-element` is set to `display: inline-block;`. This makes the paragraph centered within its parent container. Keep in mind that `text...
Post a Comment
Read more

Networking tutorials by bitten tech

 Networking computer network= A collection of computing devices that are connected in various ways in order to communicate and share resources. Usually, the connections between computers in a network are made using physical wires or cables. However, some connections are wireless, using radio waves or infrared signals.  The generic term node or host refers to any device on a network. Date transfer rate= is the speed with which data is moved from one place on a network to another.  Data transfer rate is a key issue in computer networks.  File server= A computer that stores and manages files for multiple users on a network.  Web server= A computer dedicated to responding to requests(from the browser client) for web pages. Types of Networks(LAN) A network that connects a relatively small number of machines in a relatively close geographical area.     Various configurations, called topologies, have been used to administer LANs Ring topology= A configur...
Post a Comment
Read more

JS research

simplify it let gameOver= false; when should i use this in simple terms  In simple terms, `let gameOver = false;` is like telling your program that the game is not over yet. You use this when you want to keep track of whether the game is still being played or if it has finished.  For example, imagine you're writing code for a video game. At the start, you'd set `gameOver` to `false` because, well, the game hasn't ended yet. As the game progresses, if certain conditions are met (like a player winning or losing), you might change `gameOver` to `true` to signal that the game is finished. So, `let gameOver = false;` is a way to let your program know the initial state of the game, and you'll change it later on when the game comes to an end. make me understand this js code in simple terms let boxText = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig']; let e = [2, 4]; let boxText = ['Apple', 'Banana', 'Cherry', '...
Post a Comment
Read more