I need to learn more about this ...

HTML and CSS

Years ago, I learned enough HTML and CSS to create basic web pages. Today, I learned there is more to HTML and CSS than meets the eye. The "Order" element below and subsequent code were copied from How to Use the Details and Summary Elements in HTML5 [Article] | Treehouse Blog (teamtreehouse.com), and represents just one example of many elements that have been around for quite some time:

The Element:

Clicking on the "arrow" unfolds the content.

Order #24892105
Order Date 30th May 2003
Order Number #24892105
Courier Buy N Large Postal
Shipping Address P. Sherman,
42 Wallaby Way,
Sydney,
Australia
Billing Address P. Sherman,
42 Wallaby Way,
Sydney,
Australia

The Code:

<details>
    <summary>Order #24892105</summary>
    <table>
        <tr>
            <th scope="row">Order Date</th>
            <td>30th May 2003</td>
        </tr>
        <tr>
            <th scope="row">Order Number</th>
            <td>#24892105</td>
        </tr>
        <tr>
            <th scope="row">Courier</th>
            <td>Buy N Large Postal</td>
        </tr>
        <tr>
            <th scope="row">Shipping Address</th>
            <td>
                P. Sherman,<br>
                42 Wallaby Way,<br>
                Sydney,<br>
                Australia
            </td>
        </tr>
        <tr>
            <th scope="row">Billing Address</th>
            <td>
                P. Sherman,<br>
                42 Wallaby Way,<br>
                Sydney,<br>
                Australia
            </td>
        </tr>
    </table>
</details>

I've wanted to include a feature like the one above in some of my posts. I only realized it was possible after copying and pasting a portion of a web page into a post I was writing, and the "fold" button feature worked!

The Lesson and What's Next?

So here I am, learning that I could easily include code like that above into the posts I write using Hashnode. Perhaps I was more interested in writing content about things rather than learning the features and options available to me on this platform.

The lesson here is pretty simple: It's essential to keep up with changes as code bases and their inherent features evolve. What are the odds? It's time to learn some more.

Until Next Time!

Did you find this article valuable?

Support Clicks and Switches by becoming a sponsor. Any amount is appreciated!