CSS — Where to Begin…
Crafting the CSS for a website or even a simple webpage can be time consuming and there is no one right way to go about it. But there is the easy way…
Before you begin writing the CSS code, have a solid idea of how your website or webpage will look. You can do this by first creating a simple mock-up of the design you intend to create. Creating a mock-up will provide you with a visual of each webpage and how each page will function. Some details you can include in your mock-up are placement of features in the heading, nav bar content, footer content, and the layout of the body of each webpage including placement of text and images. If you start with a simple mock-up design, you will have a better understanding of what CSS content to use, which attributes would work best, and whether a grid or a flex display, or a combination of the two, would better serve your needs.
The mock-up design can be simple, or it can include as many details as you require, and you can create your mock-up design with a simple drawing program, or if you prefer, you can create it with pencil and paper. The choice is yours - whatever medium would work best for you. You will most likely have Paint on your computer and this program works great for creating simple mock-up designs.
Some features you may consider including in your mock-up are box layouts for the header, footer, body. You can then more easily, decide which features will work better with a flex layout or a grid layout. You will be able to determine the approximate size of the photos or images and how to place them, as well as the space available for text, links, and other features. In addition to this, you could add touches of color, you can include font-styles, and label the CSS code you intend to use.
Here is an example of a simple mock-up:
As you can see, your mock-up doesn’t have to be perfect, you shouldn’t spend hours perfecting it. Its purpose is simply to give you a visual of layout and content, so that when you start your CSS you have a clear path to follow.
Some options and programs for creating your mock-up are:
Pencil and paper
… to name just a few.
Whatever medium or program you choose, your mock-up design will save you countless hours and possibly your sanity, figuring out layout style and which functions to code your CSS with.
The easy way is to mock it up before you make it up.
