Project ideas at each level👇
📌 HTML
- Simple portfolio
📌 CSS
- Portfolio with styling
- Tribute page
- Parallax Website
📌 CSS framework
- Landing page
- Survey forms
📌 JavaScript
- Clock
- Navigation bar
- TO-DO app
- Quiz app
- Blog
- Animated menu
- Tic Tac Toe
📌 HTML
- Simple portfolio
📌 CSS
- Portfolio with styling
- Tribute page
- Parallax Website
📌 CSS framework
- Landing page
- Survey forms
📌 JavaScript
- Clock
- Navigation bar
- TO-DO app
- Quiz app
- Blog
- Animated menu
- Tic Tac Toe
Forwarded from Learn CSS™
If you know CSS then you can use these amazing generators and save your time
1️⃣ CSS Box Shadow Generator
- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects
🔗 https://cssboxshadow.com/
2️⃣ Glassmorphism
- Generate glassmorphic design easily
🔗 https://glassgenerator.netlify.app/
3️⃣ Cool Backgrounds
- Explore a beautifully curated selection of cool backgrounds that you can add to your next project
🔗 https://coolbackgrounds.io/
4️⃣ Pixel art
- Create CSS pixel art, export the results to CSS and download them.
🔗 https://www.pixelartcss.com/
5️⃣ SVG waves
- It's not a CSS generator but very handy tool. You can create the layers of waves and simply export either in SVG or PNG
🔗 https://svgwave.in/
1️⃣ CSS Box Shadow Generator
- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects
🔗 https://cssboxshadow.com/
2️⃣ Glassmorphism
- Generate glassmorphic design easily
🔗 https://glassgenerator.netlify.app/
3️⃣ Cool Backgrounds
- Explore a beautifully curated selection of cool backgrounds that you can add to your next project
🔗 https://coolbackgrounds.io/
4️⃣ Pixel art
- Create CSS pixel art, export the results to CSS and download them.
🔗 https://www.pixelartcss.com/
5️⃣ SVG waves
- It's not a CSS generator but very handy tool. You can create the layers of waves and simply export either in SVG or PNG
🔗 https://svgwave.in/
Free illustrations for your next project 💫
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
⪼
stubborn.fun⪼
freeillustrations .xyz⪼
illlustrations .co⪼
undraw .co⪼
vectr .com⪼
drawkit .io⪼
opendoodles .com⪼
freewebillustrations .com⪼
handz .design⪼
icons8 .com/illustrationsI just came across an amazing GitHub repository.
In this repo, You'll find a lot of great resources for front-end developers including
- Frameworks
- Books
- Challenges
- Tools
- Blogs, etc..
🔗 https://github.com/RitikPatni/Front-End-Web-Development-Resources
In this repo, You'll find a lot of great resources for front-end developers including
- Frameworks
- Books
- Challenges
- Tools
- Blogs, etc..
🔗 https://github.com/RitikPatni/Front-End-Web-Development-Resources
✨5 annoying JavaScript habits that you want to avoid.✨
https://telegra.ph/5-annoying-JavaScript-habits-that-you-want-to-avoid-03-25
https://telegra.ph/5-annoying-JavaScript-habits-that-you-want-to-avoid-03-25
Telegraph
5 annoying JavaScript habits that you want to avoid.
5 annoying JavaScript habits that you want to avoid. I see these 5 over and over. They are bad for performance, readability, and they signal a lack of basic understanding of the JavaScript language. Let me go through them here👇 1. Using map() instead of forEach().…
JavaScript Tip 💡
IIFEs died when modules were born.
Let them rest in peace.
You don’t need them.
In a case like this, just execute the function on a new line instead 🙌
IIFEs died when modules were born.
Let them rest in peace.
You don’t need them.
In a case like this, just execute the function on a new line instead 🙌
You want to learn the basics of JavaScript?
Here is an awesome GitHub repository that teaches you the basics of JavaScript in 30 days
This is a step by step guide/roadmap followed by a few small projects
Link🔗 -
https://github.com/Asabeneh/30-Days-Of-JavaScript
Here is an awesome GitHub repository that teaches you the basics of JavaScript in 30 days
This is a step by step guide/roadmap followed by a few small projects
Link🔗 -
https://github.com/Asabeneh/30-Days-Of-JavaScript
7 Unique APIs for your next project -
1. Shodan API
2. Radar .io API
3. WebHose API
4. People Data Labs
5. Crawlera
6. SpaceX API
7. Segment
*Whether you want something to help you get a job or create a side project that earns you some money, all of these APIs are valuable*
1. Shodan API
2. Radar .io API
3. WebHose API
4. People Data Labs
5. Crawlera
6. SpaceX API
7. Segment
*Whether you want something to help you get a job or create a side project that earns you some money, all of these APIs are valuable*
JavaScript Tips & Tricks : BigInt
How would you deal with numbers larger than MAX_SAFE_INTEGER or 9007199254740991?
BigInt comes to your aid
#Javascripttip
How would you deal with numbers larger than MAX_SAFE_INTEGER or 9007199254740991?
BigInt comes to your aid
#Javascripttip
This media is not supported in your browser
VIEW IN TELEGRAM
VS CODE PATH TRICK W/ JavaScript
Use path mapping to avoid fumbling over long relative module imports in your JavaScript code. Just create a JSconfig.json file in VS Code, or use an existing TSconfig.
Official VS Code docs :
https://code.visualstudio.com/docs/languages/jsconfig
Use path mapping to avoid fumbling over long relative module imports in your JavaScript code. Just create a JSconfig.json file in VS Code, or use an existing TSconfig.
Official VS Code docs :
https://code.visualstudio.com/docs/languages/jsconfig
Some Nuxt Js Resources
1. Nuxt Js official site
https://nuxtjs.org/
2.Nuxt js Crash Course by Traversy Media
https://youtu.be/ltzlhAxJr74
3.Curated list of awesome resources : nuxtjs communities, articles, videos about using Nuxt.js
https://github.com/Developerayo/awesome-nuxtjs
4. A curated list of awesome things related to Nuxt.js
https://github.com/nuxt-community/awesome-nuxt
5.Official GitHub of nuxt Js
https://github.com/nuxt/nuxt.js
6.Universal application code structure in Nuxt.js
A brief summary of source code structure in Nuxt.js
https://medium.com/free-code-camp/universal-application-code-structure-in-nuxt-js-4cd014cc0baa
7. Master Nuxt.js - A Vuejs framework by building projects
Udemy link:
https://www.udemy.com/course/master-nuxtjs-a-vuejs-framework-by-building-projects-and-deploy/
DOWNLOAD LINK:
https://tut4dev.ir/en/product/6041/free-master-nuxt-js-a-vuejs-framework-
1. Nuxt Js official site
https://nuxtjs.org/
2.Nuxt js Crash Course by Traversy Media
https://youtu.be/ltzlhAxJr74
3.Curated list of awesome resources : nuxtjs communities, articles, videos about using Nuxt.js
https://github.com/Developerayo/awesome-nuxtjs
4. A curated list of awesome things related to Nuxt.js
https://github.com/nuxt-community/awesome-nuxt
5.Official GitHub of nuxt Js
https://github.com/nuxt/nuxt.js
6.Universal application code structure in Nuxt.js
A brief summary of source code structure in Nuxt.js
https://medium.com/free-code-camp/universal-application-code-structure-in-nuxt-js-4cd014cc0baa
7. Master Nuxt.js - A Vuejs framework by building projects
Udemy link:
https://www.udemy.com/course/master-nuxtjs-a-vuejs-framework-by-building-projects-and-deploy/
DOWNLOAD LINK:
https://tut4dev.ir/en/product/6041/free-master-nuxt-js-a-vuejs-framework-
Next Js Resources
1.Next Js tips
https://nextjstips.com/
2. NextJs official site
https://nextjs.org/learn/basics/create-nextjs-app
3. Next js tutorial for beginners Playlist by TheNetNinja
https://youtube.com/playlist?list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eB
4. Learn Next.Js Playlist by Lee Robinson
https://youtube.com/playlist?list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR
1.Next Js tips
https://nextjstips.com/
2. NextJs official site
https://nextjs.org/learn/basics/create-nextjs-app
3. Next js tutorial for beginners Playlist by TheNetNinja
https://youtube.com/playlist?list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eB
4. Learn Next.Js Playlist by Lee Robinson
https://youtube.com/playlist?list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR
Design resource🔥
Real-time interactive design tool that allows you to design, animate, and immediately integrate your creations. It's free for individual use
🔗 https://rive.app/
Real-time interactive design tool that allows you to design, animate, and immediately integrate your creations. It's free for individual use
🔗 https://rive.app/
rive.app
Rive — a new way to design, build, and ship user interfaces
Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast renderer. This pipeline guarantees that what you build in the Rive Editor is exactly what ships in your products and games.
Forwarded from Learn CSS™
This media is not supported in your browser
VIEW IN TELEGRAM
Reverse Engineer CSS Animations
Use the Chrome browser's animation dev tools to record, analyze, and reverse engineer CSS animations.
Official docs:
https://developer.chrome.com/docs/devtools/css/animations/
Use the Chrome browser's animation dev tools to record, analyze, and reverse engineer CSS animations.
Official docs:
https://developer.chrome.com/docs/devtools/css/animations/
Just found a great GitHub repository for JavaScript lovers🚀
🔗 https://github.com/lydiahallie/javascript-questions
🔗 https://github.com/lydiahallie/javascript-questions
GitHub
GitHub - lydiahallie/javascript-questions: A long list of (advanced) JavaScript questions, and their explanations
A long list of (advanced) JavaScript questions, and their explanations :sparkles: - GitHub - lydiahallie/javascript-questions: A long list of (advanced) JavaScript questions, and their explanations
Building a real-time application with React and Socket .io
https://javascript.plainenglish.io/building-a-real-time-application-with-react-and-socket-io-f4c401832557
https://javascript.plainenglish.io/building-a-real-time-application-with-react-and-socket-io-f4c401832557