https://github.com/busrarafa/modern-html-css-2.0

https://busrarafa.github.io/Modern-HTML-CSS-2.0/
https://github.com/busrarafa/modern-html-css-2.0

bem-css html-css-javascript html5 js lumina vercel

Last synced: 3 months ago
JSON representation

https://busrarafa.github.io/Modern-HTML-CSS-2.0/

• Host: GitHub
• URL: https://github.com/busrarafa/modern-html-css-2.0
• Owner: BusraRafa
• Created: 2025-04-08T09:27:29.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-29T12:57:04.000Z (11 months ago)
• Last Synced: 2025-06-19T10:43:52.069Z (10 months ago)
• Topics: bem-css, html-css-javascript, html5, js, lumina, vercel
• Language: HTML
• Homepage: https://busrarafa.github.io/Modern-HTML-CSS-2.0/
• Size: 12 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
 

# 🎯  Modern HTML & CSS Projects

Practice projects and tasks completed from the "Modern HTML & CSS From The Beginning" Udemy course.
This repository showcases my learning journey, daily practice, and real-world mini-projects using modern HTML and CSS techniques.





  📚Table of Contents

  


    
BEM Website Leno

    
Tutor Website

    
Lumina Creative Website

    
Bono Landing Page

    


      

        Mini-tasks and Challenges

        


          
css-basics-challenge

          
freelance-form-challenge

          
shoe-cards-project

          
flexbox-layout-challenge

          
pricing-grid-project

          
selectors-challenge

          
grid-challenge-1

          
grid-challenge-2

        

      

    

  


---



## BEM Website Leno 🚀

![Image](https://github.com/user-attachments/assets/d9a6ab08-4190-483f-a50d-c6c1ffb35871)

|  **🧪 Try the Project** |  **🛠 Repository Link** |

|:--------------------------------:|:---------------------------------:|

| [![Live Demo](https://img.shields.io/badge/Live_Demo-Available-green)](https://busrarafa.github.io/Modern-HTML-CSS-2.0/bem-website-leno/) | [BEM Website Leno](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/bem-website-leno/) |

(back to top)


---



## Tutor Website 💡

![Image](https://github.com/user-attachments/assets/677b469c-d75f-44bf-952f-80f43db8b59a)

|  **🧪 Try the Project** |  **🛠 Repository Link** |

|:--------------------------------:|:---------------------------------:|

| [![Live Demo](https://img.shields.io/badge/Live_Demo-Available-green)](https://busrarafa.github.io/Modern-HTML-CSS-2.0/Tutor-Website/) | [Tutor Website](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/Tutor-Website) |

(back to top)


---



## Lumina Creative Website 💻

![Image](https://github.com/user-attachments/assets/03cecc64-335b-4970-8315-69cfc80a240a)

|  **🧪 Try the Project** |  **🛠 Repository Link** |

|:--------------------------------:|:---------------------------------:|

| [![Live Demo](https://img.shields.io/badge/Live_Demo-Available-green)](https://busrarafa.github.io/Modern-HTML-CSS-2.0/lumina-creative-website/) | [Lumina Creative Website](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/lumina-creative-website) |

(back to top)


---



## Bono Landing Page 🌟

![Image](https://github.com/user-attachments/assets/412a5d56-c6f4-4920-a87b-e9376e95cd83)

|  **🧪 Try the Project** |  **🛠 Repository Link** |

|:--------------------------------:|:---------------------------------:|

| [![Live Demo](https://img.shields.io/badge/Live_Demo-Available-green)](https://busrarafa.github.io/Modern-HTML-CSS-2.0/Landing%20Form%20Mini%20Project/) | [Bono Landing Page](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/Landing%20Form%20Mini%20Project) |

(back to top)


---

## Mini-tasks and Challenges

This section showcases the completion of several mini tasks and challenges, each focusing on different aspects of HTML and CSS. Includes building simple layouts, forms, components to demonstrate and apply the skills gained throughout the course.

- ### css-basics-challenge

**🔗 [Live Preview](https://busrarafa.github.io/Modern-HTML-CSS-2.0/mini-tasks-and-challenges/10-css-basics-challenge/)**  

**🛠️ [Access Source Code](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/mini-tasks-and-challenges/10-css-basics-challenge)**

- ### freelance-form-challenge

**🔗 [Live Preview](https://busrarafa.github.io/Modern-HTML-CSS-2.0/mini-tasks-and-challenges/09-freelance-form-challenge/)**  

**🛠️ [Access Source Code](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/mini-tasks-and-challenges/09-freelance-form-challenge)**

- ### shoe-cards-project

**🔗 [Live Preview](https://busrarafa.github.io/Modern-HTML-CSS-2.0/mini-tasks-and-challenges/10-shoe-cards-project/)**  

**🛠️ [Access Source Code](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/mini-tasks-and-challenges/10-shoe-cards-project)**

- ### flexbox-layout-challenge

**🔗 [Live Preview](https://busrarafa.github.io/Modern-HTML-CSS-2.0/mini-tasks-and-challenges/05-flexbox-layout-challenge/)**  

**🛠️ [Access Source Code](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/mini-tasks-and-challenges/05-flexbox-layout-challenge)**

- ### pricing-grid-project

**🔗 [Live Preview](https://busrarafa.github.io/Modern-HTML-CSS-2.0/mini-tasks-and-challenges/06-pricing-grid-project/)**  

**🛠️ [Access Source Code](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/mini-tasks-and-challenges/06-pricing-grid-project)**

- ### selectors-challenge

**🔗 [Live Preview](https://busrarafa.github.io/Modern-HTML-CSS-2.0/mini-tasks-and-challenges/10-selectors-challenge/)**  

**🛠️ [Access Source Code](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/mini-tasks-and-challenges/10-selectors-challenge)**

- ### grid-challenge-1

**🔗 [Live Preview](https://busrarafa.github.io/Modern-HTML-CSS-2.0/mini-tasks-and-challenges/04-grid-challenge-1/)**  

**🛠️ [Access Source Code](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/mini-tasks-and-challenges/04-grid-challenge-1)**

- ### grid-challenge-2

**🔗 [Live Preview](https://busrarafa.github.io/Modern-HTML-CSS-2.0/mini-tasks-and-challenges/10-grid-challenge-2/)**  

**🛠️ [Access Source Code](https://github.com/BusraRafa/Modern-HTML-CSS-2.0/tree/main/mini-tasks-and-challenges/10-grid-challenge-2)**