blog photo

How I Built My Website with HTML, CSS, JS, Flask, and Azure Blob Storage 🌐

AbdulKoomson.com is the fifth website I've built—and easily the most functional. It started as a basic static site but has grown into a Flask-powered platform with backend integration using Azure Blob Storage to serve files and projects.

šŸ‘Øā€šŸ’» My Web Development Journey

Several years ago, I took a beginner-friendly frontend development course. It taught me the basics: structure with HTML, styling with CSS, and interactivity with JavaScript.

After that, I built two simple demo websites. Nothing fancy—just enough to grasp the core concepts. Since then, I’ve built five websites. Two are currently live (which I’ll share in an upcoming post), and my first live project went online about three years ago.

šŸ”§ Tech Stack Behind AbdulKoomson.com

Frontend – HTML, CSS & JavaScript

I hand-coded the site using semantic HTML, styled it with custom CSS, and used JavaScript for basic interactivity. It’s responsive, lightweight, and fast—no frameworks or dependencies, just clean markup.

Backend – Flask

I integrated Flask to serve dynamic content and route project file downloads. Flask’s simplicity makes it ideal for personal sites and prototypes, and it pairs well with Python-based workflows.

File Sharing with Azure Blob Storage

To store and serve downloadable resources (like project samples and templates), I use Azure Blob Storage. Through the Azure SDK’s BlobServiceClient, my Flask app connects to Azure and dynamically fetches files for users.

This keeps the site lightweight and scalable—no large files on the server, just clean blob references.

šŸŒ Useful Links

šŸ“˜ Quick Primer: HTML, CSS & JS

What is HTML?

HTML (HyperText Markup Language) is the foundation of any web page. It defines the structure of the content—headings, paragraphs, buttons, forms, links, etc.

What is CSS?

CSS (Cascading Style Sheets) controls how that content looks. It’s responsible for colors, fonts, layout, and responsiveness across devices.

What is JavaScript?

JavaScript adds behavior. Want to show/hide something, validate a form, or update content without reloading the page? JS handles that magic.

šŸš€ What’s Next?

  • Build an admin portal with Flask for blog publishing
  • Pull project metadata dynamically from Azure
  • Launch a public download section for open-source code

🧠 Final Thoughts

Don’t underestimate the power of starting with the basics. HTML, CSS, and JS laid the foundation, and Flask + Azure took it further. This setup gives me full control over both frontend and backend with zero dependencies on heavy CMSs.

If you're just starting your web dev journey, I highly recommend building your own portfolio site from scratch. It’s the best way to truly understand how the web works.

Have questions about integrating Flask with Azure Blob or setting up your own personal site? Reach out anytime.

×

About my mission

Partner with me on a project

Copyright © 2025 PixIntel - Designed by Abdul Koomson.