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.
- 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/
Top comments (14)
Welldone and good luck for then next 10. For your second project you have done very good.
Keep learning
Thank you so much. I will try my best. Please visit my project and spend 30s, even 1 feedback means a lot to me. 💗
I am unable to access the website, but you highlighted some great things you learnt while building. That's awesome!
I see you are already familiar with Figma, you can use it for prototyping also. Responsiveness can be tricky. Did you use any frameworks?
Thank you for comments. Now I updated the "domain name" check once, it will work. And I used SASS css frame work.
Welcome to the world of web design! I really like the fact that you made everything yourself!
Prototyping in word is not bad, in the sense that it can be done. But you should try Figma since you're familiar with it (I personally like Adobe XD). Also, you could even try pen and paper, I usually start there.
I would suggest that for your next project you could use inspiration from other websites/designs, rather than starting with a template. This way you can experiment with your own ideas more freely and can do things by trial and error, which at least for me works best. Also don't be ashamed to use any css/js frameworks in the future. I surely did when I started out and it shouldn't be the case 😅
As a last note, keep up the good work, and I hope you all the best! Happy coding!
Ps. You can change the subdomain of the netlify site to something like my-resources.netlify.app in the settings 😄
Thank you for your comments. Surely i will consider your suggestions..
Good Job. The layout is good, but one thing that bugs me is the black text with the image background. The contrast is very little and hard to read. Maybe use white text there or have the text in some sort of lighter container.
Other than that, I wish you a lot of success.
Thank you. I will improve that..
Not bad for your second Project.
For the Prototyping i would use "Adobe XD" or somthing like that. (Its free)
Keep learning and i hope to see some more Projects ^^
Thank you. What about figma ?? We can do in figma also nah ??
You can use whatever you want.
I just want to say, that i would prefeer XD.
Change the typography.
How much time did you take to develop this website?
But the layout is good.
Thank you for comments, i will surely work on Typography. I took around 140 good hours.
You can also see my portfolio for typography Gautham's portflio