diff --git a/FORMS & MEDIA/OUTPUT.md b/FORMS & MEDIA/OUTPUT.md new file mode 100644 index 0000000..a3bc848 --- /dev/null +++ b/FORMS & MEDIA/OUTPUT.md @@ -0,0 +1,44 @@ +## ➡️ Questions with Answer📝 +#### ➡️ Output Images Attached with each questions. + +
+ +1. Create an image gallery that holds multiple images. + +![Screenshot 2024-12-22 225237](https://github.com/user-attachments/assets/8c2ef5a3-5f3a-4384-b295-0a7678e0892e) + + +
+ +2. Use video and audio tags to display video and audio with the playback, audio controls. + +![Screenshot 2024-12-22 230253](https://github.com/user-attachments/assets/4b91dc57-b55b-4ff8-aea7-15068d67f8e8) + + +
+ +3. Modify the previous assignment so that the audio and video play automatically as the page is loaded and +they should play infinitely. + +![Screenshot 2024-12-22 230621](https://github.com/user-attachments/assets/536b115b-d331-44e7-a54b-8739c355419b) + + +
+ +4. Use iframe to embed the PhysicsWallah Wikipedia page properly. + +![Screenshot 2024-12-22 231424](https://github.com/user-attachments/assets/5100184a-a6a7-44b4-b3ea-f5370d753ca9) + + +
+ +5. Create a sign-up and sign-in form with proper validation. +a) Sign-up form should have a first name, last name, email, password, confirm password, age, gender, +and agree to terms and conditions fields at minimum (You can add any other if you like) +b) Sign-in form should have email and password fields. + +![Screenshot 2024-12-22 232029](https://github.com/user-attachments/assets/fdb6aff2-55ad-44fc-b0f6-9e86a0041aa1) + + +
+ diff --git a/FORMS & MEDIA/Q1.html b/FORMS & MEDIA/Q1.html new file mode 100644 index 0000000..44df79e --- /dev/null +++ b/FORMS & MEDIA/Q1.html @@ -0,0 +1,18 @@ + + + + + + Home + + + + dummy image + dummy image + dummy image + dummy image + dummy image + dummy image + dummy image + + diff --git a/FORMS & MEDIA/Q2.html b/FORMS & MEDIA/Q2.html new file mode 100644 index 0000000..118e81e --- /dev/null +++ b/FORMS & MEDIA/Q2.html @@ -0,0 +1,14 @@ + + + + + + Home + + + + + + + + diff --git a/FORMS & MEDIA/Q3.html b/FORMS & MEDIA/Q3.html new file mode 100644 index 0000000..fbb60f5 --- /dev/null +++ b/FORMS & MEDIA/Q3.html @@ -0,0 +1,13 @@ + + + + + + Home + + + + + + + diff --git a/FORMS & MEDIA/Q4.html b/FORMS & MEDIA/Q4.html new file mode 100644 index 0000000..245ff90 --- /dev/null +++ b/FORMS & MEDIA/Q4.html @@ -0,0 +1,15 @@ + + + + + + Home + + + + + + + diff --git a/FORMS & MEDIA/Q5.html b/FORMS & MEDIA/Q5.html new file mode 100644 index 0000000..9fcff41 --- /dev/null +++ b/FORMS & MEDIA/Q5.html @@ -0,0 +1,55 @@ + + + + + + Home + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + diff --git a/LICENSE b/LICENSE deleted file mode 100644 index b76958f..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2024 Srideep Sarkar - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/MODERN HTML/OUTPUT.md b/MODERN HTML/OUTPUT.md new file mode 100644 index 0000000..cf7d7d2 --- /dev/null +++ b/MODERN HTML/OUTPUT.md @@ -0,0 +1,21 @@ +## ➡️ Questions with Answer📝 +#### ➡️ Output Images Attached with each questions. + +
+ +Q5. Create a web page that highlights the features of HTML5. Use appropriate semantic tags to structure the +content and showcase at least three key features of HTML5 with explanations> + +![Screenshot 2024-12-24 212806](https://github.com/user-attachments/assets/ddad2ced-b707-48aa-aa29-9df8e818edc0) + + +
+ +Q6. Create a simple web page which has a table. The table must have 2 columns HTML and HTML5. The table +should include a minimum of three rows describing the differences between HTML and HTML5. + +![Screenshot 2024-12-24 213113](https://github.com/user-attachments/assets/5a0fad4e-13e5-4cd8-ae77-29fce0aedc57) + + +
+ diff --git a/MODERN HTML/Q1,Q2,Q3,Q4.pdf b/MODERN HTML/Q1,Q2,Q3,Q4.pdf new file mode 100644 index 0000000..7312283 Binary files /dev/null and b/MODERN HTML/Q1,Q2,Q3,Q4.pdf differ diff --git a/MODERN HTML/Q5.html b/MODERN HTML/Q5.html new file mode 100644 index 0000000..feda19d --- /dev/null +++ b/MODERN HTML/Q5.html @@ -0,0 +1,52 @@ + + + + + + Document + + +
+

HTML5 Feature Showcase

+
+ +

Welcome to our beginner-friendly webpage showcasing HTML5 feature.

+ +
+

Feature 1: Video Playback

+ +
+ +
+

Feature 3: Semantic Tags

+

HTML5 offers build-in form validation ,reducing the need for custom JavaScript code.

+ +
+ + +
+ +
+
+ + <> +

Feature 3: Semantic Tags

+

HTML5 introduced semantic tags like <header>, <nav>, <main>, and more , which improve page structure and accessibility.

+ +
+

Article Title

+

This is a sample article content. Semantic tags make it easier to structure your content and improve search enf=gine optimization.

+ +
+ + + + + + + diff --git a/MODERN HTML/Q6.html b/MODERN HTML/Q6.html new file mode 100644 index 0000000..d94f200 --- /dev/null +++ b/MODERN HTML/Q6.html @@ -0,0 +1,90 @@ + + + + + + + + + + + + +HTML v/s HTML5 + + + + + +

HTML v/s HTML5

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +SKILLS + + + + + + + + + +
HTMLHTML5
+ +KILL + +It required plugins like Adobe Flash to support audio and video + +content. + + + +Provides built-in support for multimedia elements such as video and audio without the need for a plugin. + +
It has fewer elements as compared to HTML5. + +It includes new elements and form attributes such as time, date, and colour. Required and autofocus in input types of the tag element as well.
Less semantic elements, thereby providing less web accessibility features. + + + +

+ +It supports more semantic elements, such as < header>, <footer>, <nav>, and <article>, thereby improving accessibility. + +

+ +
+ + + + diff --git a/README.md b/README.md index 88fe9c4..aa85ec5 100644 --- a/README.md +++ b/README.md @@ -1 +1,18 @@ -# Web-Development-course \ No newline at end of file +# Web Development 2.O + +
+ +
+
+ + + +
+ +
+ +## Overview 🌟 +- This is the Repository for Full Stack Web Development 2.0 Assignments and Projects. + +## License 🪪 +This project is licensed under the [MIT License](LICENSE). diff --git a/SEO(Search Engine Optimization)/OUTPUT.md b/SEO(Search Engine Optimization)/OUTPUT.md new file mode 100644 index 0000000..734566f --- /dev/null +++ b/SEO(Search Engine Optimization)/OUTPUT.md @@ -0,0 +1,25 @@ +## ➡️ Questions with Answer📝 +#### ➡️ Output Images Attached with each questions. + +
+ +Q1. Create an HTML document with appropriate and <meta> tags for SEO optimization. Ensure the title +is descriptive and the meta description is concise. + +![Screenshot 2024-12-25 042254](https://github.com/user-attachments/assets/2d2f8f61-c17e-48df-9f26-5d772fc3f1f7) + + +</br> + +Q2. Create an HTML document that properly incorporates semantic elements like <header>, <article>, +<section>, or <nav> to improve SEO and document structure. + +![Screenshot 2024-12-25 042359](https://github.com/user-attachments/assets/7ada43e8-0111-48e1-9d6b-a40f6d632c9a) + + +</br> + + + + + diff --git a/SEO(Search Engine Optimization)/Q1,Q3,Q5.pdf b/SEO(Search Engine Optimization)/Q1,Q3,Q5.pdf new file mode 100644 index 0000000..63fdfda Binary files /dev/null and b/SEO(Search Engine Optimization)/Q1,Q3,Q5.pdf differ diff --git a/SEO(Search Engine Optimization)/Q2.html b/SEO(Search Engine Optimization)/Q2.html new file mode 100644 index 0000000..8670fcf --- /dev/null +++ b/SEO(Search Engine Optimization)/Q2.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content="Learn how to craft SEO-optimized HTML documents with descriptive titles and concise meta descriptions to improve your website's search engine ranking."> + <meta name="keywords" content="HTML, SEO, meta tags, web development, optimization"> + <meta name="author" content="Srideep Sarkar"> + <meta name="robots" content="index, follow"> + <link rel="stylesheet" href="styles.css"> + <link rel="icon" href="favicon.ico" type="image/x-icon"> + <title>SEO-Optimized HTML: Crafting Titles and Meta Descriptions + + +
+

Welcome to SEO-Optimized HTML Tutorial

+
+
+

This document demonstrates the importance of a well-crafted title and meta description for search engine optimization (SEO). By following these practices, you can enhance your website's visibility and engagement.

+
+ + + diff --git a/SEO(Search Engine Optimization)/Q4.html b/SEO(Search Engine Optimization)/Q4.html new file mode 100644 index 0000000..b23305e --- /dev/null +++ b/SEO(Search Engine Optimization)/Q4.html @@ -0,0 +1,52 @@ + + + + + + + + + + + + SEO-Optimized HTML: Crafting Titles and Meta Descriptions + + +
+

Welcome to SEO-Optimized HTML Tutorial

+ +
+
+
+

Introduction

+

This document demonstrates the importance of using semantic HTML elements to enhance both SEO and accessibility.

+
+
+

Main Content

+
+

Why Use Semantic HTML?

+

Semantic HTML elements such as <header>, <section>, and <article> improve the structure and readability of the document for both users and search engines.

+
+
+

SEO Benefits

+

Proper document structure helps search engines understand the hierarchy and relevance of content, boosting rankings.

+
+
+
+

Conclusion

+

By incorporating semantic HTML elements, you not only enhance your site's SEO but also improve the user experience and accessibility.

+
+
+ + + + + diff --git a/STARTING WITH CSS/OUTPUT.md b/STARTING WITH CSS/OUTPUT.md new file mode 100644 index 0000000..0b3e92a --- /dev/null +++ b/STARTING WITH CSS/OUTPUT.md @@ -0,0 +1,36 @@ +## ➡️ Questions with Answer📝 +#### ➡️ Output Images Attached with each questions. + +
+ +Q1. Create a simple page with some div tags and show different ways to add CSS as well as what happens +when you target the same elements with inline, internal, and external CSS. Also, utilize comments in the +project where required= + +![Screenshot 2024-12-25 190721](https://github.com/user-attachments/assets/ad609f9b-6f14-4c9a-bb3d-1ee5b0e93a03) + + +
+ +Q2. Build an HTML page with multiple paragraphs, each assigned a unique class name. Write CSS rules using +class selectors to apply distinct styling to each paragraph. Follow the BEM naming convention and +explain how you've named the classes= + +![Screenshot 2024-12-25 190453](https://github.com/user-attachments/assets/35b000dd-a949-4fdd-ae50-728b108c3c05) + + +
+ +
+ +Q3. Develop an HTML form with various input elements. Use CSS to style the form, including setting +background colors for input fields. Create a custom color palette for the form elements, and demonstrate +how to apply opacity to one of the form sections. + +![Screenshot 2024-12-25 190221](https://github.com/user-attachments/assets/635c054d-f96c-41d8-b534-222b242631f3) + + +
+ + + diff --git a/STARTING WITH CSS/Q1.css b/STARTING WITH CSS/Q1.css new file mode 100644 index 0000000..0af9e74 --- /dev/null +++ b/STARTING WITH CSS/Q1.css @@ -0,0 +1,12 @@ +/* External CSS */ +.external-style { + color: purple; +} + +internal-style .external-style { + color: red; +} + +style.css .external-style { + color: green; +} diff --git a/STARTING WITH CSS/Q1.html b/STARTING WITH CSS/Q1.html new file mode 100644 index 0000000..61fda4a --- /dev/null +++ b/STARTING WITH CSS/Q1.html @@ -0,0 +1,50 @@ + + + + + + CSS Targeting Demonstration + + + + + + + +
+

Welcome to CSS Targeting Demonstration

+
+
+ +
+ This div uses inline CSS. +
+ +
+ This div uses internal CSS. +
+ +
+ This div uses external CSS. Check the styles.css file. +
+ +
+ When styles overlap: Inline > Internal > External +
+
+ Inline + Internal + External +
+ + diff --git a/STARTING WITH CSS/Q2.html b/STARTING WITH CSS/Q2.html new file mode 100644 index 0000000..297e1ad --- /dev/null +++ b/STARTING WITH CSS/Q2.html @@ -0,0 +1,54 @@ + + + + + + BEM Naming Convention Example + + + + +
+

This is the primary paragraph.

+

This is the secondary paragraph.

+

This is the highlighted paragraph.

+

This is a note paragraph.

+
+ + diff --git a/STARTING WITH CSS/Q3.css b/STARTING WITH CSS/Q3.css new file mode 100644 index 0000000..47d8992 --- /dev/null +++ b/STARTING WITH CSS/Q3.css @@ -0,0 +1,66 @@ +/* Custom Color Palette */ +:root { + --primary-color: #4CAF50; + --secondary-color: #FF9800; + --background-color: #f9f9f9; + --input-background-color: #ffffff; + --button-color: #4CAF50; + --button-hover-color: #45a049; +} + +/* Form Container */ +.form-container { + max-width: 600px; + margin: 0 auto; + padding: 20px; + background-color: var(--background-color); + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +/* Form Section */ +.form-section { + margin-bottom: 15px; +} + +/* Labels */ +label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} + +/* Input Fields */ +input[type="text"], +input[type="email"], +input[type="tel"], +textarea { + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; + background-color: var(--input-background-color); +} + +/* Button */ +button { + background-color: var(--button-color); + color: white; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: var(--button-hover-color); +} + +/* Opaque Section */ +.form-section--opaque { + background-color: var(--secondary-color); + opacity: 0.8; + padding: 10px; + border-radius: 4px; +} diff --git a/STARTING WITH CSS/Q3.html b/STARTING WITH CSS/Q3.html new file mode 100644 index 0000000..0cdb802 --- /dev/null +++ b/STARTING WITH CSS/Q3.html @@ -0,0 +1,37 @@ + + + + + + Styled Form Example + + + +
+
+

Contact Us

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ +