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

1. Fully responsive design to website

This is a great way to demonstrate your semantic HTML and perhaps use of a CSS pre-processor such as SCSS. You can get free photoshop designs from sites like Freebiesbug or Speckyboy.

🔗 See my implementation of the Cronus business website here

Bonus Exercise!

Take a page or two from a magazine and attempt to recreate the layout through code. Some magazines can be very creative and you can use Google Fonts and images from Unsplash to match as closely as you can. Use Lorem Ipsum (or a similar dummy text generator) so you don’t have to type out all the text. You can also automatically insert Lorem Ipsum using Emmet.

2. A JavaScript game

For my VERY first JavaScript project, I made this simple quiz below. JavaScript was so confusing for me, jumping into something difficult for my first solo project would probably have made me quit.

🔗 Play “Your New Best Forest Friend” here
/* Pseudo Code:
1. User clicks on “Let’s Get Started” button
2. Page scrolls down to the first question.
3. User selects answer.
4. Icon next to answer changes colour to show it’s been selected.
5. User clicks on “Next” button.
6. Page scrolls down to next question.
7. If nothing has been selected, error output “Please pick an answer!”
8. Repeat steps 3 - 7.
9. User clicks “Meet my new best friend!”
10. If user has scrolled down without selecting an answer somewhere and clicks on this button, error output “Please answer all the questions to find your new friend.” (Put required = true)
11. Page scrolls down to show new friend, dynamically.
12. Button underneath to re - start(clears all fields, back to top of page): “I want a new forest friend”
Logic Notes:
- Use.filter, .attr and.map to grab animals with correct name class.
- Function to say that if .bear.length > .rabbit return .bear
- If class A.length === class.B.length return random
*/
🔗 Play “Dragons vs Unicorns” here
🔗 Play “Word Wiz” here — This was a pair-programming project and used an API, which you can read about further down.

⚡️ Game App Ideas

  • Tic-tac-toe
  • Hangman
  • Random compliment generator
  • Memory games

3. Something using an API

In your development career, you’ll almost for sure be working with APIs (Application Programming Interface), unless you’re in a very front of the front-end role.

⚡️ 10 Beginner-friendly APIs

  1. The Official Joke API — Get a random joke or 10. You can also sort them by types!
  2. Where the ISS at? API — Track the location of the International Space Station.
  3. Poké API — A great one for all the Pokemon fans!
  4. Numbers API — Learn interesting facts and trivia about numbers.
  5. Datamuse API — A word-finding query engine, useful for rhymes and synonyms.
  6. Shibes Online API — Returns random pics of ship dogs, cats or birds!
  7. The Dummy API — Provides fake user data including photos, comments and posts.
  8. Weather API — Your one-stop shop for making a weather app.
  9. Dictionary API — Get word definitions, etymologies, audio pronunciations, synonyms, antonyms and more.
  10. Open Trivia API — A range of trivia questions across different categories and difficulty levels.
🔗 Get your customized newspaper here
  • You might need to register your app so they can confirm it’s for non-commercial use.
  • There will most likely be restrictions on the queries allowed per day. If it’s super limited, a trick is to save the data you get back in a file and hit that up instead while you’re developing your app.

4. BONUS! A CRUD application

NOTE: Although I built some CRUD applications as exercises, I ultimately didn’t end up adding one for my front-end portfolio. So that’s why this is a bonus fourth project!

  1. READ entries — i.e. get a person’s information from the database and display it on the UI
  2. UPDATE the entry — ie. update the person’s birthday
  3. DELETE the entry — ie. delete the person
 | Operation |   | HTTP Protocol |
|-----------|---|---------------|
| Create | → | Post |
| Read | → | Get |
| Update | → | Put |
| Delete | → | Delete |

⚡️ 6 CRUD App Ideas:

  1. Recipe app
  2. Event/people management app
  3. Bookclub or library app
  4. Inventory system
  5. Cinema/movie list
  6. Online store

Bonus tip!

For all your projects, get feedback on your code from someone more experienced. This is an incredible growth hack to improve your coding skills faster.

Leave a Comment