Designing your first personal website

Ever since I decided to make my own personal website, I have been struggling with the design a lot.

At first, it was about a lack of knowledge. I didn’t understand what is meant by mobile-first and how you achieve that. The concept of padding vs. margin was weird to me. Basically, I knew nothing about designing a website. It is a shame I don’t have an image of my first website, it looked so bad, it was funny.

What helped me the most is looking at other websites. To be more precise, looking at the HTML/CSS code of their website using “Element Inspector.” I strongly recommend anyone interested in building websites do this. Just inspect websites you like and try to implement some cool features on yours.

One problem with this approach is mimicking too much. When I liked a website, I liked both the design and the content. So when I was making mine, I always thought, “Ooh, that’s cool; I need that feature too.” I ended up doing too many things, and the website became bloated. I made a bunch of features I did not use.

If you are starting in the world of web development by building your personal website, here is my recommendation. Have four types of pages (that way you don’t have to worry about design too much):

• Home
• About
• Blog (all writings)
  • Actual post

That’s it, you don’t need more to begin, it will make your life easier and more manageable. When you are happy, add another page, for example, “What am I up to Now” page or book notes, or whatever else your heart desires.

Then in the future, when you realize that you need more features on your website, you can easily add them. The difference is that by then, you are much more experienced.

Finally, however experienced you are, don’t add too many things that will require regular maintenance unless you are 100% you are committed to it. For example, when I created my first Django website, I added the following:

• a Blog
• What am I up to Now (Derek Sivers movement)
• What I learned This Week
• Book Reviews
• Projects
• Photography

These are only the ones I can remember. I just loved the idea of having that space to fill, but pretty quickly, it became overwhelming, and I ended up not doing anything. Only once I’ve started removing things, I began to use other features.

I think this is a good approach to life also. Don’t try to take on too many things at once.

Only add more things when you already have something to show for, and only if you know, you will keep it going. Right now, I only have the Blog and the Now page, where the latter is updateCreatedd once a month. This way, I’m not pressured to do other things and can focus on something more substantial. Only add more things when you already have something to show for, and only if you know, you will keep it going. Right now, I only have the Blog and the Now page, where the latter is updateCreatedd once a month. This way, I’m not pressured to do other things and can focus on something more substantial.

In the future, I want to add a photography page, because it is something I want to become better at, and am currently learning. However, unless I am consistent with it, I won’t “burden” myself by adding it to my website.

Conclusion

If you are just starting on a Web Development path and are starting with your website, congratulations, you have a fantastic road ahead of you. Not to get discouraged pretty quickly, stick to simple things.

1. Keep content to a minimum:

• Have a welcome page (home)
• Have a page where you talk about yourself (about)
• Create a blog with a list of all the posts and a detailed view for each post (blog)

2. Keep your design simple.

• Start with pure and simple CSS. Make sure it looks good on the phone first.
• Move one step at a time.

3. Add new things as a means of learning something new.

• Learning new things won’t become any easier (in a good way), but the base things you did before will become a breeze.

I hope this was at least a little bit useful. Actually, I hope this made at least a little bit of sense.

If you have any questions or comments, feel free to shoot me a message at one of the links on the about page.

Thanks for reading.