DEV Community

Paul
Paul

Posted on

how to create a good looking frontend project from zero for beginners

frontend area in web development is the best choices for developers to create user interface and user experience, and it is the most important party in wed development

frontend includes two main parts frontend design which refers to designing and frontend development which refers to user experience and interactiveness

before you have to create the design for how your frontend will look like
the tools that can help to design the mockup of your website or app and the most popular one are
figma.com
inivision studios
adobe XD and more
if you have a background in graphic design, this will be same as using photoshop or illustrator but it also simple to learn them if you are new in designing
i personally prefer figma cause its easy to user and it can be used by a team and you can simply access anywhere

checkout this tutorial for how to use figma (https://www.youtube.com/watch?v=3q3FV65ZrUs)[a free UI design prototyping tool]

once you have made your design with figma or any other tool of your choice
you can then start implementing your design in code using HTML CSS
make sure you are following your prototype mockup in your HTML and CSS

after everything is done now you can start applying user interactivity in your UI using Javascript

you can use vanilla javascript or use one of best frontend libraries for creating frontend in javascript like React Jquery or frameworks like angular or vue

once you pick the technology you are using to create your frontend development then you can start implementing user interactivity in you frontend design you have already created
make sure you don't add too much like to much animation cause as they say " too much of every thing is always bad " keep it simple and improvement can be done later

once you are done now you can share you frontend product to friends, co-workers, or in a market place to review and give feedback

collect all the feedback and implement them to your project
and that is how you create a frontend from scratch to finish

Top comments (0)