Recently was questioned on what would be a good way to start flexing the skills for development in UI for a beginner. Having mentored UI developers, who just started on the learning journey in the past, wanted to list out a few learnings and tips.
Prerequisite:- Create a GitHub repo or some way of uploading your code and learning, to be showcased.
Step #1:- Your Intention should be clear and simple
Always the basic question is the hardest. Sample questions to get a more clear vision.
Q1 — Do You want to be a UI developer or a Full stack developer?
UI developer is a frontend engineer responsible for human interaction. A full-stack developer needs to be both. A frontend and a backend engineer with the backend technologies mainly being responsible FOR CRUD operations plus empowering the Human interaction. So what is your ultimate goal and vision for yourself?
If you intend to develop a UI portfolio to showcase your knowledge and strengths for a future prospective career, please read on, or else this is not for you.
Q2 — What are you trying to learn? List your technologies
You reading this article, the assumption is that you already have an idea of what technology you want to build your first project in. If not please do your research by asking questions in any LinkedIn groups for Front end technologies and popular ranking trends on google for UI development. Narrow it down to ONE only to start with.
Step #2:- Is an API needed for the UI development.
In a real-world application or service, Yes you need an API for various operations and functionality. But for a first UI project, can do without it too. The first UI project is about learning the technology and showcasing the UI skills learned along the way. so don’t worry about APIs and data.
Create your own mock data.
Even for the development of any UI feature in real-world applications, any experienced UI developer would tell you that they start with mocking data. Yes the integration between UI and API is a crucial part of application development which everyone eventually learns but do not worry about that for developing a UI project.
A couple of options to accomplish this.
Here is an article on using JSON-server to build a rest API
2. local-mocks. Create a local-mocks folder and create the JSON data needed in that folder and load it up using the npm module require. Here is a tutorial on the same.
const customerData = require('../local-mocks/customerData.json');Go Agile
even for your own project, go agile. Build a minimum viable feature first and keep on piling features on top of it. You can start with one component in an application and then keep adding more functionality and include interaction with various components as you go.
Step #3:- mimic a UI that you have used extensively in the past and have domain knowledge.
Here is where most people go wrong. don’t try to chew more than you can swallow. You are trying to build an APP or functionality to showcase your skills not create the next rockstar APP.
Examples that can be started with minimum and build upon in time:-
- Load a catalog of products to mimic e-commerce. Play around with the display, rating, search, comparison grids of the products.
- Build an HR employee website with a login, details, calendar, merits.
- An event management website to create events, send communications to people, add maps of the locations, locate event helpers.
Step #4:- Learn your basics
The basics of any modern web development are still the most important to be able to build a career on. Spend time on them in this journey. Few examples to get the idea:-
- Build a menu to your UI using any popular CSS frameworks. Bootstrap is still the most popular in the industry.
- Using transcompilers such as Babel to make sure the UI loads in the older browsers.
- Programming with various browsers to see the cross-browser impact on any feature.
- CSS Minified or Compressing concepts.
- CSS Scripting (Sass).
Conclusion:-
Concentrate on learning and showing your strengths by a Github repo of your code and features at a minimum. You do not need a full-fledged website to showcase your portfolio.
