https://github.com/vildancetin/lesson-remainder

List lessons
https://github.com/vildancetin/lesson-remainder

mock-data module-css reactjs responsive

Last synced: 22 days ago
JSON representation

List lessons

• Host: GitHub
• URL: https://github.com/vildancetin/lesson-remainder
• Owner: vildancetin
• Created: 2023-12-01T11:33:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-01T14:06:24.000Z (over 2 years ago)
• Last Synced: 2025-02-08T07:08:53.902Z (over 1 year ago)
• Topics: mock-data, module-css, reactjs, responsive
• Language: JavaScript
• Homepage: https://lesson-remainder.netlify.app/
• Size: 208 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Lesson Remainder

I first created a React app using ```yarn create react-app lesson-remainder``` and added components, CSS files, and pages. 

## Component Skeleton 

   ![image](https://github.com/vildancetin/lesson-remainder/assets/75564722/05fddf15-f9ba-4850-95a5-c0053d9675c1)

## Outcome

![lesson-remainder](https://github.com/vildancetin/lesson-remainder/assets/75564722/3f2dda33-b8aa-419c-9c1c-065d29dfb865)

Three components form the basis and are invoked from App.js. Additionally, a data.js file acts as mock data, obtaining the necessary information initially and receiving it using prompts.

These components are named Header, Lesson, and LessonCard. 

In the CSS pages, module CSS is utilized for unique class names, and they are imported into pages.

Within the LessonCard component, a card structure is established for utilizing the Lesson component.

A media query section is created to ensure responsiveness across different screens.

## Demo

[Lesson Remainder](https://lesson-remainder.netlify.app/)