Building your first website

Photo by Kelly Sikkema on Unsplash

Building a website takes some planning before you even type your first line of code, here are a few tips that can help you make the process run smoothly.

If you work with a designer then you are in luck, because you don’t have to do it from scratch, the designer can just hand you the mock-up that has been approved by the client and your job is to figure it out how to translate that beautiful mock-up into your code and create the website to look like that.

If you don’t have a designer and need to start from scratch then you got lots of thing to do before you even code. First, do your research, get to know the product or service for the website that you going to build. Find out who your client & target market is, what your client expectation, what color palette will match the company/product, etc. Get some inspiration and samples from a site like Dribbble , Pinterest , Behance, present a few sample of the website to your client to get a feel of what kind of design that they like to have for their website.

Gather all the assets needed from the client, such as the logo, pictures of the product, what kind of font that they use and the list go on and on.

After you gather all the info, now would be the time to take out your pen and paper to start sketching what your website will look like. If you know how to use Figma, Adobe XD or Sketch that even better, you can start designing your website mock-up from start to finish, get your client approval and you can start prepping your next step to start coding.

Take a moment to study the mock-up, notice all the things that is use repeatedly, the color, font-size, button, etc., and make a note of it. Start marking up the mock-up and determine where you will be using flexbox or grid to build it section by section.

Also, it would be a good ideas to create 3 separate CSS files:

default.css

The default.css will host all your default setting such as font size, color, other setting that you can apply it globally through out your entire pages without having to retype it again and again.

style.css

You can put your regular css syntax on the style.css to style each section on this one.

responsive.css

And lastly, the responsive.css will host all your media queries setting for your mobile responsive view.

Photo by Gradienta on Unsplash

Some bonus tip if your website happens to have these few things:

• You can use multiple linear-gradient to create a colorful background.
• Position unset is useful to reset your components if you style it with position absolute, who tends to mess up with your mobile responsive view.
• Using percentage is better than a fixed number on position absolute.
• Grid also seems easier to control in mobile responsive when you have position absolute on your style.css.

Learn more about linear gradient and position unset below:

• Linear gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
• Position unset: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

Happy coding!