Webshop - Portfolio

A Simple Way to Make CSS

Identity

WebShop is a web application that allows users to design and visualize the look and position of elements and generate the CSS properties of it.

Problem

It is hard to visualize the position of an element from pure CSS code and it is even harder to write the design you have on your mind in code.

Consider you want to make a simple shape made of elements. With CSS, it can be incredibly hard to visualize the position of each element and the size of each element. Newcomers might not understand how large 100px or 500px is or where this element is relative to others.

Solution

What programmers need is a simple website that allows them to visualize the position and size of elements and have a simple GUI to drag, resize, and position them to their will. If you want a large rectangle next to 2 small rectangles, this would give the positions for that.

The users will also be able to set what the positions and size are relative to. For example, a design of multiple elements can be always the same size relative to each other, but in the middle relative to the entire screen. This can be complex to code in CSS but simple with a GUI.

Target Market

People who understand CSS but is not yet used to the size of the pixels and wish to visualize their website first

Competition

There are many website builders, however this would be unique as it isn't supposed to be a full website maker but a simple CSS generator that allows the user to see the positioning and size properties. Most website builders force users into already made element templates allowing for little customization.

Revenue Streams

Most revenue will come from advertisement from the website as this will be a simple and free service.

Marketing Activities

Advertising on various social media of CSS tutorials will spread the information the best as users who are interested in CSS will be the most likely to use this website.

Expenses

The only expense will be the cost of the domain name and hosting.

Team and Key Roles

The team will consist of 2 people, one for the front-end and one for the back-end. The front-end will be responsible for the GUI and the functionalities of the website and the back-end will be responsible for the CSS generation.

Milestones

Project Start - November 18, 2022 Geneartion Prototype - January 3, 2023 Website Prototype - March 12, 2023 Project Completion and Publication - April 30, 2023