7 Mistakes to Avoid in Your First Web App

7 Mistakes to Avoid in Your First Web App

From designing to deploying, try your best to avoid these mistakes. It took me two months to design it in Figma, code the front end using SASS without any frameworks (I still don’t like Bootstrap, but that’s a discussion for another day), develop the back end using Django, and deploy it on Heroku. Why did a single-page portfolio take me two months? Because I spent most of my time fixing code.

I created my first fully functional website a few years ago. It was a portfolio for a friend:

Image for post

Content changed for privacy.

It took me two months to design it in Figma, code the front end using SASS without any frameworks (I still don’t like Bootstrap, but that’s a discussion for another day), develop the back end using Django, and deploy it on Heroku. Why did a single-page portfolio take me two months? Because I spent most of my time fixing code.

Looking back at the project, these are the things I would have done differently.


Designing in Figma

1. Use components instead of copy/pasting elements

Figma has a powerful feature called components. It allows you to make copies of repeated elements so they stay connected, making it easier and faster to change them.

Without setting components, I had to resize each element individually:

Image for post

Changing each element separately is time-consuming and inefficient.

The efficient way is to convert it into a component. Select the element and click the “Create Component” action in the toolbar. Next, hold the alt key and drag the component to create instances:

Image for post

To create a component, select the element, click “Create Component,” hold the alt key, and drag.

Once a component is created, any change made to the parent component is reflected across all child instances:

Image for post

Resizing and reshaping a component saves time and ensures that all our instances are identical.

software-development programming front-end-development figma web-development amazon web services

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

ERP Software Services, POS Software Services , Application Development

Vinew Technologies focused majorly over ERP Software services and POS Software services, Web & Application development services & Woo commerce and Wordpress easy-to-use, multipurpose social media plugin for WordPress.

Offshore Software Development - Best Practices

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

Web Design and Development Services

Get Best out from Web Design and Development Services from Vinew Technologies,We have a dedicated team of experienced and knowledgeable web developers, designers and testers. Therefore, we have proficiency in analyzing, developing and designing the necessity of intricate Website Development projects.

More Front End Developer Newbie Mistakes

HTML and styling issues we can fix. It’s easy for developers to make mistakes, but we can prevent them if we know them beforehand. In this article, we’ll look at mistakes that newbie front end developers make that we can all avoid. More Front End Developer Newbie Mistakes

Top 6 Productivity Tools for Front-end Developers

Today I wanted to share with you the tools I daily use to increase my productivity as a front-end developer. 6 tools to increase your productivity as a Front-end developer.