Building a Website Page - Body

Now it is possible to code a website without using all the correct element tags specifically named for that job in the body section. Instead we can use the generic div tag <div></div>. While this won't particularly effect how the website looks to the user it will effect how the browser can read and render the website efficiently. Because browsers understand what each of these elements are, their importance in the page structure and the content they should contain.

Badly written code not only effects your websites rendering speed more importantly it causes your website to be less accessible for people using computer assisted software which relies on these element tags to navigate itself around the content of your page.

Body Element

Previously (Step 1) we learned that the html <body></body> is where all the visible content of the website page is placed.

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>

The body of our webpage is then divided up into content section elements, most commonly you'll find it split into these 3 main areas the header, main and footer. There are others ( MDN developer docs ) but these are what I will be using as I make Toms Cupcake Cat Bakery website.

Now lets get started with building the Cupcake Cat Bakery website. I will be writing the code just using Html plus a mix of CSS Grid for the main style layout along with Flexbox for styling components. Even though the majority of the code will be written now I will however be using my own starter files just to speed up the process.

If you wish to see the html of Tom's website as you go through my guide. Then first open the index page cupcakecatbakery.uk in a separate browser tab/window, then 'right click' and choose the option 'View page source' this will open a another browser tab with the code there for you to read.

These consist of a bare bones basic html page and my own style CSS which has lots of the necessary bare structural style elements e.g. header, navigation, product cards etc... ready to add the styling that will make this a bespoke website design. Though similar this is not the same as using a third party framework as these are written by me and only have the relevant code that I will be using not 100's of unused lines of code that will slow your website down.

If you've caught the coding bug too and wish to learn about CSS Grid or flexbox check out these free courses, websites and fun learning games

• Wes Bos - What The Flexbox and Lets Get Griddy With It
• Rachel Andrew - Grid by Example
• codepip - Flexbox Froggy and Grid Garden

As I mentioned before Tom's website will consist of three main areas header, main and footer. I plan to explain about each of these areas separately as I build the main landing page of Toms new Cupcake Cat Bakery website. Using image diagrams and screenshots of the page build, I'll explain about the purpose of each of these areas and what elements of a website you would usually expect to find in each one.

So let's go to Step 3 and make a start with the header.

• Step 1. The basics
• Step 2. Webpage ‐ Body
• Step 3. Webpage ‐ Header
• Step 4. Webpage ‐ Main
  • Toms Main Section 1
  • Toms Main Section 2
  • Toms Main Section 3 & 4
  • Toms Main Section 5 & 6
• Step 5. Webpage ‐ Footer