aster.cloud aster.cloud
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
aster.cloud aster.cloud
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
  • Data
  • Programming
  • Software

How to Learn Effectively With Your Personal Programming Projects

  • Ackley Wyndam
  • May 23, 2022
  • 4 minute read

A standard piece of advice for beginner programmers is that you learn most effectively when working on your personal projects. It’s good advice, but you can find yourself struggling to follow it—especially if you are very new to the IT craft. This article acts as a step-by-step guide that you can follow to start on your projects and learn along the way. My examples are with the frontend web development stack—HTML + CSS + JS,—but you can adapt this approach to any technology you’re using.

Pick a simple use case

The first step: don’t try to bite off more than you can chew. It’s common for people to attempt to build things like clones of popular websites, but doing this results in more features than one can realistically develop.


Partner with aster.cloud
for your next big idea.
Let us know here.



From our partners:

CITI.IO :: Business. Institutions. Society. Global Political Economy.
CYBERPOGO.COM :: For the Arts, Sciences, and Technology.
DADAHACKS.COM :: Parenting For The Rest Of Us.
ZEDISTA.COM :: Entertainment. Sports. Culture. Escape.
TAKUMAKU.COM :: For The Hearth And Home.
ASTER.CLOUD :: From The Cloud And Beyond.
LIWAIWAI.COM :: Intelligence, Inside and Outside.
GLOBALCLOUDPLATFORMS.COM :: For The World's Computing Needs.
FIREGULAMAN.COM :: For The Fire In The Belly Of The Coder.
ASTERCASTER.COM :: Supra Astra. Beyond The Stars.
BARTDAY.COM :: Prosperity For Everyone.

If you insist on taking inspiration from existing products, try simplifying it to an extreme:

  • If you build a Reddit clone, build a hard-coded link list (for example, best programming websites) where people can up or downvote, OR a link list where you just add links to a long list
  • If you build an Airbnb clone, make just a static property listing—no booking and no adding new properties
  • If you build an Uber clone, create an order summary page—a ride from point A to point B

Another approach is to work on some cliche examples: a TODO application or blog page. Those can feel repetitive and boring, but at least the use case is well understood, and it shouldn’t overwhelm you.

Sketch the interface

When you’ve selected your use case, take a pen and paper and draw your interface. You should get started with one page or a max of two pages. In the beginning, a paper sketch is perfect; your goal is to iterate quickly, and a low-tech solution works great for it.

Read More  What You Need To Know To Be A Sysadmin

In collaborative projects, people use fancy applications for designs, but they introduce some headaches—you need to install some app, learn the interface, etc., which slows you down. Your sketch here clarifies your thoughts, and once it’s done, you will use it for nothing more than taking a look or two at it while building the interface.

 

Design the data schema

Based on what you are displaying on the various screens, you will need to have some data in your application. Map each value you show or use to a field you’ll have in the data structure.

For our previous examples:

  • ‘Reddit’ will have posts or links, with title, URL, and maybe votes or voteCount.
  • ‘Airbnb’ will have properties with name, photo, description, price, and location.
  • ‘Uber’ will have rides with from, to, and estimatedCost.
  • The TODO app will have tasks with title, description.
  • The blog will have posts with title, body, and publicationDate.

 

Build the interface

With all that preparation complete, you are ready to open the code editor. The user interface is the most tangible and probably the most straightforward part of the project. You will create an HTML file and maybe add CSS if you feel like making your app somewhat pretty.

Your goal is to create what was drawn up before and display it the easiest way possible. Especially if you are adding styling, keep in mind that “done” is better than perfect—don’t spend too much time on it unless CSS and design are your learning priorities.

Read More  Google Cloud Next 2019 | Think Big, Think Global

Create mock data and update the interface to use it

When you are done with HTML with hard-coded data, your next step is to make a dynamic interface. At this stage, you will be adding JS to your project. You can limit yourself to vanilla JS and recreate the HTML with DOM, or you can add a JS framework you are either familiar with or want to learn. You’ll need to create a temporary data structure in a variable and recreate the HTML form JS based on the data in the variable.

 

Add some logic

Once you display dynamic data, you can add some logic to manipulate it. In our simplified example, the logic will be rather simplistic—adding one record to the list or updating one or two values in the existing data.

The main goal here is to make sure our app is alive—so the user can click the interface and changes are made to what’s on the screen. This is mostly proof that you can manipulate data. As you continue working on the example, the logic will become exponentially more complicated. In that case, each added feature has to work with all the existing ones. Enjoy the time when it’s so simple it feels unremarkable!

Store your data

The next step is to set up some kind of persistence for the changes in your data.

 

You can consider the following things:

  • localStorage or sessionStorage – for quick and dirty local testing
  • simple third-party storage – something like Airtable or Google Sheets
  • no-backend storage – firebase or a similar system
  • dedicated backend build – by yourself for more practice
Read More  Rapidly Expand The Reach Of Spanner Databases With Read-Only Replicas And Zero-Downtime Moves

Let me know in this poll if you’re interested in learning more about any of those approaches. I’m thinking about creating articles with examples, and if I know that there is demand, I’ll be more motivated to work on them.

Iterate!

Once you follow all these steps, you should have a somewhat usable application. It will be far from a minimal viable product, but you should have something to show to people who are cheering you on in your studies. If you want to continue working on your project, the next step is to figure out what other use case you want to cover in your app and begin going through the steps again. This time it should be more accessible, and you should be able to skip some steps.

What next?

Feel free to share the results of your experiment! If you liked the approach proposed here, you can continue it with learning data modeling.


For enquiries, product placements, sponsorships, and collaborations, connect with us at [email protected]. We'd love to hear from you!

Our humans need coffee too! Your support is highly appreciated, thank you!

Ackley Wyndam

You May Also Like
Getting things done makes her feel amazing
View Post
  • Computing
  • Data
  • Featured
  • Learning
  • Tech
  • Technology

Nurturing Minds in the Digital Revolution

  • April 25, 2025
View Post
  • Software
  • Technology

Canonical Releases Ubuntu 25.04 Plucky Puffin

  • April 17, 2025
View Post
  • Software
  • Technology

IBM Accelerates Momentum in the as a Service Space with Growing Portfolio of Tools Simplifying Infrastructure Management

  • March 27, 2025
View Post
  • Data
  • Engineering

Hiding in Plain Site: Attackers Sneaking Malware into Images on Websites

  • January 16, 2025
Vehicle manufacturing
View Post
  • Software

IBM Study: Vehicles Believed to be Software Defined and AI Powered by 2035

  • December 12, 2024
IBM and Ferrari Premium Partner
View Post
  • Data
  • Engineering

IBM Selected as Official Fan Engagement and Data Analytics Partner for Scuderia Ferrari HP

  • November 7, 2024
dotlah-smartnation-singapore-lawrence-wong
View Post
  • Data
  • Enterprise
  • Technology

Growth, community and trust the ‘building blocks’ as Singapore refreshes Smart Nation strategies: PM Wong

  • October 8, 2024
nobel-prize-popular-physics-prize-2024-figure1
View Post
  • Data
  • Featured
  • Technology

They Used Physics To Find Patterns In Information

  • October 8, 2024

Stay Connected!
LATEST
  • 1
    Just make it scale: An Aurora DSQL story
    • May 29, 2025
  • 2
    Reliance on US tech providers is making IT leaders skittish
    • May 28, 2025
  • Examine the 4 types of edge computing, with examples
    • May 28, 2025
  • AI and private cloud: 2 lessons from Dell Tech World 2025
    • May 28, 2025
  • 5
    TD Synnex named as UK distributor for Cohesity
    • May 28, 2025
  • Weigh these 6 enterprise advantages of storage as a service
    • May 28, 2025
  • 7
    Broadcom’s ‘harsh’ VMware contracts are costing customers up to 1,500% more
    • May 28, 2025
  • 8
    Pulsant targets partner diversity with new IaaS solution
    • May 23, 2025
  • 9
    Growing AI workloads are causing hybrid cloud headaches
    • May 23, 2025
  • Gemma 3n 10
    Announcing Gemma 3n preview: powerful, efficient, mobile-first AI
    • May 22, 2025
about
Hello World!

We are aster.cloud. We’re created by programmers for programmers.

Our site aims to provide guides, programming tips, reviews, and interesting materials for tech people and those who want to learn in general.

We would like to hear from you.

If you have any feedback, enquiries, or sponsorship request, kindly reach out to us at:

[email protected]
Most Popular
  • Understand how Windows Server 2025 PAYG licensing works
    • May 20, 2025
  • By the numbers: How upskilling fills the IT skills gap
    • May 21, 2025
  • 3
    Cloud adoption isn’t all it’s cut out to be as enterprises report growing dissatisfaction
    • May 15, 2025
  • 4
    Hybrid cloud is complicated – Red Hat’s new AI assistant wants to solve that
    • May 20, 2025
  • 5
    Google is getting serious on cloud sovereignty
    • May 22, 2025
  • /
  • Technology
  • Tools
  • About
  • Contact Us

Input your search keywords and press Enter.