⇨ Ideas includes for Colours, Shapes, Emojis, GIFs etc.
⇨ Skills: HTML/CSS, JavaScript, Python (Optional)
⇩
These projects can be categorised into
1️⃣ Utility Apps
2️⃣ Color Based
3️⃣ Shapes
4️⃣ Image Related
5️⃣ Drawing
6️⃣ Add-Ons
7️⃣ Authentication and, Authorisation
1️⃣ Utility Apps
P1️⃣ Single Page App
⇥ To start with build a SPA and, make it responsive. It could be a portfolio page or, a product catalog page.
P2️⃣ Landing Page
⇥ Landing pages are very important. Show products/features in carousels. Allow to zoom-in/zoom-out.
P3️⃣ Survey Form
⇥ Create a wizard type survey form. Add little bit animation, allow user to skip and come back
P4️⃣ Media Player
⇥ Can you create a media player with some good features for your website?
P5️⃣ Quiz App
⇥ Make it random and non-predictive. Add a little animation
2️⃣ Colour Based
P6️⃣ Color Picker
⇥ Allow to pick a colour from some popular colours or, from an existing image.
P7️⃣ Color Generator
⇥ Randomly generate some colour. Or,
⇥ Given a colour, generate other compatible colours.
P8️⃣ Color Gradients
⇥ Take one or, multiple colours and generate various gradient colours.
P9️⃣ Color Palettes
⇥ Show user multiple colour palettes or,
⇥ Given a color, generate a color palette.
3️⃣ Shapes
P1️⃣0️⃣ Popular Shapes
⇥ Generate popular shapes with little bit effects like shadow, rounded corners, gradient colours etc.
P1️⃣1️⃣ Custom Shapes
⇥ For any predefined shape, allow user to customise it by adding corners, curves etc.
P1️⃣2️⃣ Blobs
⇥ Generate blobs, allow user to customise, reshape.
P1️⃣3️⃣ Waves
⇥ Generate random shaped waves, allow user to customise it.
P1️⃣4️⃣ 3-D Shapes
⇥ Can you create shapes in 3-D? 3-D shapes look more real.
4️⃣ Image Related
P1️⃣5️⃣ Size Reducer
⇥ Given an image, reduce its resolution in such a way that its quality is still at a better side.
P1️⃣6️⃣ Background Remover/Changer
⇥ Take any image, can you remove the background?
⇥ Allow user to add its own background colour/image.
P1️⃣7️⃣ Object Addition to Image
⇥ Allow user to add emoji/images/text with some cool effects to an existing image.
P1️⃣8️⃣ Image Cropper
⇥ Allow user to crop and/or resize an image.
5️⃣ Drawing
P1️⃣9️⃣ 2-D Drawing App
⇥ How cool would it be to draw something on a canvas? Build a 2-D drawing app.
P2️⃣0️⃣ 3-D Drawing App
⇥ Can this 2-D app be enhanced to a 3-D app? Try it.
6️⃣ Add-Ons
P2️⃣1️⃣ Chat Services
⇥ Add chat feature. Allow user to send text/media files etc.
P2️⃣2️⃣ Emoji Chooser
⇥ Suggest user some emojis based on a given input text.
P2️⃣3️⃣ GIF Chooser
⇥ Connect with some APIs (like Giphy). Allow user to search and share a GIF.
7️⃣ Authentication and, Authorisation
P2️⃣4️⃣ In-House Auth
⇥ To start, build your own auth service. You can keep it simple.
P2️⃣5️⃣ Auth through 3rd-party
⇥ Connect with Google, GitHub etc for Auth.
⇥ You can use OAuth2, OpenID.
9️⃣9️⃣ Final Words
Question might be coming in your mind, if many of these apps are already built, why should we build on our own?
⇥ To learn.
⇥ You may further enhance it and sell.
Who knows? Every popular product has started from very simple feature sets. Yours' the next. 🤩
1️⃣0️⃣0️⃣ Difficulty Level
P1️⃣ Single Page App ⇨ Easy
P2️⃣ Landing Page ⇨ Medium
P3️⃣ Survey Form ⇨ Medium
P4️⃣ Media Player ⇨ Expert
P5️⃣ Quiz App ⇨ Medium
P6️⃣ Color Picker ⇨ Medium
P7️⃣ Color Generator ⇨ Easy
P8️⃣ Color Gradients ⇨ Medium
P9️⃣ Color Palettes ⇨ Medium
P1️⃣0️⃣ Popular Shapes ⇨ Easy
P1️⃣1️⃣ Custom Shapes ⇨ Medium
P1️⃣2️⃣ Blobs ⇨ Expert
P1️⃣3️⃣ Waves ⇨ Expert
P1️⃣4️⃣ 3-D Shapes ⇨ Expert
P1️⃣5️⃣ Size Reducer ⇨ Expert
P1️⃣6️⃣ Background Remover/Changer ⇨ Expert
P1️⃣7️⃣ Object Addition to Image ⇨ Medium
P1️⃣8️⃣ Image Cropper ⇨ Easy
P1️⃣9️⃣ 2-D Drawing App ⇨ Expert
P2️⃣0️⃣ 3-D Drawing App ⇨ Expert
P2️⃣1️⃣ Chat Services ⇨ Medium
P2️⃣2️⃣ Emoji Chooser ⇨ Medium
P2️⃣3️⃣ GIF Chooser ⇨ Medium
P2️⃣4️⃣ In-House Auth ⇨ Medium
P2️⃣5️⃣ 3rd-party Auth ⇨ Medium
Do you find this 🧵 useful? Please Like ( ❤️ ) and RETWEET ( 🔁 ) the very first tweet.
Let's learn about "border-radius" through illustrations.
Topics are,
1️⃣ Introduction
2️⃣ How to define?
2️⃣.1️⃣ One/Two/Three/Four Values
2️⃣.2️⃣ Percentage Value
2️⃣.3️⃣ Horizontal and Vertical Radius
3️⃣ Other Related Properties
4️⃣ Shapes using border-radius
5️⃣ Conclusion
• The questions covered here are mostly conceptual
• I do not claim only these type of questions are/should be asked during interviews
• For interviews, you should have fundamentals strong. And you should be able to provide solutions to practical problems.
Series: 1️⃣
Level: Beginner
Topics:
1️⃣ Basics
2️⃣ CAP Theorem
3️⃣ Categories
4️⃣ Concepts
⇨ Who should learn?
⇨ Why to learn?
⇨ What should we start with?
⇨ How much is necessary?
⇨ Where to learn?
A comprehensive startup, oops "Starter Kit"
⇩
0️⃣ Let's Talk
✪ What is DSA?
→ DSA stands for "Data Structures and Algorithms"
→ DSA is a subject of study and, practice mostly in "Programming Domain"
→ Unlike popular belief, DSA is not one thing, rather 2 tightly coupled topics.
✪ What is a Data Structure?
A data structure is a way of organising (or, collecting) the data so that it can be used efficiently and effectively.
✪ What is an Algorithm?
An algorithm is a set of instructions for solving a problem or accomplishing a task.