Scribd
Upload
31 views

Frontend:: ST ND RD

The document discusses the basics of front-end and back-end development, explaining that front-end involves the user interface and happens on the client-side, while back-end involves logic and computation that occurs on the server-side, and also provides an overview of HTML, CSS, and JavaScript, their roles in website development, and some common HTML tags and their uses.

Uploaded by

bunty231
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Frontend:: ST ND RD

The document discusses the basics of front-end and back-end development, explaining that front-end involves the user interface and happens on the client-side, while back-end involves logic and computation that occurs on the server-side, and also provides an overview of HTML, CSS, and JavaScript, their roles in website development, and some common HTML tags and their uses.

Uploaded by

bunty231
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

DAY 1.

Date: 28 september 2020

Full Stack/Application Development

Frontend:

 Whatever is happening in front of you when you are working or dealing with website or
application is frontend.
 It is a user interface (UI)
 It is also called as user interaction (UX)
 Front end development also called as client side programming.

Backend:

 All computation, logic that you do not see while user interaction with website or application
is backend.
 Backend development is also called as server side programming.
 Example: Data insertion, deletion, calculation, etc in database.

Frontend Discussion Continued...


 Frontend can be a website, android app, ios app, etc.
 We are dealing with website because it covers large number of audience.
 Website development has 3 different parts.
◦ Content
◦ Styling this content
◦ Adding interactive functions in website
 In simple words,
◦ A chair, table and bed in a room is a content.
◦ Size, color, strength, etc of chair, table and bed is styling the content.
◦ Using the table’s drawer, i.e. open/close, put something, remove something are the
interactive functions.
 1st is done using HTML.
 2nd is done using CSS.
 3rd is done using Javascript.
 Styling the content is also possible using HTML, but it takes a large time and work.
 CSS saves a lot of time.

Diagram:
Progressive web apps:
 You may have seen this option (Add to home screen) while surfing a website using your
smartphone.
 This is nothing but a website in the form of a app which is called as progressive web apps.

HTML: It describes a structure of a website.


CSS: It is design rules for website.
Javascript: It is used for making user interaction or user interactivity with website.

Important Note:
 Don’t confuse Javascript with a Java programming language.
 Javascript and java programming language has no relation. Java name in javacript was used
just for marketing purposes, because at that time, Java was popular.

HTML:

 To see the html structure of a live website. Right click -> select “inspect”
 Angular brackets < > are used to define a tag in HTML.
 Syntax:

 Element:

 Singular tags/Non closing tags:


◦ Example: <br /> or<br>
◦ These tags doesn’t have any content.
◦ <br> tag function is insert a line break.
DOM tree:

• Its full form is Document Object Module.


• This means entire HTML can be visualized by a tree as shown in figure below.

Diagram:

• Singular tags are not considered in this DOM tree.


• Singular Tag = Empty Tag = Non Closing Tag.

Basic HTML Structure:

<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<meta>______</meta>
<script>______</script>
<style>______</style>
<link>_______</link>
</head>
<body>
<h1>_____</h1>
<p>_______</p>
</body>
</html>

• <title>My Title</title>
◦ My Title will be shown when your website opens. It is shown on the tab.
◦ This title is also be shown when user searches a topic through search engine and your
title = topic.
• <meta>
◦ This tag is mostly used for search engine optimization (SEO).
◦ It helps to improve our website’s ranking in the search results if used properly.
• <script>
◦ Javascript code is written here.
• <style>
◦ CSS code is written here.
• <head>
◦ This tag renders first when your website loads.
◦ You may have noticed, whenever any website loads, its styling is already started and
then the content is shown.
• <body>
◦ The visible content that you want to show to client is written here.

Semantic Tags:
• These tags are used by search engines and other applications because it tells the meaning of
the tag.
• Example: <header>, This tag is telling the meaning that it will have the elements which only
belongs to header section.

<div> Tag:

• This tag doesn’t have any specific meaning to it. You can create different section using
<div> tag. Its a container to keeping different elements for grouping purposes. It can a
division of a section, footer, header, etc.

<h1> Tag:
• It defines heading of your webpage.
• It should be used once per webpage (html document = webpage).

<h2> - <h6> Tags:


• These are also headings but of less importance than <h1> tag.
• These can be multiple per webpage.

Semantic Importance

<h1>-----------------------most imp
<h2>
<h3>
<h4>
<h5>
<h6>-----------------------least imp

Note:
• Make a habit of using lowercase in all tags
<p> Tag:
• It is a paragraph tag, shows the content in it will be paragraph.

<br> or <br /> tag


• Its an empty tag, used to break the line. <br /> tag mostly recommended than <br>.

Block level Element & Inline Element:


• Every element in html has a default predefined style.
• This style could be either block or inline.
• Block level Element:
◦ Block Element always starts with new line and covers the entire available width.
◦ Examples are: <div> element, <p> element, <h1> element.
• Inline Element:
◦ Inline element does not start with new line.
◦ It takes only that much amount of width whatever it needs.
◦ Example are: <span> element, <button> element.

Assignments:
1. Study various HTML tags from w3schools website.
2. Perform a post class assginment at newton school student portal.

You might also like