Skip to main content

HTML Class - I

 Few important terms:

Uniform Resource Locator (URL)

It is a short string containing an address that refers to an object in the “web.” URLs are a subset of URIs.

Uniform Resource Indicator (URI)

It is a short string containing a name or address which refers to an object in the “web.”

Hypertext Transfer Protocol (HTTP)

It is the set of rules for transferring files – such as text, images, sound, video, and other multimedia files – over the web. As soon as a user opens their web browser, they are indirectly using HTTP.

Back to HTML

HTML and CSS are used for validating web pages. These languages are directly connected with the way websites behave when used online on any web browser.

When you open a web browser and input any URL. The browser sends a message to the server which then searches into the HTML code.

Remember, every website has these three phase experts:

  1. Front End
  2. Back End
  3. Full Stack


HTML (Hypertext Markup Language): 

To define the building blocks of a website.


CSS (Cascading Style Sheet): 

To style the websites & make them look beautiful. CSS is all about aesthetics.

JavaScript: 

Adding functionality to web pages. BTW, this one is the real programming language.
Steps to follow: HTML + CSS + JavaScript

How to deal with repetitive tasks?
  • We use Front-End Framework & Libraries to get the job done quicker.
  • Framework and libraries come with a lot of code that we can reuse on our websites.
Tools that can be used for framework & libraries: 
  1. REACT, 
  2. Angular,
  3. VUE.
There is no need to learn all three frameworks & library tools. REACT is considered the most popularly used tool across the globe. Just learn this one.

Steps to follow this so far:
  1. HTML + CSS (Take 6 weeks)
  2. JavaScript (3 Months)
  3. REACT (5 Months)
How Website Work?
Document Object Model (Cntrl+shift+I)
HTML Basics:
  • Open the first program file in VS
  • Create folder: HTML
  • Open a folder in it called: index.html
  • The index.html usually represents the home page of a website.
"The REAL CODE BEGINS HERE"

<! DOCTYPE html>

<Html>

<Head>

          <Title> My first web page</title>   //This is the name of your webpage.

          <Style>

                     img {

                    .       Width: 100px;

                    .      Border-radius: 50px;

                    .      Float: left;

                    .      Margin-right: 10px;

                    }

                   p.username {

                   .   Font-weight: bold;

                   }

</style>

</head>

<Body>

       .   <img src="images/Thinkerz.jpg">               //src represent img file. Write the folder name/image name.

       .   <p class="username"> @IamAhmedWaqar</P>

       .   <p>Follow for coding updates</P>

</body>

</html>



Comments

Post a Comment

Popular posts from this blog

My First HTML Code

Coding is an art of Imagination. My first experience with coding is through HTML. Though I felt betrayed when I learned it was not a programming language. HTML is actually a markup language that helps with design format on web browsers. However, I got what I needed, and I am right on track in learning front-end development. HTML is the beginning point for front-end development. I won’t lie; I have done a little work on CSS (Cascading Style Sheet) language while writing my Html code. But it was just me copy-pasting from the YT tutorial. So I cannot claim that I have learned CSS fully. The good thing is that I have got a basic understanding of HTML in these past few days of continuous learning. Woohoo! This is my first HTML code: <!DOCTYPE html > <html>   <head>     <title> My First HTML CODE </title>   </head>   <body>     <h1> Hello World, I'm starting my Coding career! </h1>     <...
Post a Comment
Read more

HTML & CSS Roadmap for Beginners

  ➯ HTML (Hypertext Markup Language) ➺ What is HTML? ➺ HTML Elements ➺ Attributes ➺ Semantic HTML ➺ Accessibility ➯ CSS (Cascading Style Sheet) ✦ Fundamentals ➲ What is CSS? ➲ CSS Selectors ➺ Basic ➺ Complex ➺ Pseudo ➲ CSS Properties ➺ Colour ➺ Background-colour ➺ Font-family ➺ ...many more. ➲ Box Model ➺ Padding ➺ Border ➺ Margin ➲ Values & Units ➲ CSS Specificity & Inheritance ➲ Display ➲ Positioning ➺ Static ➺ Relative ➺ Absolute ➺ Fixed ➺ Sticky ✦ Advanced ➲ Shadows ➲ Gradients ➲ Transforms ➲ Transitions ➲ Animations ➲ CSS Variables ➲ Media Queries ➲ Layouts ➺ Flexbox ➺ Grid ➲ CSS Preprocessors ➺ SASS ➺ LESS ➺ PostCSS ➲ CSS Frameworks ➺ Tailwind CSS ➺ Bootstrap ➺ Materialize
Post a Comment
Read more