Welcome to the Flask Workshop! This guide will introduce you to Flask, a powerful web framework for Python, and guide you through building web applications from scratch.
+Web development is the process of building and maintaining websites and web applications that run online. Web development began with the creation of the World Wide Web in 1989 by Sir Tim Berners-Lee, a British scientist working at CERN (European Organization for Nuclear Research).
+He proposed a system for sharing information across a network using hypertext, which led to the development of HTML (Hypertext Markup Language) and HTTP (Hypertext Transfer Protocol)).
+Now for understanding basics of web development, there's some key concepts to understand, and some of them are listed below:
+Back-end Development: Backend is where the data gets processed, and functionality is done and is sent back to the user. There's much to back-end development, but some of the basic concepts are listed below:
+Server-Side Languages: Server-side languages are programming languages used to build the backend of a web application, which includes handling data, business logic, and server-side operations. The backend is crucial for creating dynamic, data-driven applications and supports the frontend by processing requests, interacting with databases, and managing content delivery. Flask is what we'll be covering today, and this is a server-side framework by Python.
+A hearty welcome to all who made it to the introductory workshop for python and flask!
+First, we will be covering the basic concepts of Python, then we will be moving on to flask. Now, what is python? is it a snake? No, its a programming language. Weird name ryt? This was named by "Guido van Rossum", and it was because he saw a real life python. No no im kidding, it was because of the series "Monty Python's Flying Circus", he wanted to keep something short and simple.
+Python is a very versatile language and is used in a lot of different CS fields such as
+Why Python?
+Now, coming to the main coding and fun part, its divided into sections as below.
+Before the workshop, ensure you have:
+- Python (version 3.x) installed
+- A code editor, like Visual Studio Code
+- pip, the Python package manager (usually included with Python)
+For a step-by-step setup guide, Click here.
++If you want to acess some of the useful VS Code shortcuts, that you could use in this workshop, Click here
+
+(But try to use them minimally, as there are no shortcuts in life :) )
print("output:hello world")
+output: hello world
+Using the print function, any line of statement, character can be displayed. "Print" is for showing the output.
+Variables are names to which we assign values.
+For example, x=5. x is the variable name here.
+Code example:
+x=5
+print("output:",x)
+output: 5
+Variables can be reassigned, and the latest value gets printed.
+x=5
+x="Introduction to python and flask"
+print("latest output:",x)
+latest output: Introduction to python and flask
+Variables are case sensitive.
+x=5
+X=6
+print("output:",X)
+output:6
+Some rules for the variable names:
+Assigning multiple values for example:
+x,y,z=10,15,20
+print(x,y,z)
+10 15 20
+| Text Type: | +str |
+
|---|---|
| Numeric Types: | +int, float, complex |
+
| Sequence Types: | +list, tuple, |
+
| Mapping Type: | +dict |
+
| Boolean Type: | +bool |
+
We can get the data type of a variable using the type function and the code function is shown below.
+x=5
+print(type(x))
+<class 'int'>
+Type casting- Changing the type of a variable to another type considering it follows some rules.\ +Code examples:
+x=str(5)
+print("output:",x)
+print("type:",type(x))
+output: 5
+type: <class 'str'>
+x=int("sai")
+print(x)
+print(type(x))
+The above code gives an error, because "sai" cannot be converted to an integer.
+In conditional keywords, a statement is given, and "if" it is true, then it will print, or else it will go to the next "else".
+For example:
+x=5
+if(x==5):
+ print("Yes it is 5")
+elif(x==4):
+ print("No, it is 4")
+else:
+ print("No, it is not 5")
+Yes it is 5
+Loops repeat a block of code multiple times, until the condition is false.
+i=0
+while(i<3):
+ print(i)
+ i=i+1
+0
+1
+2
+for i in range(3):
+ print(i)
+0
+1
+2
+This is the main part which is used for flask. Now, Functions are blocks of code that can be repeated to do a specific task. There's a return statement to return the value that is done in the function. For example:
+def x():
+ return 1
+y=x()
+print(y)
+1
+def sum(x):
+ return x+x
+y=sum(3)
+print(y)
+6
+def greet(name):
+ """Function to greet a person with their name."""
+ print("Hello, " + name + "!")
+
+# Calling the function
+greet("Alice") # Output: Hello, Alice!
+greet("Bob") # Output: Hello, Bob!
+Hello, Alice!
+Hello, Bob!
+Strings are used with '' or "".
+x="sai"
+y='sai'
+print(x)
+print(y)
+sai
+sai
+String functions:
+text = " Hello, Python! "
+text_with_digits = "12345"
+number = 123
+
+# 1. Basic String Operations
+print("1. Basic String Operations")
+length = len(text)
+print("Length of 'text':", length) # Output: 19
+
+str_number = str(number)
+print("Converted Number to String:", str_number) # Output: "123"
+print("-" * 30)
+
+# 2. String Case Manipulation
+print("2. String Case Manipulation")
+print("Lowercase:", text.lower()) # Output: " hello, python! "
+print("Uppercase:", text.upper()) # Output: " HELLO, PYTHON! "
+print("Capitalized:", text.capitalize()) # Output: " hello, python! "
+print("Title Case:", text.title()) # Output: " Hello, Python! "
+print("Swap Case:", text.swapcase()) # Output: " hELLO, pYTHON! "
+print("-" * 30)
+
+# 3. String Searching
+print("3. String Searching")
+index = text.find("Python")
+print("Index of 'Python':", index) # Output: 10
+
+not_found = text.find("Java")
+print("Index of 'Java':", not_found) # Output: -1
+
+last_index = text.rfind("o")
+print("Last index of 'o':", last_index) # Output: 14
+print("-" * 30)
+
+# 4. String Replacement
+print("4. String Replacement")
+new_text = text.replace("Python", "World")
+print("Replaced Text:", new_text) # Output: " Hello, World! "
+print("-" * 30)
+
+# 5. String Splitting and Joining
+print("5. String Splitting and Joining")
+fruits_text = "apple, banana, cherry"
+fruits = fruits_text.split(", ")
+print("Split List:", fruits) # Output: ['apple', 'banana', 'cherry']
+
+joined_text = ", ".join(fruits)
+print("Joined Text:", joined_text) # Output: "apple, banana, cherry"
+print("-" * 30)
+1. Basic String Operations
+Length of 'text': 20
+Converted Number to String: 123
+------------------------------
+2. String Case Manipulation
+Lowercase: hello, python!
+Uppercase: HELLO, PYTHON!
+Capitalized: hello, python!
+Title Case: Hello, Python!
+Swap Case: hELLO, pYTHON!
+------------------------------
+3. String Searching
+Index of 'Python': 10
+Index of 'Java': -1
+Last index of 'o': 14
+------------------------------
+4. String Replacement
+Replaced Text: Hello, World!
+------------------------------
+5. String Splitting and Joining
+Split List: ['apple', 'banana', 'cherry']
+Joined Text: apple, banana, cherry
+------------------------------
+Lists store collections of items in a specific order. Each item has an index starting from 0.
+tasks=['task1','task2'] #this is a list
+for i in tasks:
+ print(i)
+task1
+task2
+append: adds values into the list
+remove: removes values from the list
+# Creating a list
+shopping_list = ["apples", "bananas", "carrots"]
+
+# Accessing items
+print(shopping_list[0]) # Output: apples
+
+# Adding an item
+shopping_list.append("dates")
+
+# Changing an item
+shopping_list[1] = "blueberries" # Change 'bananas' to 'blueberries'
+
+# Removing an item
+shopping_list.remove("carrots")
+
+# Printing the updated shopping list
+print(shopping_list)
+apples
+['apples', 'blueberries', 'dates']
+A dictionary in Python is a collection of key-value pairs.
+Some basic functions have been explained in the code below.
+# Creating a dictionary
+phone_book = {
+ "Alice": "123-456-7890",
+ "Bob": "987-654-3210",
+ "Charlie": "555-555-5555"
+}
+
+# Accessing values
+print(phone_book["Alice"]) # Output: 123-456-7890
+
+# Adding a new entry
+phone_book["David"] = "111-222-3333"
+
+# Updating an existing entry
+phone_book["Bob"] = "999-999-9999"
+
+# Removing an entry
+del phone_book["Charlie"]
+
+# Printing the updated phone book
+print(phone_book)
+123-456-7890
+{'Alice': '123-456-7890', 'Bob': '999-999-9999', 'David': '111-222-3333'}
+Flask is a lightweight framework for web development in Python, designed to make creating web applications easy and flexible. It’s known for its simplicity and extensive customization options, making it ideal for beginners and experts alike.
+Create a folder for the workshop project.
+Open the folder using VS Code, and install virtual environment by typing the following code in the VS Code terminal:-
+pip3 install virtualenv
Type the following code to create the environment in you folder:-
+python -m venv venv
Activate the environment:-
+.\venv\Scripts\activate ++Note: You may get an error called PowerShell Execution Policy Restriction or a PSSecurityException.
+
+ It occurs because PowerShell’s execution policy restricts script execution to prevent potentially harmful scripts from running on the system.
+ For that you can run the codeSet-ExecutionPolicy -Scope Process -ExecutionPolicy Bypassand then try activating it again.
+ This temporarily changes PowerShell’s execution policy for the current session only, allowing scripts to run without restrictions.
source venv/bin/activateInstalling Flask:-
+ Run pip3 install flask on the VS Code terminal.
Creating Your First Flask App
+Create a file named app.py in your project folder.
Add the following code:
+from flask import Flask
+
+app = Flask(__name__)
+
+@app.route('/')
+def home():
+ return "Welcome to the Flask Workshop!"
+
+if __name__ == '__main__':
+ app.run(debug=True)
+app = Flask(__name__) initializes the app, using the module's name to configure Flask.@app.route('/') sets the route for the root URL, directing requests to the index() function.
+- app.run(debug=True) starts the app in debug mode, which automatically reloads the server on code changes and provides detailed error messages.
+Run the code:-
+ Run python3 app.py on the terminal after saving your app.py file.
Opening the Webpage:-
+ Go to your browser and type in localhost:5000
View the Output
+Create a folder templates in your project.
Add index.html in templates
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+</head>
+<body>
+ Welcome to Flask Workshop!
+</body>
+</html>
+Modify app.py:
from flask import Flask, render_template
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+ return render_template('index.html')
+
+if __name__ == '__main__':
+ app.run(debug=True)
+Template inheritance in Flask allows you to define a base template with common elements (like headers, footers) and extend it in other templates, promoting code reuse and consistent design.
+Add base.html in templates:
+
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ {% block head %}{% endblock %} <!--Jinja code template-->
+</head>
+<body>
+ {% block body %}{% endblock %}
+</body>
+</html>
+Modify index.html in templates:
{% extends 'base.html' %}
+
+{% block head %} <h1>ACM FLASK WORKSHOP</h1> {% endblock %}
+
+{% block body %} <h2>Template</h2> {% endblock %}
+Try searching localhost:5000 on your browser and view the output.
We are going to make a Task Manager Web Application where the users are allowed to:
+1. Add tasks with descriptions.
+2. Display tasks in a table format, showing the task description and date added.
+3. Update or delete tasks using action links.
index.html (Yes!!, just copy paste)
+ {% extends 'base.html' %}
+
+{% block head %} <h1>ACM TASK MANAGER</h1> {% endblock %}
+
+{% block body %}
+<div class="content">
+
+ <table>
+ <tr>
+ <th>Task</th>
+ <th>Added</th>
+ <th>Actions</th>
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td>
+ <a href="">Delete</a>
+ <br>
+ <a href="">Update</a>
+ </td>
+ </tr>
+ </table>
+</div>
+{% endblock %}
+Try searching localhost:5000 on your browser and view the output.
In Flask:
+GET: Retrieves data from the server. It’s used for reading or displaying data. Data is sent via the URL, visible to the user. Commonly used for loading pages.
+POST: Sends data to the server to create or update resources. It’s hidden from the URL, typically used for form submissions where data (e.g., login credentials) is sent securely
+In app.py we make the following changes:-
request, redirect and datetime librariesPOST method, for "Add Task" featurefrom flask import Flask, render_template, request, redirect
+from datetime import datetime
+
+app = Flask(__name__)
+
+# In-memory list to store tasks
+tasks = []
+
+@app.route('/', methods=['POST', 'GET'])
+def index():
+ if request.method == 'POST':
+ task_content = request.form['content']
+ new_task = {
+ 'id': len(tasks) + 1,
+ 'content': task_content,
+ 'date_created': datetime.utcnow()
+ }
+ tasks.append(new_task)
+ return redirect('/')
+ else:
+ return render_template('index.html', tasks=tasks)
+
+if __name__ == '__main__':
+ app.run(debug=True)
+Update index.html in order to perform the following tasks:-
{% extends 'base.html' %}
+
+{% block head %} <h1>ACM TASK MANAGER </h1> {% endblock %}
+
+{% block body %}
+<div class="content">
+
+ <table>
+ <tr>
+ <th>Task</th>
+ <th>Added</th>
+ <th>Actions</th>
+ </tr>
+ {% for task in tasks %}
+ <tr>
+ <td>{{ task.content }}</td>
+ <td>{{ task.date_created.date() }}</td>
+ <td>
+ <a href="">Delete</a>
+ <br>
+ <a href="">Update</a>
+ </td>
+ </tr>
+ {% endfor %}
+ </table>
+
+ <form action="/" method="POST">
+ <input type="text" name="content" id="content">
+ <input type="submit" value="Add Task">
+ </form>
+</div>
+{% endblock %}
+Try searching localhost:5000 on your browser and view the output.
Now, we will work on the "Delete" and "Update" feature in our ACM Task Manager.
+We have just created links for them, but they are not going to work unless we update app.py.
For that we can add "delete" and "update" function in app.py and accordingly update the code:
from flask import Flask, render_template, request, redirect
+from datetime import datetime
+
+app = Flask(__name__)
+
+# In-memory list to store tasks
+tasks = []
+
+@app.route('/', methods=['POST', 'GET'])
+def index():
+ if request.method == 'POST':
+ task_content = request.form['content']
+ new_task = {
+ 'id': len(tasks) + 1,
+ 'content': task_content,
+ 'date_created': datetime.utcnow()
+ }
+ tasks.append(new_task)
+ return redirect('/')
+ else:
+ return render_template('index.html', tasks=tasks)
+
+@app.route('/delete/<int:id>')
+def delete(id):
+ global tasks
+ tasks = [task for task in tasks if task['id'] != id]
+ return redirect('/')
+
+@app.route('/update/<int:id>', methods=['GET', 'POST'])
+def update(id):
+ task = next((task for task in tasks if task['id'] == id), None)
+ if not task:
+ return 'Task not found', 404
+
+ if request.method == 'POST':
+ task['content'] = request.form['content']
+ return redirect('/')
+ else:
+ return render_template('update.html', task=task)
+
+if __name__ == '__main__':
+ app.run(debug=True)
+Update index.html:
+
{% extends 'base.html' %}
+
+{% block head %} <h1>ACM TASK MANAGER </h1> {% endblock %}
+
+{% block body %}
+<div class="content">
+
+ <table>
+ <tr>
+ <th>Task</th>
+ <th>Added</th>
+ <th>Actions</th>
+ </tr>
+ {% for task in tasks %}
+ <tr>
+ <td>{{ task.content }}</td>
+ <td>{{ task.date_created.date() }}</td>
+ <td>
+ <a href="/delete/{{task.id}}">Delete</a>
+ <br>
+ <a href="/update/{{task.id}}">Update</a>
+ </td>
+ </tr>
+ {% endfor %}
+ </table>
+
+ <form action="/" method="POST">
+ <input type="text" name="content" id="content">
+ <input type="submit" value="Add Task">
+ </form>
+</div>
+{% endblock %}
+Now, we will also have to add the file update.html inside templates because, on clicking 'update' we will be redirected to another webpage, where we will update the task and submit it.
{% extends 'base.html' %}
+
+{% block head %} <h1>ACM TASK MANAGER</h1> {% endblock %}
+{% block body %}
+<div class="content">
+ <h2>Update Task</h2>
+ <form action="/update/{{task.id}}" method="POST">
+ <input type="text" name="content" id="content" value="{{task.content}}">
+ <input type="submit" value="Update">
+ </form>
+</div>
+{% endblock %}
+Congratulations on completing the Flask Workshop! You've built a fully functional task management application with Flask, utilizing various features like routing and templates.
+Next Steps +To further your Flask knowledge, consider exploring: +- Flask extensions like Flask-Login for user authentication or Flask-WTF for form handling. +- Deployment of your Flask app to platforms like Heroku or DigitalOcean (which is going to be taught in this ACM-Dev Workshop Series in the further sessions).
+Additional Resources +- For more information, check out the Flask Documentation and explore additional projects to enhance your skills.
+Happy Coding! 🚀
+ + + + + + + + + + + + + +from flask import Flask, render_template, request, redirect
+from datetime import datetime
+app = Flask(__name__)
+# In-memory list to store tasks
+tasks = []
+@app.route('/', methods=['POST', 'GET'])
+def index():
+ if request.method == 'POST':
+ task_content = request.form['content']
+ new_task = {
+ 'id': len(tasks) + 1,
+ 'content': task_content,
+ 'date_created': datetime.utcnow()
+ }
+ tasks.append(new_task)
+ return redirect('/')
+ else:
+ return render_template('index.html', tasks=tasks)
+@app.route('/delete/<int:id>')
+def delete(id):
+ global tasks
+ tasks = [task for task in tasks if task['id'] != id]
+ return redirect('/')
+@app.route('/update/<int:id>', methods=['GET', 'POST'])
+def update(id):
+ task = next((task for task in tasks if task['id'] == id), None)
+ if not task:
+ return 'Task not found', 404
+
+ if request.method == 'POST':
+ task['content'] = request.form['content']
+ return redirect('/')
+ else:
+ return render_template('update.html', task=task)
+if __name__ == '__main__':
+ app.run(debug=True)
+| Task | +Added | +Actions | +
|---|---|---|
| {{ task.content }} | +{{ task.date_created.date() }} | +
+ Delete
+ + Update + |
+
CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the appearance of HTML elements, allowing you to customize colors, fonts, layouts, and more.
+selector {
+ property: value;
+}
+p {
+ color: blue;
+ font-size: 18px;
+}
+The CSS Box Model determines how elements are structured on a page. Every HTML element is a rectangular box, defined by the following layers:
+<div class="box">Hello, Box Model!</div>
+.box {
+ width: 200px;
+ padding: 20px;
+ border: 5px solid #3498db;
+ margin: 15px;
+ box-sizing: border-box;
+}
+Selectors are used to target HTML elements for styling.
+h1 {
+ color: green;
+}
+.highlight {
+ background-color: yellow;
+}
+#header {
+ text-align: center;
+}
+color: Changes the text color.font-size: Sets the size of the font.text-align: Aligns text.background-color: Sets the background color.background-image: Adds a background image.margin: Space outside of an element.padding: Space inside of an element.border: Creates a border around an element.The Flexbox layout simplifies aligning elements in a container.
+<div class="flex-container">
+ <div class="item">1</div>
+ <div class="item">2</div>
+ <div class="item">3</div>
+</div>
+.flex-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+}
+flex-start, center, space-between).stretch, center).row, column).The CSS Grid is a powerful system for creating two-dimensional layouts.
+<div class="grid-container">
+ <div class="grid-item">1</div>
+ <div class="grid-item">2</div>
+ <div class="grid-item">3</div>
+</div>
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+}
+Bootstrap is a popular CSS framework that helps you create responsive, mobile-first designs.
+Add Bootstrap to your HTML: +
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+Bootstrap uses a 12-column grid system with breakpoints for different screen sizes.
+<div class="container">
+ <div class="row">
+ <div class="col-sm-4">Column 1</div>
+ <div class="col-sm-4">Column 2</div>
+ <div class="col-sm-4">Column 3</div>
+ </div>
+</div>
+<div class="row">
+ <div class="col-12 col-md-6">50% on medium screens</div>
+ <div class="col-12 col-md-6">50% on medium screens</div>
+</div>
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-secondary">Secondary</button>
+<div class="card" style="width: 18rem;">
+ <img src="image.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">Card Title</h5>
+ <p class="card-text">Some text here.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+</div>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+ <a class="navbar-brand" href="#">Brand</a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarNav">
+ <ul class="navbar-nav">
+ <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
+ <li class="nav-item"><a class="nav-link" href="#">About</a></li>
+ </ul>
+ </div>
+</nav>
+Congratulations! You've learned the basics of CSS, Flexbox, Grid, and Bootstrap. Keep experimenting with these tools to create responsive, modern web designs. Happy coding! 🚀
+ + + + + + + + + + + + + +HTML (HyperText Markup Language) is the standard markup language used to create web pages. It defines the structure of a web page using a series of elements and tags. HTML forms the foundation of most web content, allowing text, images, links, and multimedia to be structured and displayed in web browsers.
+Here’s a simple example of an HTML document:
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>My First HTML Page</title>
+</head>
+<body>
+ <h1>Welcome to HTML</h1>
+ <p>This is a simple HTML document.</p>
+</body>
+</html>
+<!DOCTYPE html>: Specifies the HTML version (HTML5).<html>: The root element of an HTML page.<head>: Contains meta-information like title, character set, and more.<title>: The title displayed on the browser tab.<body>: The main content of the webpage.An HTML element usually consists of:
+1. Opening tag: <tag>
+2. Content: The information inside the tag.
+3. Closing tag: </tag>
Example: +
<p>Hello, World!</p>
+Some HTML elements do not have closing tags: +
<img src="logo.png" alt="Logo">
+<br>
+HTML tags are used to define elements on a web page. They are usually enclosed within angle brackets (< and >). Tags are not case-sensitive, but it's a best practice to write them in lowercase.
Headings are defined with <h1> to <h6> tags, with <h1> being the highest level and <h6> the lowest.
<h1>Main Heading</h1>
+<h2>Sub-heading</h2>
+<h3>Section Heading</h3>
+Paragraphs are defined using the <p> tag.
<p>This is a paragraph.</p>
+To create a hyperlink, use the <a> tag:
<a href="https://example.com" target="_blank">Visit Example</a>
+To include images, use the <img> tag:
<img src="image.jpg" alt="Description of the image" width="400">
+<ul>
+ <li>Apple</li>
+ <li>Banana</li>
+ <li>Cherry</li>
+</ul>
+<ol>
+ <li>First item</li>
+ <li>Second item</li>
+ <li>Third item</li>
+</ol>
+Attributes provide additional information about HTML elements. They are placed inside the opening tag.
+Example: +
<a href="https://example.com" target="_blank" title="Example Site">Click Here</a>
+href: URL for linkssrc: Source file for images and videosalt: Alternative text for imagesid: Unique identifier for an elementclass: Class name for styling multiple elementsstyle: Inline CSS for stylingForms collect user input and send it to a server for processing.
+<form action="/submit" method="POST">
+ <label for="name">Name:</label>
+ <input type="text" id="name" name="name" required>
+
+ <label for="email">Email:</label>
+ <input type="email" id="email" name="email">
+
+ <input type="submit" value="Submit">
+</form>
+<form>: The form container.action: URL where form data is sent.method: HTTP method (GET, POST).<input>: Collects user data.<label>: Label for form fields.Comments in HTML are added using <!-- -->. They are not visible to users but help developers understand the code.
<!-- This is a comment -->
+Semantic HTML uses meaningful tags to improve accessibility and SEO. Examples include:
+<header>Website Header</header>
+<nav>Navigation Links</nav>
+<main>Main Content Area</main>
+<footer>Website Footer</footer>
+<!-- Non-semantic -->
+<div id="header">Header</div>
+
+<!-- Semantic -->
+<header>Header</header>
+HTML is the backbone of web development, forming the structure of web pages. By mastering HTML, you can start building your own websites and web applications. Combine HTML with CSS and JavaScript to create dynamic, responsive, and interactive content.
+Happy coding! 🚀
+ + + + + + + + + + + + + +JavaScript is a programming language primarily used to add interactivity and dynamic behavior to websites. Alongside HTML and CSS, JavaScript is one of the essential technologies in web development. It can be used for various tasks, including handling events, manipulating HTML and CSS, performing calculations, and even building entire applications.
+JavaScript can be written inside HTML files or in separate .js files.
You can write JavaScript directly in an HTML document within <script> tags:
<!DOCTYPE html>
+<html>
+ <head>
+ <title>JavaScript Example</title>
+ </head>
+ <body>
+ <h1>Welcome to JavaScript</h1>
+ <script>
+ alert("Hello, World!");
+ </script>
+ </body>
+</html>
+To keep your code organized, you can create a separate JavaScript file and link it to an HTML document:
+script.js and add JavaScript code inside.<script src="script.js"></script>.<!DOCTYPE html>
+<html>
+ <head>
+ <title>JavaScript Example</title>
+ </head>
+ <body>
+ <h1>Welcome to JavaScript</h1>
+ <script src="script.js"></script>
+ </body>
+</html>
+In JavaScript, variables are used to store information. You can create variables using let, const, or var.
let and const are commonly used.let is used for variables that can change.const is used for variables that will not change.let name = "Alice"; // String
+const age = 25; // Number
+JavaScript has several basic data types:
+let greeting = "Hello, World!";
+let score = 99.5;
+true or false values.
+ let isStudent = true;
+let person = { name: "Alice", age: 25 };
+let colors = ["red", "green", "blue"];
+$).$, or _.myVariable and MyVariable are different.Operators perform operations on variables and values.
+Used to perform mathematical calculations:
+let x = 10;
+let y = 5;
+console.log(x + y); // Output: 15
+console.log(x - y); // Output: 5
+console.log(x * y); // Output: 50
+console.log(x / y); // Output: 2
+Assign values to variables:
+let z = 10;
+z += 5; // z = z + 5; Now z is 15
+Compare values and return a boolean (true or false):
console.log(10 > 5); // true
+console.log(10 === "10"); // false (strict equality)
+Combine conditions:
+&& (AND): Both conditions must be true.|| (OR): At least one condition must be true.! (NOT): Reverses the condition.let a = true;
+let b = false;
+console.log(a && b); // false
+console.log(a || b); // true
+console.log(!a); // false
+Control structures determine the flow of code.
+let age = 18;
+if (age >= 18) {
+ console.log("You are an adult.");
+} else {
+ console.log("You are a minor.");
+}
+for (let i = 0; i < 5; i++) {
+ console.log(i);
+}
+let i = 0;
+while (i < 5) {
+ console.log(i);
+ i++;
+}
+Functions let you reuse code blocks.
+function greet(name) {
+ return "Hello, " + name + "!";
+}
+console.log(greet("Alice"));
+A shorter way to define functions:
+const greet = (name) => "Hello, " + name + "!";
+console.log(greet("Alice"));
+JavaScript has versatile data structures like Objects and Arrays.
+let car = {
+ make: "Toyota",
+ model: "Camry",
+ year: 2020,
+};
+console.log(car.make); // Output: Toyota
+let fruits = ["apple", "banana", "cherry"];
+console.log(fruits[1]); // Output: banana
+JavaScript can interact with HTML elements.
+<p id="text">Hello</p>
+<button onclick="changeText()">Click Me</button>
+
+<script>
+ function changeText() {
+ document.getElementById("text").innerHTML = "Hello, World!";
+ }
+</script>
+JavaScript can respond to user actions like clicks.
+<button onclick="alert('Button clicked!')">Click Me</button>
+Errors are common, and JavaScript provides ways to handle them.
+try {
+ console.log(x); // x is not defined
+} catch (error) {
+ console.error("An error occurred:", error);
+}
+One of the easiest ways to test JavaScript code is by using the browser's console. All modern browsers have a console built-in that lets you execute JavaScript in real-time.
+In Google Chrome:
+Right-click on the page and select Inspect or press Ctrl+Shift+J (Windows) or Cmd+Option+J (Mac) to open the Developer Tools.
Go to the Console tab.
+In Firefox:
+Right-click on the page and select Inspect Element or press Ctrl+Shift+K (Windows) or Cmd+Option+K (Mac) to open the Developer Tools.
Navigate to the Console tab.
+In Microsoft Edge:
+Right-click on the page and select Inspect or press F12 to open the Developer Tools.
Click on the Console tab.
+In Safari:
+Cmd+Option+C to open Developer Tools and go to the Console tab.Once the console is open, you can type JavaScript code directly and press Enter to execute it. For example:
console.log("Hello from the Console!");
+The output will appear immediately in the console. This is a great way to quickly test code snippets and see the results without needing to refresh a page.
+You can use the console for quick calculations or to test functions:
+let x = 10;
+let y = 20;
+console.log(x + y); // Output: 30
+The console is an invaluable tool for debugging and testing JavaScript code in a live environment.
+JavaScript is powerful for web development. This guide covers the essentials, so keep practicing, explore advanced topics, and refer to documentation as you grow your skills!
+ + + + + + + + + + + + + +
Frontend development is creating the part of a website or app that users interact with. This includes everything you see and interact with on a website, like buttons, images, and text.
+Frontend development has three main building blocks:
+
<header>, <footer>, <section> for better readability and SEO.
+- React: Helps build user interfaces more easily.
+- Vue.js: A simple framework for building interactive web applications.
+- Angular: A powerful framework for building complex apps.
Making sure a website is usable for everyone, including people with disabilities, is essential:
+
¶This guide provides the basics of frontend development and a roadmap to start learning and building projects.
+ + + + + + + + + + + + + +