# Frontend Mentor - Stats preview card component solution This is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ## Table of contents - [Overview](#overview) - [The challenge](#the-challenge) - [Screenshot](#screenshot) - [Links](#links) - [My process](#my-process) - [Built with](#built-with) - [What I learned](#what-i-learned) - [Continued development](#continued-development) - [Useful resources](#useful-resources) - [Author](#author) - [Acknowledgments](#acknowledgments) **Note: Delete this note and update the table of contents based on what sections you keep.** ## Overview ### The challenge Users should be able to: - View the optimal layout depending on their device's screen size ### Screenshot  Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. **Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** ### Links - Solution URL: [Add solution URL here](https://your-solution-url.com) - Live Site URL: [Add live site URL here](https://your-live-site-url.com) ## My process ### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox - CSS Grid - Mobile-first workflow - [React](https://reactjs.org/) - JS library - [Next.js](https://nextjs.org/) - React framework - [Styled Components](https://styled-components.com/) - For styles **Note: These are just examples. Delete this note and replace the list above with your own choices** ### What I learned Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. To see how you can add code snippets, see below: ```html <h1>Some HTML code I'm proud of</h1> ``` ```css .proud-of-this-css { color: papayawhip; } ``` ```js const proudOfThisFunc = () => { console.log('🎉') } ``` If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. **Note: Delete this note and the content within this section and replace with your own learnings.** ### Continued development Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. **Note: Delete this note and the content within this section and replace with your own plans for continued development.** ### Useful resources - [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. - [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. **Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** ## Author - Website - [Add your name here](https://www.your-site.com) - Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) - Twitter - [@yourusername](https://www.twitter.com/yourusername) **Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** ## Acknowledgments This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. **Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**

Story By now you know the Javascript basics. Lets put it to a test and create something awesome, creative and motivating. The goal is to create a game in the browser. What type of game? Wait for it... Any type :) Just your creativity (and your JavaScript knowledge) can limit the result. What are you going to learn? finding DOM elements in the document tree DOM manipulation using JavaScript handling user interactions with JavaScript event handlers HTML data attributes CSS styling Tasks As a team you should figure out what game you want to work on and what features you want to finish. There is a game that the whole team agrees you would like to implement Checked your game idea with a mentor to make sure it can be realistically implemented in a sprint There is a backlog of possible features you have collected that the game can have There is a plan based on story estimations what you can finish by the end of the sprint We want to have a playable game based on JavaScript DOM manipulation and event handling The game is based on handling some kind of event(s) (mouse, keyboard...) The game mainly relies on DOM manipulation to move elements around on the screen or change their appearance (beside CSS of course) The code is separated into several javascript functions [OPTIONAL] The game or parts of it can be time driven. This adds some complexity as you have to change things around in given time intervals There is a part of the game that changes over time without any interaction (eg. moving enemy/avatar) [OPTIONAL] There should be a way to check my highest score. The highscore data is stored between games General requirements None Hints Have fun, create a game that is motivating for you! :) How to figure out what game and features to implement? Here are some ideas: have a brainstorming session, throw in game/feature ideas without criticizing each other, any idea is a good idea, write them down somewhere after you are finished talk about what you have collected and decide on a game now talk with a mentor about the idea and if it can be realistically implemented in a sprint collect any feature ideas you have and specify them so every team member knows what the expectations are with it (these are your user stories in your backlog) now estimate each user story and figure out how many you can finish in this sprint If you search the internet for javascript games, you'll see lots of solutions using canvas. It is a nice technology, but we have not met canvas and the main focus of this project is to practice DOM and event handling, so please say no to canvas for this project. Later on feel free to learn about canvas with a pet project game for example. You can open the index.html by starting a small HTTP server (see the background materials for details) You can decide to create some backend functionality. For that, use any previously learnt technology (eg. Flask). Don't forget to use git branches as you develop new features Background materials Javascript - Events Javascript - DOM manipulation Javascript - Extending the DOM How to start a local HTTP server Javascript - Debugging Javascript - Other features Javascript.info tutorial MDN HTML Drag&Drop API MDN Drag operations documentation CSS Flexbox guide CSS Grid guide

Learn How To Make Full Responsive Ecommerce Website Using HTML CSS & JavaScript. This is a free HTML CSS JavaScript Course. And in this course we will learn how to build and deploy a full multipage ecommerce website completely from scratch step by step.

this application for every one wants to know work with laravel and vuej , in this project you learn how use(Notifcation , Read and Unread , pusher , Jwt authentification , token, Sockets , Api , and more ) and vuejs (use Vuetify , router, like dislike , Play sound Notification )