Learning Projects

This repository is a collection of practice projects built while learning web development and programming fundamentals. It includes HTML and CSS exercises, TypeScript mini apps, a React portfolio project, Python practice scripts, and a small SQL database file.

Repository Overview

01_HTML

HTML practice exercises focused on page structure, semantic tags, forms, lists, links, images, media, tables, and accessibility.

Highlights:

• Day-by-day HTML learning journal
• Examples of headings, paragraphs, lists, and tables
• Forms, validation, iframes, and media usage
• Personal portfolio and practice pages

02_CSS

CSS practice and layout experiments that build on the HTML foundation.

Highlights:

• Multiple day-based styling exercises
• Layout, spacing, and visual design practice
• Responsive page sections and component styling

TypeScript

Small TypeScript and JavaScript browser projects.

Highlights:

• Guessing-Game: a number guessing game with start, reset, and submit controls
• Counter: a simple counter app with increase, decrease, and reset actions
• TypeScript source files alongside generated JavaScript output

Portfolio-React

A React portfolio application built with Vite and React Router.

Highlights:

• Client-side routing with multiple pages
• Home, profile card, projects, project details, and contact views
• Project data stored in reusable components and data files
• Styled with Tailwind and custom CSS

BrokeStudent-Vault

Python learning files and small exercises.

Highlights:

• Python basics and control flow examples
• A simple calculator script
• Practice code for syntax, loops, data types, and functions

SQL

Contains a small SQLite database file used for practice and learning.

Tech Stack

• HTML5
• CSS3
• JavaScript
• TypeScript
• React
• Vite
• Python
• SQLite

How to Run

Most folders are standalone learning projects. Open the relevant HTML file directly in a browser, or run the project from its own folder if it has a development setup.

HTML and CSS projects

1. Open the desired .html file in a browser.
2. Make sure the linked CSS and media files stay in the same folder structure.

TypeScript projects

1. Open the project folder in a browser or local server.
2. Use the generated script.js file if you are not compiling TypeScript locally.

React project

1. Go into the Portfolio-React folder.
2. Install dependencies with npm install.
3. Start the development server with npm run dev.

Python scripts

1. Run the .py files with Python 3.
2. Some scripts use terminal input, so run them from a terminal window.

Purpose of the Repository

The main goal of this repository is learning by building. It tracks progress across several technologies and keeps each experiment in one place for later reference and revision.

Author

Abdul Sami Shaikh