This content originally appeared on Level Up Coding - Medium and was authored by Monica A.
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.
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!
Building your first website was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Monica A.
Monica A. | Sciencx (2022-01-06T14:47:12+00:00) Building your first website. Retrieved from https://www.scien.cx/2022/01/06/building-your-first-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.