Categories: UI

Recipe for Non-UI Developers to Build Great Web UI

The article presents recipe for non-UI developers to build and serve great WEB UIs for their next Web projects. If ever you wanted to break free from your dependency on UI developers for small changes in UI, you may want to read the following. If you are a UI developer and believe that I have missed on one or more aspects, which I admit I may miss, please shout out loud.

Ingredients
  1. HTML concepts including DIV (Key ingredient)
  2. CSS basic concepts
  3. Javascript basic concepts
  4. JQuery
  5. Bootstrap

 

Preparation Time (2-3 Weeks)

If focused for an hour a day on an average with possibly few extra hours in the weekend :-), one could get hang most of the above in as early as 2-3 weeks time to be able to become ready to start building some good UI. The best part is that there are online playgrounds which would help you get started in no time. My personal favorite is http://www.codecademy.com/. They have the online playground to learn above all of the above except Bootstrap.

  1. HTML/CSS Concepts – 7 Hours course time (URL: http://www.codecademy.com/tracks/web)
  2. Javascript – 10 hours course time (URL: http://www.codecademy.com/tracks/javascript)
  3. JQuery – 3 hours course time (URL: http://www.codecademy.com/tracks/jquery)

 

Preparation Method
  1. Download Bootstrap from http://getbootstrap.com/
  2. Learn basic concepts. It should not take more than an hour or so if you are done with your preparation.
  3. Check code samples of UI widgets/components on getbootstrap.com website. They provide copy and paste code to get started quickly.
  4. Get Started with Hello World by using Bootstrap PageHeader or Jumbotron classes.
  5. Get hands-on with building forms using Bootstrap. Your concepts around HTML (Div) and CSS (id/class) would come to great help.
  6. Get hands-on with handling simple Javascript events such as click event and processing HTML DIVs using JQUERY
  7. Optionally, get hands-on with processing AJAX requests/response using JQUERY
  8. Gather your learning and keep practicing for few weeks
  9. Serve Hot whenever required. 🙂

Try and let me know if you were able to serve Great UIs to your end users and if they loved it. All feedback are warmly welcome! Enjoy your cooking. 🙂

 

[adsenseyu1]

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar
Tags: UI

Recent Posts

Retrieval Augmented Generation (RAG) & LLM: Examples

Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…

4 days ago

How to Setup MEAN App with LangChain.js

Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…

1 week ago

Build AI Chatbots for SAAS Using LLMs, RAG, Multi-Agent Frameworks

Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…

2 weeks ago

Creating a RAG Application Using LangGraph: Example Code

Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…

3 weeks ago

Building a RAG Application with LangChain: Example Code

The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…

3 weeks ago

Building an OpenAI Chatbot with LangChain

Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…

3 weeks ago