DEV Community

loading...
Cover image for First website Launched.

First website Launched.

Amber Bdr. Kharka
Web designer, Web developer
Updated on ・2 min read

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

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.

Get some design ideas:

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

Discussion (10)

Collapse
hunzaboy profile image
Aslam Shah

Welldone and good luck for then next 10. For your second project you have done very good.

Keep learning

Collapse
amberbdr789 profile image
Amber Bdr. Kharka Author

Thank you so much. I will try my best. Please visit my project and spend 30s, even 1 feedback means a lot to me. 💗

Collapse
blossom profile image
Blossom Babs

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?

Collapse
amberbdr789 profile image
Amber Bdr. Kharka Author

Thank you for comments. Now I updated the "domain name" check once, it will work. And I used SASS css frame work.

Collapse
szhabolcs profile image
Nagy Szabolcs

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 😄

Collapse
amberbdr789 profile image
Amber Bdr. Kharka Author

Thank you for your comments. Surely i will consider your suggestions..

Collapse
alexandergekov profile image
Alexander Gekov

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.

Collapse
amberbdr789 profile image
Amber Bdr. Kharka Author

Thank you. I will improve that..

Collapse
yeich profile image
Yannick Eich

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 ^^

Collapse
amberbdr789 profile image
Amber Bdr. Kharka Author • Edited

Thank you. What about figma ?? We can do in figma also nah ??

Collapse
yeich profile image
Yannick Eich

You can use whatever you want.

I just want to say, that i would prefeer XD.

Collapse
gautham495 profile image
Gautham Vijayan

Change the typography.

How much time did you take to develop this website?

But the layout is good.

Collapse
amberbdr789 profile image
Amber Bdr. Kharka Author

Thank you for comments, i will surely work on Typography. I took around 140 good hours.

Collapse
gautham495 profile image
Gautham Vijayan

You can also see my portfolio for typography Gautham's portflio