HTML & CSS - 101

#webdev #frontend #css #html

When we talk about web-dev , At the very least we talk about websites right? Generally talking about 3 things at the base....

1. HTML(Hypertext Markup Language)
2. CSS(Cascading Style Sheet)
3. JAVASCRIPT

For to simplify in layman terms :

In a website HTML responsible for the contents of your website.So if a website was a house, then the HTML would be the actual bricks of the house._Similarly, the HTML file contains the content of your website, like the text content or the images or buttons or links.
_CSS is responsible for styling your website like the color of the walls or the shape of your door.

The CSS file determines how your website will look.
It targets all the content in your website that you created using HTML.So you could use CSS to make a button red and have rounded corners and the button text to have a particular
font.

HTML + CSS = BFFs

You can have HTML without CSS (that would be really ugly!), but you can’t have CSS without HTML.
CSS is applied to the HTML.

3.HTML is the content of a webpage. So think of it like a Word document where you have all of your content (headings, subheadings, paragraphs, bullet points, etc).

CSS is the style or appearance of that content. So CSS is kind of like the editor that tells what color, font and size each bit of text should be and also where to place it. We can also use CSS to actually place things around the page.

5.HTML and CSS should always be kept in separate files. While there are ways to include CSS in an HTML document, the best practice is to keep it in its own separate document that the HTML document links to.

Here's an example of what BFF's looks like

1.HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- This link tag is used to link html file with css file -->
    <link rel="stylesheet" href="index.css"
    <title></title>
  </head>
  <body>
    <!--Nav tag is used here for navigation bar at top right corner -->
    <nav>
      <div id="navdiv">
        <a href="https://www.google.com/gmail/about/#" class="c">Gmail</a>
        <a href="https://www.google.co.in/imghp?hl=en&tab=wi&ogbl" class="c">Images</a>
        <div><img src="menu.png"></div>
        <div><button type="submit" name="button">Sign In</button></div>
      </div>
    </nav>
    <!--End of navigation -->
    <!-- Main body of google -->
    <main>
      <center>
        <img src="google.png" width="20%" height="5%" id="googleimg">
        <!-- Search bar -->
        <div>
          <div id="maindiv">
            <span><img src="search.png"></span>
            <span id="inputspan"><input type="text" name="search"></span>
            <span><img src="mic.png"></span>
          </div>
        </div>
        <!--Buttons -->
        <section>
          <div><button type="submit">Google Search</button></div>
          <div><button type="submit">I'm feeling lucky</button></div>
        </section>
        <div><a href="">Work, learn and run your bussiness from home</a></div>
        <div id="Bottomdiv">
          <span>Google offered in:</span>
          <ul>
            <li><a href="">हिन्द</a>ी</li>
            <li><a href="">বাংলা</a></li>
            <li><a href="">తెలుగు</a></li>
            <li><a href="">मराठी</a></li>
            <li><a href="">தமிழ்</a></li>
            <li><a href="">ગુજરાતી</a></li>
            <li><a href="">ಕನ್ನಡ</a></li>
            <li><a href="">മലയാളം</a></li>
            <li><a href="">ਪੰਜਾਬੀ</a></li>
          </ul>
        </div>
      </center>
    </main>
  </body>
</html>

CSS

* Styling of navigation bar */
#navdiv{
  display:flex;
  width:17%;
  margin-left: 82%;
  justify-content: space-around;
  margin-top: 1%;
  height:35px;
}
nav img{
  margin-top: 5px;
}
#googleimg{
  margin-top: 100px;
}
/* Removing underline from links*/
a{
  margin-top: 8px;
  text-decoration: none;
}
button{
  border-radius: 3px;
  height:100%;
  padding:5px 12px;
  background-color: #4C87E1 ;
  color:white;
  border:none;
}
/* setting up size and border stle of search bar*/
#maindiv{
width:35%;
border-radius: 50px;
display: flex;
height:40px;
border:1px solid lightgrey;
}
#inputspan{
  width:80%;
}
span{
  vertical-align: top;
}
span:first-child{
  width:10%;
  border-radius: 50px;
  margin-top: 7px;
}
span:last-child{
  width:10%;
  border-radius: 50px;
  margin-top: 7px;
}
input{
  height:100%;
  width:100%;
  border: none;
  padding:0px;
}
section{
  display: flex;
  margin-top: 2%;
  width:23%;
  justify-content: space-around;
  margin-bottom: 2%;
}
section button{
  padding:10px 12px;
  background-color: lightgrey;
  color:black;
}
ul{
  display: flex;
  width: 30%;
  padding-left: 0px;
  list-style: none;
  justify-content: space-around;
  margin: 6px;
}
#Bottomdiv{
  display:flex;
  font-size: 12px;
  margin-top: 3%;
}
#Bottomdiv span{
  width:7%;
  margin-left: 31%;
}
/*When hovered*/
a:hover{
  text-decoration: underline;
}
button:hover{
  border: 1px solid gray;
}

And Voila! you get this....

That’s when you either say “Cool! I’ve always wanted to learn HTML and CSS!” or “Huh? This just got way too complicated.”

Now again there's more to it,JS(javascript to make the house a home , makes it an user interface from static to dynamic webpage)

Now as you have build your website or any other Front-end
web-dev project , you need to learn how to use
Git and GitHub making a repository then pushing your project in main to commit ,then to publish.
If you think now that "Are we done?"
No, we have GitHub pages to launch your website in real world and then APIs to fetch etc etc.Just so much of it

Next few days I'll be going all hands to write exact CSS and HTML . I couldn't even fit the basics for both of CSS and HTML.So I'll be going for separate articles.

Till then, Happy Learning!!!