12 Steps to Build your Website

12 Steps to Build your Website

Applying for a job?

It’s very common to see job postings saying that you should have years of experience or any proof of experience. But what if you’re just starting out but you know you can do the job?

What will you do?

So let me tell you what I did.

The website, eiringonzales.com, serves as my online portfolio that anyone can look into. This website is my experience. This website is my work experience. Its goal is to just show my skills and my evidence that I can and I will do it.


How I Started Creating Website

Did you already stretch your fingers and open your text editor?

Oops! No, no!

You don’t want to code without knowing what to do.

1. Search for inspiration.

So, what I suggest is to open your favorite search engine. Search for websites that you like. Get inspiration from those websites. Jot down the features your website would have.

I keep on staring websites of Marie Forleo, Adham Dannaway and Marco Grimaldi. I want that glossy black and white. It feels modern and classy and yet, still simple.

2. Create your sitemap.

Sitemap of Eirin Gonzales' Website

You now have a feeling in your mind.

So create your sitemap just like in the image. I wrote my domain name and put the web pages under it.

My services page is also my home page. I removed home in my menu because for me, home page is the summary of your whole website. And I prefer to separate things so that viewers will focus on my one thing. And I put it that way so even average computer users can understand and navigate through my website easier and faster.

3. Create your mockups.

And before I turn to my text editor. I sketch out my ideas on what each web page would look like. I was just drawing from random what feels good. And these sketches are not yet final. And then, I used Photoshop to turn them into digital mockups.

So don’t worry even if you’re not yet sure. You can still change it along the way.

Mockups of EIrin Gonzales' Website

4. Choose colors you’re going to use.

I searched about color palettes in Google. And I came into this Canva article. I took screenshots of color palettes I feel like. But in the end, I still didn’t use it. I used black and white as my basic colors.

Don’t worry if you change your colors when you’re already coding. It’s perfectly normal. I also discovered some colors I used when I was already designing using CSS.

5. Get your fonts.

I also search for web fonts but I can’t afford them yet so I use Google Fonts which is free. I ended up using these four.

Fonts of Eirin Gonzales' Website

  1. Pathway Gothic One – for headings and buttons
  2. Kaushan Script – for emphasizing key words in the headings
  3. Playfair Display – italicized for the word, Hi
  4. Lora – for reading purposes

They are also very easy to use. You just have to add the fonts and the styles you’re going to need. It’s like putting groceries in your push cart. And in the end, you’ll copy the link tag and paste it in your code.

6. Need free, high-resolution photos?

Go to Unsplash. It is a website that offers free high-resolution photos. I used them as my background images. I chose photos that resembles the same theme. And it’s really nice because you can do what you want even if it’s for commercial use.

Before I use these photos, I still edit them to reduce their size.

So, it’s coding time!

7. Markup your content.

This is now the time to open your text editor. Remove the design part in your mind right now. Just write the content of your website.

Make your markup semantic.

Semantic means that the tag you’re using fits what you’re putting in it. If you need a table in your website, use a table tag. If you need a form, use a form tag.

After that, check if your markup is valid using the W3C Validator.

You don’t have to get perfectly valid because sometimes, for example, W3C sees spaces and says it’s invalid. So it’s okay as long as there are no deadly errors. This is free.

8. Style your content with CSS or any framework you like to use.

I used CSS resets to reset the margins and paddings set by the browser. You can use Eric Meyer’s CSS Reset or Normalize.css. You can search for other css resets. I find Meyer’s CSS reset better because it is simpler and shorter. But it still depends on the elements you’re going to use. You still have to customize those resets to fit your needs.

I take a mobile-first approach to design my website. For me, it’ll be easier to add more style rules as the viewport widens. I don’t have to change anything in the first part. All I will do is add media queries and change the rules.

World Wide Web Consortium (W3C) also offers validation with CSS.

9. Separate your HTML, CSS and JavaScript from one another.

Separating these three will lower the memory you used making it faster for browsers and servers to parseand to load your website.

11. Use PHP to save memory and for other functionalities.

I used PHP to save my header and footer in a file. In this way, I’ll save memory from duplicating it. And my website has a contact form. I use PHP to validate the possible inputs in my form. Then, I used PHPMailer to make it possible to send myself an email every time someone sent me a message. It is free and object-oriented. You can check their example so you can follow along.

12. Upload your website in your web hosting.

I bought my domain name at Namecheap for $10 for the whole year. And I’m using a Webhostface to host my website.

Creating a website is not a piece of cake. I started it last December 2016 and finished the first version this February 2017. And it’s not a continuous pace. That after this, then this. I found myself hours, days of researching, writing markup and style rules, debugging. Plus, hours of staring at my laptop, searching and reading articles about this and that.

I got to read forums on Team Treehouse, Stack Overflow and other websites on web development.

But in the end, I got to finish it. It may not be perfect right now but I still have the time to tinker and perfect it. What’s important is I launched a functional website that can do its purpose.

So what are you waiting for? Start now your website!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s