How to design & develop your portfolio website as a beginner.
Hello developers! First of all, thank you for visiting my story. Today I am sharing how to design and develop your portfolio website. I am also a beginner-level developer, but I think I to share my experience and what I learned to date about Web development. It will help beginner-level developers like me. In this digital era, portfolios will play an important role. We can show our skills to the world.
Before starting to develop our portfolio website we need to require some knowledge or basic idea about what is web development and its technology such as HTML, CSS, and JavaScript. I explain all this simple way with resources.
When we want to design & develop any website or web app from the beginning there is a process that can be followed for a good working website and also a user experience perspective the key step will be given below.
- Design and Planning
- Development
- Testing
- Deployment
Design & Planning
This is our first step while developing our portfolio website. Through this step, we can decide on the design for a website. How our website looks like. We need to decide on the color, text formatting, fonts that we want to be used, and content for our website. In my opinion as a beginner-level developer, our resume content will be sufficient for website content.
For the design, we can take inspiration from the dribble website, Figma which is used as a tool for our design purpose. One another tool is Canva.
Development
This is our second step after completing the design process. In this step, we can write programs or code for our website as per our design. As a beginner isn’t necessary at all to follow strict design patterns. We can also write code at our convenience and with our knowledge. Different IDE tools can be used for development purposes such as Visual Studio Code (VS Code), Eclipse IDE, and much more. As per my experience, I suggested VS code by Microsoft this is good for the beginner level developer. We can also use Boostrap open-source CSS framework for fast development in our project.
Starter basic structures in VS code.
Reference for coding/programming development.
Testing
This is the most important phase after completing development. We don’t go deep inside the testing topics we need to perform very basic tasks regarding our website on a local host. We need to inspect our site in a browser. How it looks at different breakpoints. We check whether our media queries work properly or not on a different device. We need to assure about we did not face any errors or issues in our code and work smoothly. It also helps us use SEO on our website we can also check our website performance and other properties using Google PageSpeed Insights.
Deployment
Deployment is the process where the website gets working live on the internet we combine all our files in the folder and this is the last process. For hosting purposes, we need to upload our code to the root folder of the domain. We can use GitHub open-source collaboration tools for our both purposes through the public repository.
Have a look at my portfolio website that I build from the scratch using HTML, CSS, Basic JavaScript, and Bootstrap 5.
This is original content written by Dnyanesh Kolhe on 13/12/2022.
All of the links and images that are used in this story are given for only reference and learning & not included in any ads or promotions. It is also available publically and it belongs to their respective owners.
Thanks!
