In this article, we are looking at the first steps to code a website with HTML and CSS. Hopefully, we can dispel some of the anxiety around getting started. As you will see, it isn’t that hard if you think through what you want to achieve.
Plan the layout
The best advice I can give about your first coding experience is to plan in detail. If you have a good understanding of what you want to achieve, there is a much greater chance of success. The first bit of planning should be some drawing. Below is a sketch for a web portfolio for myself. It doesn’t take much drawing skills to make plans like this. Whatever your drawing skill you can still be detailed and accurate. I’m planning a very simple layout but I’ve included all major elements, even if indicated with a single mark. In my sketch, I’ve indicated a logo, hamburger menu, introductory text, a grid of thumbnails, and a footer link. I’ve done drawings for a mobile ans desktop homepage. Oh, by the way, I use Adobe scan. to capture my drawings for documentation.
Mobile-first
In the past, a website optimised for mobile viewing might have been an afterthought. With the market share of eyeballs drifting to smaller screens, the design of a website should probably start with mobile in mind. Designing for mobile-first ensures that your design will address the audience’s needs across platforms. It also forces the designer to focus on delivering content in the most economical way, reducing unnecessary features or design elements. I start designing for mobile screens first and then work my way up.
Wireframe it
The next stage in my process is to translate the loose sketches into a wireframe. I suppose a wireframe is a kind of diagram. It allows us to consider possible screen sizes. Screen sizes then have implications on the proportions of the layout. Creating a wireframe starts to solidify increments, coordinates, measurements. It enables me to start thinking about font sizes, image widths, column, and gutter widths. I can decide on a grid to use. It straightens and cleans up my thinking.
In my wireframe below, I have designed for a desktop screen that is 1920 pixels wide. I gave the design a 200-pixel margin on each side, 12-columns with 16-pixel gutters. (The blue stripes are application guides.) The mobile layout is aimed at iPhone 6/7/8. It only has 4-columns, so the layout potential is much less. Designing for mobile is extremely important though. It is far more likely that your audience will look at your website on a mobile screen. Google has begun indexing mobile content first. So if you want to get a good Google ranking, make sure your site is optimised for mobile content.
I use Adobe XD to do my wireframing.
Make a mock-up
At this stage, I like to make a pixel-perfect* representation of my design. This is sometimes called the hi-fidelity design. This further cements the formal aspects of the project and gives us a target to work towards when we are wrangling HTML and CSS. If you have spent an appropriate amount of time on a wireframe, the mock should be easy to complete. All the hard work is done and it’s just joining the dots. Well, maybe a little more than that.
In my example, I had to make a few sp acing adjustments but not too much. I made typography decisions and also included the images I want to use. (This is not my work in the thumbnails btw, I got the images from Unsplash.). It’s imperative to have your content ready before getting into the HTML and CSS. Working without content is pretty much a dead end in my opinion. I made my mock-up in XD and it was really easy. You can see a live preview here. This sharing feature is really good for showing your designs to colleges or clients.
*Obvs can’t make a pixel-perfect mock-up. The website is fluid and responsive and the mock-up is static but we’ll make it as close as we can.
Planning the mark-up
At this point, I’m starting to think about HTML and CSS. Yes, I know it is scary. Why did I do this to myself? I’m a visual person! I draw stuff! I did a painting degree for god’s sake!
Just get started.
Let’s have a look at the design and make some decisions about how we structure the HTML. As you know HTML is a series of elements that either sit on top of each other or nest inside each other. The outermost element is the <HTML> tag, everything else is nested inside that. Metadata goes in the <head> tag and content elements go in the <body> tag. Inside the <body> tag, we get to decide the structure of the page. Everyone has a slightly different approach to structure. I usually start with a “wrapper”. This is an element that wraps around all of the page content but is inside the <body> tag. The “wrapper” will be a <div> tag with a class assigned. Something like this:
<div class="wrapper"></div>It’s helpful to have a wrapper inside the <body> tag because it allows you to add auto margins to center your page content. Inside the wrapper, I generally stack all my page content elements. A <head> tag at the top, followed by the rest of your content. Have a look at the diagram below to check out how I plan to structure my HTML. You can see how some of the elements are HTML tags and some are <div> tags with class names. It is up to you which tags you use and what names you give classes. I just try and use things that sound right, for example, I’ve given a class name of “intro” to the <div> that has intro text in it.
Ok, I think it’s time to start writing some HTML.
Make a prototype with Code Pen
I reckon Code Pen is a great place to start putting your HTML and CSS together. You don’t have to worry too much about managing files. It’s all saved in the cloud. It’s really easy to add Google fonts and other assets. You can also make heaps of mistakes and not worry about it, just make another pen. Once you have fashioned something that is getting close to your what you want, you can download the text files and continue developing locally using an authoring tool like Brackets.
In part 2 we will start writing some HTML. Get Code Pen ready and follow along with the screencasts. Good luck.
