Part 3: Coding the Content

Alexandria Balde -

What you will get from this workshop

  1. A thorough introduction into the world of website development with HTML and CSS
  2. Learn how to code your first website, a journal!
  3. A list of resources to help you in your programming journey

Tutorial Content

  1. How we got started
  2. HTML/CSS: Making the footer
  3. HTML/CSS: Writing your journal entries
  4. Continuing on your coding journey

How we got started

We began this tutorial introducing HTML and CSS in Part 1. And then we coded the layout and styling with HTML and CSS in Part 2.  

Now that we have the website all situated, we can start making look like a real journal with journal entries!

Next let's deal with the bottom of the web page with positioning for the footer element.

All we need to add to the footer is an attribution and claim to let the user know who/what owns the webpage. In this example, we will put Qoom! 

<footer>
    <p>Qoom 2021</p>
</footer>

Now we can style the footer. 

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #0c0c34;
    color: white;
    text-align: center;
}

In the previous article, we covered background-color, color, and text-align. Now with the footer we can introduce another feature of CSS: positioning!

Positioning an element can be broken up into:

  • static is the default position setting with the elements rendering in the order within the document
  • initial sets the element to its default position. So this would be used if you wanted to specify a child to have static positioning instead of its parent that has different positioning
  • inherit does the opposite and sets the child's positioning value to have the same as its parent's
  • fixed is the value that is relative to the user's screen and not the webpage itself. For example, whether viewing the element on a phone or computer, the position of the element will be relative to that.
  • absolute allows the element to only be in relation to its nearest position ancestor/parent element; however, without a parent element, the positioning of the element acts as fixed to the browser and indifferent to the positioning of any other item
  • relative positioning scales with the other elements on the page, so it is the opposite of absolute positioning
  • sticky is like if an element is in fixed position, but also scrolling of the webpage is taken into account

So with a fixed position (position: fixed;) that is zero pixels away from the left of the page (left: 0;) and zero pixels away from the bottom of the page (bottom: 0;), the footer stays fixed to the bottom of the web page.

HTML/CSS: Writing your journal entries

Now we can get the most fun part: coding your journal entries! Here is where you can personalize your journal the most and tell the world who you are!

Let's begin by making the elements that will house your journal entries. 

<main>
    <div class="entries">
        <h1>Title - Date</h1>
        <p>this is a paragraph</p>
    </div>
    <div class="entries">
        <h1>Title 2 - Date</h1>
        <p>this is a paragraph</p>
    </div>
</main>

So within the main element, we created a system for each of the journal entries.

  • <div> A division element which is the most common element as it is used to define a section of the web page
  • <header> A header element that will have the title of your journal entry and the date
  • <p> And the paragraph element acts as where you will write your journal entries. Instead of "this is a paragraph" you can actually fill in whatever words, emojis, or characters you want as long as it is within the tags and has to carrots.

And the class="entries" that is within the div tag is an attribute! Attributes like classes and IDs are a way to identify elements in both HTML and CSS. It is common practice for websites to have attributes to specify the importance of certain elements, as we did when we specified that the div acts a section for the entries. And do not worry, as you continue on your website development journey, you'll become more comfortable using those attributes.

Now let's add some styling to the elements!

We want to have the title and paragraphs to be a certain space away from the edges of the page and other elements, so let's use margin to define the spacing. 

.entries h1 {
    margin: 12px 0 12px 18px;
}

.entries p {
    margin: 0 12px 0 30px;
}

In CSS, we style classes by adding the period (.) in front of the classes name and a hashtag (#) in front of ID names.

So, we are specifying the header and paragraph elements within the element that has an entries class to have certain styling.

And the having four values for within the one margin property is a shorthand for styling the different sides of the element. From left to right, the 4 values tell the margin spacing for top, right, bottom, and left of the element!

Continuing on your coding journey

Congrats! You have just completed your first website and published out into the world! With your Qoom account, can you simply copy-and-paste the URL to share with your friends and family, and you can publish it to GitHub and Discord!

Demo the journal here!
https://app.qoom.io/~/projects/my-first-website

You can access source code here.
https://app.qoom.io/~/edit/projects/my-first-website

Here is the what the final HTML file should look like:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <script type="module" src="script.js"></script>
    </head>
    <body>
        <nav>
            <h1>Journal</h1>
        </nav>
        <main>
        <div class="entries">
            <h1>Title - Date</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porm lacinia
            </p>
        </div>
        <div class="entries">
            <h1>Title 2 - Date</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. 
            </p>
        </div>
        </main>
        <footer>
            <p>Qoom 2021</p>
        </footer>
    </body>
</html>

And here is what the CSS file should look like: 

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    background: #274f87;
    color: white;
    font-size: 30px;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #0c0c34;
    color: white;
    text-align: center;
}

.entries h1 {
    margin: 12px 0 12px 18px;
}

.entries p {
    margin: 0 12px 0 30px;
}

Here are some resources that are Qoom-approved for progressing in web dev journey!