Web Development Practice Repository

This repository provides a step-by-step guide for learners to build a static portfolio page, starting with basic HTML, then enhancing it with CSS, Bootstrap, and JavaScript. Each stage includes hands-on snippets that will help you grasp web development concepts, responsive design, and interactive features.

Contents

• 01-HTML: Basic HTML structure and elements.
• 02-HTML-CSS: Applying CSS styles to enhance the HTML structure.
• 03-HTML-Bootstrap: Using Bootstrap for a responsive design.
• 04-JavaScript: Adding interactivity to the page.

Learning Objectives

By following this repository, you will:

• Understand the fundamental HTML structure and commonly used tags.
• Learn how to style your webpage using CSS.
• Integrate Bootstrap to create responsive and visually appealing layouts.
• Apply JavaScript to add interactive features to your portfolio page.

Getting Started

1. Clone the Repository

   git clone https://github.com/Azzzhar7/course-web-technologies.git
   

Navigate to Each Section

• Start with the 01-HTML folder and progressively move to the next folders.
• Each folder contains an index.html file with comments to guide you.

Technologies Used

• HTML: For structuring the web page.
• CSS: For styling the HTML elements.
• Bootstrap: For responsive design without writing additional CSS.
• JavaScript: For adding interactivity to the page.

Section Details

01-HTML

• Basic HTML tags and elements.
• Understand the structure of a web page, including headings, paragraphs, images, links, lists, tables, forms, and more.

02-HTML-CSS

• Learn how to apply CSS properties to style HTML elements.
• Understand the difference between inline, internal, and external CSS.
• Experiment with colors, fonts, margins, padding, and positioning.

03-HTML-Bootstrap

• Utilize Bootstrap components for a responsive layout.
• Learn about the Bootstrap grid system, navigation bar, buttons, cards, and modals.

04-JavaScript Snippets

• Add interactive features like form validation, smooth scrolling, image modals, and more.
• Learn how JavaScript can enhance user experience without altering the page structure.

How to Use This Repository

• Start from the 01-HTML section and understand the basics of HTML.
• Move to 02-HTML-CSS to apply styles and make the page visually appealing.
• Integrate Bootstrap from 03-HTML-Bootstrap to make your page responsive.
• Finally, explore 04-JavaScript to add interactive functionality. Each index.html file contains comments explaining the purpose of tags, properties, and methods used.

Contact

• Email: muhammadazhar@uaar.edu.pk
• Linkedin: https://www.linkedin.com/in/azzzhar7/