🔧 Step 1: Crafting the layout

First, we need to understand how the layout would be structured in HTML.
Let’s take our design into parts.

This article helps you with HTML elements.

First things first

Every HTML document starts by declaring that it is a HTML document

Use this tutorial to declare the basic layout of your HTML
Include a Google font like Poppins inside your <head> tags (click Get font > Get embed code)
Write a title for your app
Include a favicon for your app
Create a “style.css” file and include it in your HTML <head> tags: <link rel=”stylesheet” src=”style.css”>
Save the file in your computer as “index.html” and test it – do you see a page title, and a favicon?

Header layout

Remember, all the visible content on your website has to be inside the <body> tag of your HTML document. Let’s continue with page header.
Header consists of a full-width container row, which has a dark blue background. Inside it has an invisible container, which has a fixed width, and is centered. And inside this centered invisible container, we have the menu links.

# header div
    ## header container div
       ### link1 (for href, type my-todo.html)
       ### link2 (for href, type add-new.html)
    ## header container div ends
# header div ends

Use given hints to build your header layout.

Then, head to your style.css file, and write a styling code for all these elements:

.header { 
-- describe dark-blue background;
}

.header-container {
-- describe its fixed width;  
-- describe its centering (margin: 0 auto;) 
-- describe its padding-top and padding-bottom values, to give it some spacing
}

.header-container a {
-- describe link color 
-- describe font-size in pixels (eg. font-size: 24px;)
-- describe it's margin-right, so it would have spacing with next link
-- set text-decoration: none
-- set font-family to be 'Poppins'
}

You should see something like this. However, see how it has white borders around it? It’s not definitely full width.
That’s because <body> tag has a little margin by default as well.

Add this line to your CSS, and it should be fixed. Ideally, add it as the first rule in your CSS file:

body { margin: 0; }

Content part

Content div is fairly simple. It sits just inside the body tag, after the div.header.
It does not need a parent div, because it would not need a full width transparent background like the header does. The background color is inherited from the body tag.

The div.content should start right after the div.header ends. The structure is simple – a single empty div (for now 😈)

# content div
# content div end

For content div, give padding-top: 100px, give the width value the same as .header-inner class. Center it horzontally by using “margin: 0 auto;” rule in your CSS file.
In CSS, declare a rule for h1, to use font family of Poppins.

Write some content inside the content div, for testing. For example, add:

<h1>Some testing stuff</h1>

Single task page

Create an HTML file called single-task.html.
Copy over the full content to this file, starting with <!DOCTYPE… and ending with </html>

# html start
# head element start and end
# body start

# header div
    ## header container div
       ### link1
       ### link2
    ## header container div ends
# header div ends

# content div
   ## heading "Task: Read some articles about layouting"
   ## paragraph with due date
   ## paragraph with task description
   ## form tag, where method is POST and action is left empty
      ### input type submit, value is "Mark as done", name is "markdone". 
   ## form tag end
# content div end

# body end
# html end

For heading tag (<h1>), write font-family: ‘Poppins’ (if you haven’t already), give it a font-size attribute (e.g. “font-size: 32px;” )
For paragraph <p> tag, give it also font-family as Poppins, and give it a font-size.
For <p> tag, also give a margin-bottom, like 15px.
For submit button, give it a class name, and in CSS make text color white, background color as darkblue, border: 0; and add some padding and give it a font family of Poppins.

This should be your end-result:

Create-a-new-task page

Create an HTML file called create-task.html.
Copy over the full content to this file, starting with <!DOCTYPE… and ending with </html>

# html start
# head element start and end
# body start

# header div
    ## header container div
       ### link1
       ### link2
    ## header container div ends
# header div ends

# content div
   ## heading "Create new task"
   ## form tag where method is POST and action is left empty
      ### input type text, give it a name, and placeholder, set class as "text-input"
      ### input type text, give it a name, and placeholder, "text-input"
      ### textarea, give it a name, and placeholder, "textarea-input"
      ### input type submit, value is "Insert task", name is "insert". 
   ## form tag end
# content div end

# body end
# html end

To the CSS file, define some new rules as well:

.text-input and .textarea-input, set:

background color to #efefff
display: block (this makes all elements appear on a new line vertically)
set border to 0
set width to 100%
set padding to 20px
add margin-bottom, so they would have spacing from each other
set font-family to Poppins

Result so far:

My to-do page (homepage)

This one is a bit trickier, because it requires more elements to be nested inside each other.

Create an HTML file called home.html.
Copy over the full content to this file, starting with <!DOCTYPE… and ending with </html>

Inside the div.content, there are two task-blocks: My to-do list and Done tasks.
So under the first task-block, there’s a title (My to-do list).
And under this task-block, there is a task-element, a row of one task. This row has two columns, column with task status and another column with task title.

# html start
# head element start and end
# body start

# header div
    ## header container div
       ### link1
       ### link2
    ## header container div ends
# header div ends

# content div
   ## tasks-block div
      ### heading "My to-do list"

     ### task-element-container
         ### task-element div
            #### task-status div
               ##### task-state div start and end
            #### task-status div end
            #### task-title div start
               ##### paragraph with text
            #### task-title div end
          ### task-element div end
      ### task-element-container end

     ### task-element-container
         ### task-element div
            #### task-status div
               ##### task-state div start and end
            #### task-status div end
            #### task-title div start
               ##### paragraph with text
            #### task-title div end
          ### task-element div end
      ### task-element-container end


     ### task-element-container
         ### task-element div
            #### task-status div
               ##### task-state div start and end
            #### task-status div end
            #### task-title div start
               ##### paragraph with text
            #### task-title div end
          ### task-element div end
      ### task-element-container end


   ## tasks-block div ends
# content div ends

# body end
# html end

.tasks-block does not need any styling. It’s just a plain and simple container
.task-element needs: background-color, also display: flex; align-items: center (so they are vertically positioned in center)
.task-status needs width (e.g width: 80px)
.task-title does not need anything else, it’s just a title container
.task-state – define it as width: 20px; height: 20px; border-radius: 20px; so it will be a circle; give it margin: 0 auto, so it will be centered.
Also just define a class .state-active, and give it background-color: green;
And define a class .state-inactive, and give it background-color: orange;
Define .task-element-container, to have margin-bottom a bit, and display: block

If defined properly, you can give, then you can show different colors of task statuses.

<div class="task-state state-active"></div>
Will output a green circle

<div class="task-state state-inactive"></div>
Will output a red circle

Download materials here

html-layout.zip