https://github.com/sedat-akdogan/react_language_cards
This is a React project. React.js is used to create a language card application.
https://github.com/sedat-akdogan/react_language_cards
bootstrap css3 html5 js reactjs
Last synced: 2 months ago
JSON representation
This is a React project. React.js is used to create a language card application.
- Host: GitHub
- URL: https://github.com/sedat-akdogan/react_language_cards
- Owner: sedat-akdogan
- Created: 2022-08-17T19:43:18.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-28T21:17:57.000Z (over 3 years ago)
- Last Synced: 2025-02-21T11:49:59.933Z (over 1 year ago)
- Topics: bootstrap, css3, html5, js, reactjs
- Language: JavaScript
- Homepage: https://react-language-cards-cyan.vercel.app
- Size: 2.36 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project: Language Cards
## Description
Project aims to create a Languages Cards App.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
004-Language Cards(folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── public
│ └── index.html
├── src
│ ├── components
│ │ └── card
│ │ ├── Card.css
│ │ └── Card.js
│ ├── helper
│ │ └── data.js
│ ├── assets.js
│ │ └── [images]
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── yarn.lock
```
## Expected Outcome
## Objective
Build a Languages Cards App using ReactJS.
Implement the conditional rendering.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
### At the end of the project, students will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS.
- use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Steps to Solution
- Step 1: Create React App using `npx create-react-app language-cards`
- Step 2: Build Languages Cards app using [data.js](data.js), images in [assets](./assets/) folder.
- Step 3: Provide a functionality: when a card clicked display the other side of that card.
- Step 4: Push your application into your own public repo on Github
- Step 5: Add project gif to your project and README.md file.
**
☺ Happy Coding ✍
**