IDE Setup
1. 1. IDE
OR
Code Editor
FF5F1F
1.1 What is IDE
1. IDE stands for Integrated
Development Environment.
2. Software suite that
consolidates basic tools
required for software
development.
3. Central hub for coding, finding
problems, and testing.
4. Designed to improve
developer efficiency.
FF5F1F
1.2 Need of IDE
1. Streamlines development.
2. Increases productivity.
3. Simplifies complex tasks.
4. Offers a unified workspace.
5. IDE Features
1. Code Autocomplete
2. Syntax Highlighting
3. Version Control
4. Error Checking
FF5F1F
1.3 IDE Selection
1. Sublime Text
2. Atom
3. VS Code
4. Github CodeSpaces
FF5F1F
1.4 Installation & Setup
1. Search VS Code
2. Keep Your Software up to date
FF5F1F
1.5 VsCode Extensions
1. Live Server / Live Preview
2. Prettier (Format on Save)
3. Line Wrap
4. Tab Size from 4 to 2
1.6 Client Side vs Server Side
Client Side Server Side
Execution Location Executes on user's Executes on a remote
device. machine.
Languages Primarily JavaScript, PHP, Python, Java,
HTML, CSS. Node.js, etc.
Main Job Makes clicks and scrolls Manages saved
work information
Access Level Can't access server Can read/write files,
data directly interact with databases.
Speed Quicker for UI changes Slower due to network
latency.
Revision
FF5F1F
Setup
1. IDE or Code Editor
1. What is IDE
2. Need of IDE
3. IDE Selection
4. Installation and Setup
5. VsCode Extensions
6. Client Side vs Server Side
FF5F1F
Level 1
HTML Basics
1. 1. Starting
Up
FF5F1F
1.1 First file using Text Editor
1. Create a folder with name First
Project on your Desktop.
2. Open Notepad.
3. Create a file and save it as
index.html
4. Copy Sample code
5. Open Browser and Check.
FF5F1F
1.2 File Extension
HTML
1. Most commonly used.
2. Works across all browsers.
3. Widely recognized and supported.
4. Typically saved as .html.
HTM
1. Less commonly used.
2. Originated for compatibility with older systems.
3. Works same as .html.
4. Typically saved as .htm.
1.3 Opening project in VsCode
1.4 Importance of index.html
1. Default name of a website’s
homepage.
2. First page users see when
visiting a website
3. Important for SEO (Search
Engine Optimization)
4. Provides uniform starting point
across servers
5. Serves as fallback when no file is
specified in URL
FF5F1F
Level 1
HTML Basics
1. 2. Basics of
HTML
2.1 What are Tags
1. Elements that are used to
create a website are called
HTML Tags.
2. Tags can contain content or
other HTML tags.
3. Define elements like text,
images, links
2.2 Using Emmet ! to generate code
1. Type ! and wait for suggestions.
2.3 Basic HTML Page
<!DOCTYPE html> Defines the HTML Version
<html lang="en"> Parent of all HTML tags / Root element
<head> Parent of meta data tags
<title>My First Webpage</title> Title of the web page
</head>
<body> Parent of content tags
<h1>Hello World!</h1> Heading tag
</body>
</html>
2.4 Heading Tag
1. Defines headings in a document
2. Ranges from <h1> to <h6>
3. <h1> is most important, <h6> is least
4. Important for SEO
5. Helps in structuring content
2.5 Paragraph Tag
1. Used for defining paragraphs
2. Enclosed within <p> and </p> tags
3. Adds automatic spacing before and after
4. Text wraps to next line inside tag
5. Common in text-heavy content
2.6 MDN Documentation
1. Visit https://developer.mozilla.org/
2. Official resource for HTML
3. Offers comprehensive guides and
tutorials
4. Includes examples for real-world
use
5. Updated with latest HTML features
6. Trusted by developers worldwide
2.7 Comments
1. Used to add notes in HTML
code
2. Not displayed on the web page
3. Syntax: <!-- Comment here -->
4. Helpful for code organization
5. Can be multi-line or single-line
2.8 Case Sensitivity
1. HTML is case-insensitive for tag
names
2. Attribute names are also be
case-insensitive
3. Best practice: use lowercase for
consistency
Practice Exercise
FF5F1F
HTML Basics
1. Create a new project with
Index.html
2. Generate boilerplate code using
Emmet
3. Write “I am learning with
Prashant sir”
4. Use comments
5. Also use Case insensitive tags
Practice Exercise
FF5F1F
HTML Basics
Assignment: Adding Comments and Case Sensitivity
Ø Objective: Use comments and demonstrate case sensitivity in HTML.
Ø Instructions:
• Open your index.html file in VS Code.
• Add a comment at the top of the file: <!-- This is my first HTML
project -->.
• Use various tags in different cases (e.g., <H1>, <p>, <DIV>,
<Span>).
• Ensure that the HTML is still valid and displays correctly in the
browser.
• Add another comment explaining why HTML is case-insensitive but
best practice is to use lowercase.
Practice Exercise
FF5F1F
HTML Basics
Assignment:
Ø Objective: Utilize MDN documentation for HTML.
Ø Instructions:
• Visit MDN Web Docs.
• Find the documentation for the <h1> tag.
• Write a short summary of what you learned about the <h1> tag
from the documentation.
• Include an example usage of the <h1> tag in your index.html file.
