Recently I launched static educational website in netlify, https://developmentweb.netlify.app/. it was my second project but first live project. Let me share some of my pitfall, lesson learned and I will share some of the websites that really helped me. While doing project i always thought I was on 1st gear but somehow i finised this project.i created 3 pages educational/personal website. 90% of project design I did it myself. I love a lot to listen suggestions, ideas and questions.
Step 1: I referred around 20 website to get rough ideas of website development but I took few ideas from them. I made the rough sketch of my project in Microsoft word(this is very bad idea and I didn`t knew any prototyping software). Firstly I wrote HTML code and inserted some images also. Mostly I was writing CSS articles in my website, so I referred css-tricks, w3schools, CSS and smashing magazine and tools as follows.
- Code editor : Visual Studio Code.
- Browsers used : google, brave.
- Prototyping ( writing rough ideas about project) : Microsoft word (very bad idea).
Step 2 :
I designed icons and images in figma. And i also downloaded high quality images from pexels, unsplash, pixabay, and Freepik. I downloaded icons from Flaticon, Font Awesome, and google icons ( https://material.io/).
- Figma : graphic design.(https://www.figma.com/)
- pixabay (https://pixabay.com/).
- Unsplash (https://unsplash.com/).
- Flaticon (https://www.flaticon.com/).
- Font Awesome ( https://fontawesome.com/).
Step 3 :
In this step there was problem in responsive design. I joined around 10 web developers groups in facebook and stack overflow so that I have a better platform in getting help.Finally project got completed. I took 140hours to complete the project.
step 4 :
I freely used netlify(https://www.netlify.com/) to host my static website. And i did website testing in GTmetrix (https://gtmetrix.com/) and Google PageSpeed (https://developers.google.com/speed/pagespeed/insights/).
Mistakes : I think these are my mistakes and lesson I should learn from this project.
- I spend lot of time to make website perfect but i failed. So best way is to refer some freely available templates and get ideas from them as a begginers. Include simple design and make website responsive. Some freely available website templates are.
Get some design ideas:
- Before actually start doing project, prepare prototype of the project. one of the best tool is figma(https://www.figma.com/), and using microsoft word for prototype is way out of topic. and GITHUB to upload the code.
What I appreciate about this project :
- The images(vector) I used are high quality and mostly I made myself.
- Finally I succeeded but still there is room for improvement.*
Feedbacks, suggestions, and discussions is most welcome. https://developmentweb.netlify.app/