Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/juanjoowendler/personal-projects-frontend

This repository contains a collection of simple frontend projects created as part of the Responsive Web Design course offered by FreeCodeCamp. These projects showcase my skills, creativity, and understanding of web development concepts.
https://github.com/juanjoowendler/personal-projects-frontend

css3 frontend html5 responsive-web-design

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/juanjoowendler/personal-projects-frontend
Owner: juanjoowendler
Created: 2023-03-16T19:46:51.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-12-28T23:12:22.000Z (about 2 months ago)
Last Synced: 2024-12-29T00:18:21.282Z (about 2 months ago)
Topics: css3, frontend, html5, responsive-web-design
Language: HTML
Homepage:
Size: 4.6 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # 🌟 Personal Simple Frontend Projects

**📅 Duration:** 300 hours  

**📖 Course:** Responsive Web Design - FreeCodeCamp

## 🌐 Live Projects 

- [Product Landing Page](https://product-landing-page-example.netlify.app/)

- [Tribute to Alan Turing Page](https://tribute-alanturing-page.netlify.app/)

- [Survey Form](https://survey-form-myexample.netlify.app/)

- [Technical Linux Documentation Page](https://technical-documentation-linux-page.netlify.app/)

## 📖 Description

This repository contains a collection of simple frontend projects created as part of the Responsive Web Design course offered by FreeCodeCamp. These projects showcase my skills, creativity, and understanding of web development concepts.

## 🎨 Features

- **Responsive Design:** Fully responsive layouts that adapt to various screen sizes, ensuring a great user experience on all devices.

- **Modern Aesthetics:** Clean and modern design principles, incorporating best practices in UI/UX.

- **Project Showcase:** Highlights various projects completed, demonstrating abilities and growth as a developer.

- **Contact Section:** Allows potential employers or collaborators to reach out easily (if applicable).

## 🛠️ Technologies Used

- **HTML5:** Markup language for structuring the content.

- **CSS3:** Styling language to create visually appealing layouts and designs.

- **Flexbox:** Used for responsive layouts to ensure elements are aligned and spaced correctly.

- **Media Queries:** For creating responsive design adjustments based on different screen sizes.

## 🚀 Getting Started

To view the projects, open the corresponding `index.html` files in your web browser.

## 📷 Preview

### Personal Portfolio (demo)

![Projects Preview](projects-assets/personal-portfolio-demo-no-original/img1.png)

![Projects Preview](projects-assets/personal-portfolio-demo-no-original/img2.png)

![Projects Preview](projects-assets/personal-portfolio-demo-no-original/img3.png)

![Projects Preview](projects-assets/personal-portfolio-demo-no-original/img4.png)

### Product Landing Page

![Projects Preview](projects-assets/product-landing-page/img1.png)

![Projects Preview](projects-assets/product-landing-page/img2.png)

![Projects Preview](projects-assets/product-landing-page/img3.png)

![Projects Preview](projects-assets/product-landing-page/img4.png)

![Projects Preview](projects-assets/product-landing-page/img5.png)

### Survey Form

![Projects Preview](projects-assets/survey-form/img1.png)

![Projects Preview](projects-assets/survey-form/img2.png)

### Technical Linux Documentation Page

![Projects Preview](projects-assets/technical-documentation-page/img1.png)

![Projects Preview](projects-assets/technical-documentation-page/img2.png)

### Tribute to Alan Turing Page

![Projects Preview](projects-assets/tribute-page/img1.png)