Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dzmitryur/js-html-css-apps
Projects for Beginners in JavaScript HTML CSS
https://github.com/dzmitryur/js-html-css-apps
beginner-project css css-flexbox css3 html html5 javascript js programming
Last synced: about 1 month ago
JSON representation
Projects for Beginners in JavaScript HTML CSS
- Host: GitHub
- URL: https://github.com/dzmitryur/js-html-css-apps
- Owner: DzmitryUr
- License: mit
- Created: 2024-03-27T09:29:29.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-07-07T20:20:37.000Z (6 months ago)
- Last Synced: 2024-07-07T21:33:33.514Z (6 months ago)
- Topics: beginner-project, css, css-flexbox, css3, html, html5, javascript, js, programming
- Language: HTML
- Homepage: https://dzmitryur.github.io/js-html-css-apps/
- Size: 2.04 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
The repository contains code for simple JS/HTML/CSS Apps.
Each project was built from scratch during the recording of the YouTube video. The video usually contains a short introduction, a review of the design, defining HTML structure and CSS styles, and applying JS code.
Provided exercises can help improve Web Development skills, get an understanding of how to code in JavaScript, and prepare for the Frontend interview.
The index.html summary page was created with links to all projects and deployed to GitHub Pages. [Check All Projects Page App](https://dzmitryur.github.io/js-html-css-apps/)
## Project 1. Counter App
- Topics covered: HTML Structure and Semantics, CSS Styling and Layout, JS DOM Manipulation, Events Handling
- [Look at the code](./counter)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/counter/index.html)
- [Watch on YouTube](https://youtu.be/IfHdXb3Gxe0)
## Project 2. Image Gallery
- Topics covered: HTML Structure and Semantics, CSS Styling and Layout, JS DOM Manipulation, Events Handling
- [Look at the code](./image-gallery)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/image-gallery/index.html)
- [Watch on YouTube](https://youtu.be/pAc1hW3eKr0)
## Project 3. Facts App
- Topics covered: HTML Structure and Semantics, CSS Styling and Layout, JavaScript Fetch API, Promises
- [Look at the code](./facts-api)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/facts-api/index.html)
- [Watch on YouTube](https://youtu.be/ZrOqRrcpsEs)
## Project 4. Jokes App
- Topics covered: HTML Structure and Semantics, CSS Styling and Layout, JavaScript Fetch API, Async, Await
- [Look at the code](./jokes-app)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/jokes-app/index.html)
- [Watch on YouTube](https://youtu.be/b7Cgpu541lQ)
## Project 5. Accordion
- Topics covered: HTML Structure and Semantics, CSS Styling and Layout, JS DOM Manipulation, Events Handling
- [Look at the code](./accordion)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/accordion/index.html)
- [Watch on YouTube](https://youtu.be/81q_kEgbNPA)
## Project 6. Native Popups
- Topics covered: HTML Structure and Semantics, CSS Styling and Layout, JS DOM Manipulation, Alert, Confirm, Prompt Popups
- [Look at the code](./native-popups)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/native-popups/index.html)
- [Watch on YouTube](https://youtu.be/mqYTk7XoRBs)
## Project 7. Timer App
- Topics covered: HTML Structure and Semantics, CSS Styling and Layout, JS Date object, `setInterval`, `clearInterval` functions
- [Look at the code](./timer)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/timer/index.html)
- [Watch on YouTube](https://youtu.be/9nMLgtFKfNc)
## Project 8. Contact Us Form
- Topics covered: HTML Structure and Semantics; CSS Styling and Layout; Form, Input, Textarea, Form Validation
- [Look at the code](./form-contact-us)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/form-contact-us/index.html)
- [Watch on YouTube](https://youtu.be/x2ItMNJI-rc)
## Project 9. Memory Words Game
- Topics covered: HTML Structure and Semantics; CSS Flexbox Layout, Rem Measurement; JS array, `Math.random()`
- [Look at the code](./memory-words-game)
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/memory-words-game/index.html)
- [Watch on YouTube](https://youtu.be/oZpgtx6T6MY)
## Project 10. Portfolio Projects
- Topics covered: HTML Structure and Semantics, CSS Flexbox Layout
- The source code is in the root
- [Try the App](https://dzmitryur.github.io/js-html-css-apps/)
- [Watch on YouTube](https://youtu.be/OjesQpDMWJo)