Alpaca image generator website

7660 developers have joined this project.

What you will practice

You will learn how to implement the front end of an image generator using JavaScript, HTML and CSS. The skills you learn in this project will allow you to create image generator websites and allow your users to generate, combine, and download images (such as memes!).

Introduction

At DevProjects, we love alpacas! It's our mascot, and we'd love for you to have your own alpaca profile photo. With that said, this project is not just about alpacas. Allowing users to generate and download avatars are common in many interactive websites. In this project, you'll learn how to create an image generator website that allows users to generate, combine, and download images.

This project should take you approximately 8 hours to complete.

Requirements

A website to let you customize your own alpaca profile picture (or desired image)
Customization panel
Randomize feature
Download generated image feature

The following GIF shows one way to implement the UI. Feel free to interpret the requirements however you'd like!

Suggested Implementation

Get your image assets ready. You could use the alpaca images we provided or use your own ones for your image generator.
Prepare your preferred front end stack. We recommend using tools like Create React App or Vue CLI if you want to have a quick setup.
Create an alpaca (image) preview UI
Add list of buttons for customizing your alpaca (image)
Add randomized alpaca feature

References

Make sure you get the layers of the body parts right. You don't want to end up having your alpaca's mouth being covered by its face! 😅

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

HTML/CSS Angular React JavaScript

Difficulty

easy

Contributed by

Hao-Ping Wang

Front-End Developer @ Codementor

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

Post request free
First 15 mins free

Shorten your learning curve with on-demand programming help

Other recommended projects

easy

Weather forecast website

Make a web app for users to see the current weather and the weather forecast for the next 7 days.

JavaScriptReactHTML/CSS

medium

Create a fast and secure blog using JAMStack

With performance being at the forefront of developers minds, you’ll be creating a site using JAMStack, which means your website will be super fast and will have better security, among other benefits. You’ll be using a Static Site Generator (SSG) to create a personal blog, including featured articles on the homepage, an articles page with pagination to older content, and individual blog posts, all without a database.

JavaScriptHTML/CSS

easy

Build a custom google maps theme

In this project, you’ll be creating and styling a Google Map with a theme and custom marker images. You’ll use Google Cloud Platform to create the map, and also use the Google Maps JavaScript API to load the map on a website. I’ve created a Super Mario themed map here but you are welcome to use any style you’d like!

JavaScriptHTML/CSS