Online courses hide the most important part of web dev: what to do when it’s just you, an idea, and your IDE. Todo-list-sized projects are fine, but anything more complicated? It can be overwhelming.
One of the surprisingly hardest parts is HTML. Not the syntax of it, but how to effectively create a UI for your idea.
I learned a technique early on that will take a design and turn it into a near-perfect HTML skeleton for your app.
Pen and paper to the rescue
The approach is very visual. I use pen and paper in real life, but use an iPad here to record the screen:
How can we use this approach for our own apps when we don't have a design?
Feel free to reach out to me if you get stuck on this part.
To come up with a prototype design, list out the features you want for your app. Then, scratch out a design with pen and paper until all the features are covered by your prototype.
Once you have it down, use the same method shown in the video to come up with the HTML skeleton.
...but it doesn't look pretty?
Steal the aesthetics! Don’t use it for commercial gain, but find a design you like and just borrow it. Discord has a nice dark-theme design, AirBnB makes great use of white space for a professional feel, search Dribbble for user-submitted design inspiration, Bootstrap released some nice themes, and maybe even look into Tailwind.
Aesthetic can be a big draw, but the most important part when building out practice projects is nailing the functionality. Design skills slowly seep in over time. Thankfully, design ain't our job anyways!
Top comments (0)