Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
23 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
Available Formats
Download as PDF, TXT or read online on Scribd
23 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
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