3 Beginner Project Ideas to Get Started on Your Front-End Portfolio | by Annie 🦄⚡️ | Mar, 2022

1. Absolutely responsive design to web site

This can be a nice approach to display your semantic HTML and maybe use of a CSS pre-processor similar to SCSS. You may get free photoshop designs from websites like Freebiesbug or Speckyboy.

🔗 See my implementation of the Cronus business website here

Bonus Train!

Take a web page or two from {a magazine} and try and recreate the format by means of code. Some magazines may be very artistic and you need to use Google Fonts and pictures from Unsplash to match as carefully as you may. Use Lorem Ipsum (or the same dummy textual content generator) so that you don’t need to kind out all of the textual content. You can too robotically insert Lorem Ipsum using Emmet.

2. A JavaScript recreation

For my VERY first JavaScript undertaking, I made this easy quiz beneath. JavaScript was so complicated for me, leaping into one thing tough for my first solo undertaking would in all probability have made me give up.

🔗 Play “Your New Best Forest Friend” here
/* Pseudo Code:
1. Consumer clicks on “Let’s Get Began” button
2. Web page scrolls all the way down to the primary query.
3. Consumer selects reply.
4. Icon subsequent to reply modifications color to indicate it’s been chosen.
5. Consumer clicks on “Subsequent” button.
6. Web page scrolls all the way down to subsequent query.
7. If nothing has been chosen, error output “Please choose a solution!”
8. Repeat steps 3 - 7.
9. Consumer clicks “Meet my new finest buddy!”
10. If person has scrolled down with out choosing a solution someplace and clicks on this button, error output “Please reply all of the questions to search out your new buddy.” (Put required = true)
11. Web page scrolls down to indicate new buddy, dynamically.
12. Button beneath to re - begin(clears all fields, again to prime of web page): “I desire a new forest buddy”
Logic Notes:
- Use.filter, .attr and.map to seize animals with appropriate identify class.
- Perform to say that if .bear.size > .rabbit return .bear
- If class A.size === class.B.size return random
🔗 Play “Dragons vs Unicorns” here
🔗 Play “Word Wiz” here — This was a pair-programming undertaking and used an API, which you’ll examine additional down.

⚡️ Sport App Concepts

  • Tic-tac-toe
  • Hangman
  • Random praise generator
  • Reminiscence video games

3. One thing utilizing an API

In your growth profession, you’ll virtually for certain be working with APIs (Utility Programming Interface), except you’re in a really entrance of the front-end function.

⚡️ 10 Newbie-friendly APIs

  1. The Official Joke API — Get a random joke or 10. You can too type them by sorts!
  2. Where the ISS at? API — Monitor the placement of the Worldwide House Station.
  3. Poké API — An excellent one for all of the Pokemon followers!
  4. Numbers API — Be taught attention-grabbing information and trivia about numbers.
  5. Datamuse API — A word-finding question engine, helpful for rhymes and synonyms.
  6. Shibes Online API — Returns random pics of shibe canines, cats or birds!
  7. The Dummy API — Offers pretend person knowledge together with pictures, feedback and posts.
  8. Weather API — Your one-stop store for making a climate app.
  9. Dictionary API — Get phrase definitions, etymologies, audio pronunciations, synonyms, antonyms and extra.
  10. Open Trivia API — A variety of trivia questions throughout completely different classes and issue ranges.
🔗 Get your customised newspaper here
  • You may must register your app to allow them to verify it’s for non-commercial use.
  • There’ll most definitely be restrictions on the queries allowed per day. If it’s tremendous restricted, a trick is to save lots of the info you get again in a file and hit that up as a substitute whilst you’re creating your app.

4. BONUS! A CRUD software

NOTE: Though I constructed some CRUD purposes as workout routines, I finally didn’t find yourself including one for my front-end portfolio. In order that’s why this can be a bonus fourth undertaking!

  1. READ entries — ie. get an individual’s data from the database and show it on the UI
  2. UPDATE the entry — ie. replace the individual’s birthday
  3. DELETE the entry — ie. delete the individual
 | Operation |   | HTTP Protocol |
| Create | → | Submit |
| Learn | → | Get |
| Replace | → | Put |
| Delete | → | Delete |

⚡️ 6 CRUD App Concepts:

  1. Recipe app
  2. Occasion/folks administration app
  3. Bookclub or library app
  4. Stock system
  5. Cinema/film record
  6. On-line retailer

Bonus Tip!

For all of your initiatives, get suggestions in your code from somebody extra skilled. That is an unbelievable progress hack to enhance your coding expertise sooner.

More Posts