First website Launched.
Tags: webdev, project, csshtml, personalblog
Published: 2020-12-09 05:44:15

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/)
- Pexels(https://www.pexels.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 :
website hosting
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.
   1. 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.
 - https://html5up.net
 - https://startbootstrap.com
 - https://templated.co
 - https://freehtml5.co
 - https://www.zerotheme.com
 - https://www.styleout.com
 - https://www.htnl5xcss3.com
 - https://athemes.com
 - https://themewagon.com    
 - https://html5up.net/future-imperfect

Get some design ideas:
 - https://onepagelove.com/
 - https://dribble.com/

2. 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/