Steps to design and develop a fully functional web apps

Define your project

• Start by defining the goal of your project. This can be showing your portfolio to the world, selling an e-book, building a blog, etc.
• Also, define your audience. Ask yourself: which is the typical user that will visit my website?

Plan out everything

• Once your project is defined, plan your content carefully. This includes text, images, videos, icons, etc.
• Brainstorming with visual hierarchy. Always focus on the mobile-first approach. It means that you should design for the content, instead of designing a webpage and then filling it with a mobile-first design.
• Define navigation.
• Define the site structure. You can draw a sitemap in this step if we're talking about a bigger project.

Sketch your ideas

• Then, get the ideas out of your head. And with that I mean you should sketch your ideas before you start designing. It will help you explore ideas and create a concept of what you want to build. Using a pencil and paper is a great way of quickly retaining your valuable ideas.
• Make as many sketches as you want, but don't spend too much time perfecting anything. Once you have an initial idea, you can concentrate on the details when designing in markup/template/style languages.

Design and develop your website

• After sketching, start to design your website using all the guidelines and tips you've learned in the web design section.
• You'll do that using HTML and SCSS. There are so many website text editor and tools these days. Pick the right ones. It also saves you tons of time.
• Write clean and reusable codes. This habit will come in handy if anyone else looks at your code.

It's not done yet: optimisation

• Before you can launch your product for the world to see it, we have to optimise its performance in terms of site speed - Lighthouse.
• You also need to do some basic search engine optimisation (SEO) for search engines.