If you are learning website development, you might be looking for some projects to practice your skills and showcase your work. In this blog post, I will share with you 12 mini-web projects that I developed using different technologies and frameworks. These projects cover various aspects of web development, such as front-end, back-end, user interface, user experience, and data management. You can try these projects as inspiration or as a starting point for your own web development journey. All the projects are hosted on GitHub, and you can find the link below.
01 Course Registration Application Form
This project is built with HTML5, and it allows users to fill out a form to register for a course. The form includes various input fields, radio buttons, and drop-down menus. The form also applies some validation rules to telephone numbers and email formats. The form data is submitted to a server using the POST method. This project is an excellent starting point for learning HTML5 fundamentals.
02 Recipe Cards
This project is built with HTML5 and CSS3, and it displays a collection of recipe cards. Each card has an image of the dish, the name of the dish, a description, star ratings, and an info button. The cards also have some hover effects, such as changing the background colour, and use the box shadow property to add shadow effects. This project is a great way to learn CSS3 fundamentals.
03 The Krusty Krab
This project is built with HTML5 and CSS3, and it is a fully responsive single-page website for a fictional restaurant called "The Krusty Krab" that renders well on all devices. The website has an introduction section containing a title, a full-screen background image with a parallax scrolling effect, and a navigation menu. The website also has a menu section containing food cards, a gallery section, and a footer with contact information. The website uses various CSS properties for responsiveness, such as flexbox, grid, and media query. The website also uses different icons from the Font Awesome library. This project is a great way to learn about HTML and CSS layout and design and how to structure and design a responsive webpage.
04 Restaurant Website
This project is built with HTML5 and Bootstrap 5, and it involves creating a website for a restaurant containing a home page and a contact page. The website uses Bootstrap components, such as the navbar, cards, and forms. The website also uses some Bootstrap classes, such as container-fluid, row, col, btn, dropdown, etc. The website is responsive, and it adapts to different screen sizes. The website also uses various icons from the Font Awesome library. This project is an excellent way to learn about Bootstrap and how it can be used to create a responsive website.
05 Image Slider
This project is built with HTML5, CSS3, and JavaScript and is an image slider that displays multiple images. The image slider has buttons to navigate through the images. The image slider uses JavaScript events, such as onload, and JavaScript functions, such as getElementByClassName. This project is a great way to learn about JavaScript and how it can be used to add interactivity to a website.
06 Application Form with Validation
This project is built with HTML5, CSS3, and JavaScript, and it is an application form that validates the user's input. The form has different input fields, such as name, email, and password. The form uses RegEx (Regular Expression) to apply validation rules to name, email, and password. The form shows error messages depending on the validation results. This project is a great way to learn about regular expressions and form validation and how they can be used to create a user-friendly website.
07 To-Do List
This project is built with HTML5, CSS3, and JavaScript and is a to-do list that allows users to add and delete tasks. The to-do list uses various JavaScript functions, such as createElement, appendChild, removeChild, setAttribute, etc. This project is a great way to learn about how JavaScript can be used to add content and functionality to a website.
08 Weather App
This project is built with HTML5, CSS3, JavaScript, and jQuery and is a weather app that shows the current weather conditions for any location. The weather app uses an API from "OpenWeatherMap" to fetch the weather data. The weather app uses geolocation to get the user's location or allows the user to search for any other location. The weather app also shows a 5-day forecast. The weather app also displays additional information, such as humidity, pressure, visibility, wind speed, sunrise, sunset, and weather icons. This project is a great way to learn about APIs and how they can be used to add real-time data to a website.
09 REST API
This project is built with Node.js and Express.js and uses a REST API. The project uses the Axios library to make HTTP requests, such as GET and POST, to a 'JSONPlaceholder' API to retrieve data. The project also uses bodyParser middleware to parse incoming request data in JSON format. This project is a great way to learn about backend development and REST APIs.
10 Facebook Login Form
This project is built with REACT and replicates the Facebook login form. The login form covers various React fundamentals, such as creating React components, passing props to React components, and rendering React elements. This project is a great way to learn about React and how it can be used to create interactive and dynamic user interfaces.
11 To-Do App
This project is built with REACT and is an enhanced version of the previous to-do app. The to-do app allows users to add, edit, delete, and mark tasks as completed. The to-do app covers various React essentials, such as state management, conditional rendering, and list rendering. This project is a great way to learn about React and React Hooks and how they can be used to create more scalable and reusable applications.
12 Quiz App
This project is built with Node.js, Express.js, and EJS, and it is a quiz app that tests users' knowledge of web fundamentals. The quiz app uses Node.js and Express.js to create the server-side logic and routes, and EJS to render dynamic HTML pages. The quiz app fetches questions from a JSON file (you could also use MongoDB to store the quiz questions and answers) to display them on the web page. The quiz app also deals with handling missing user input, keeping track of the score, and showing the results at the end of the quiz. This project is a great way to learn about server-side rendering, using templating engines, and developing a dynamic web application.
These projects are not only fun and challenging, but they will also help you improve your website development skills. These projects are great for both beginners and intermediate web developers. You can find the source code for these projects on my GitHub page. Feel free to fork, clone, or modify them as you wish.
I want to acknowledge that these projects are not entirely my original ideas. I have taken inspiration from various sources online and adapted them to my own style and preferences.
I hope you enjoyed reading this blog. If you did, please give it a like and share it with your friends. Also, feel free to leave a comment and let me know what you think. I would love to hear your feedback and suggestions. Thank you for reading. I hope you enjoyed it and learned something new!
ahmedmbutt
/
CS-344-Web
This repo contains around 12 mini projects related to different topics of Web Development
CS-344-Web
This repo contains around 12 mini-projects related to different topics of Web Development.
You can also read my blog about these projects at: DEV | Medium
| # | Mini-Project | Built with |
|---|---|---|
| 01 | Course Registration Application Form | HTML5 |
| 02 | Recipe Cards | HTML5, CSS3 |
| 03 | The Krusty Krab | HTML5, CSS3 |
| 04 | Restaurant Website | HTML5, Bootstrap |
| 05 | Image Slider | HTML5, CSS3, JS |
| 06 | Application Form with Validation | HTML5, CSS3, JS |
| 07 | Todo List | HTML5, CSS3, JS |
| 08 | Weather App | HTML5, CSS3, JS, jQuery |
| 09 | REST API | Node.js, Express.js |
| 10 | Login Form | REACT |
| 11 | Todo App | REACT |
| 12 | Quiz App | Node.js, Express.js, EJS |
Top comments (0)