CharlieJ Codes

Learning HTML & CSS FLEXBOX

Building My First Webpage

Charlie 's photo
Charlie
·

5 min read

Learning HTML & CSS FLEXBOX

Table of contents

Overview

Hey there, fellow explorers of the digital world! Pull up a virtual chair and let me share with you my exciting journey into the realms of HTML, CSS, and Flexbox. You might wonder, "Why dive into the complexities of web development?" Well, stick around, and I'll spill the beans.

In this post, we'll have a look at how I created my first webpage! (It's not yet optimized for mobile view) It was fun and I was able to build some skill and confidence. In addition to the tools mentioned above, I also used Chrome DeveTools to help test my code. I couldn't have done it without the wonderful program over at The Odin Project. Here's a link to the webpage. It's simple and can be improved upon, but I'm still learning.

https://supamega24.github.io/first-webpage/

My Motivation:

So, why am I immersing myself in the wonders of web tech? It's simple, really. I'm on a mission to become a full-stack developer. The idea of crafting interactive websites and applications lights up my imagination. I want to build things from scratch, make them look nice, and ensure they work seamlessly. It's not just a career choice; it's a calling, a creative outlet that I can't resist exploring.

The Smart Connection:

Now, here's the fun part – I’m also deeply into blockchain technology and smart contracts. The way they're transforming transactions is mind-blowing. But here's the twist: understanding HTML, CSS, and Flexbox isn’t just about making websites look good. It’s about creating intuitive interfaces for blockchain applications. Imagine sleek designs that make interacting with complex blockchain systems feel like a breeze. That’s the magic I want to bring into the world of smart contracts.

Writing Better Smart Contracts:

Why does a snazzy website matter in the world of blockchain, you ask? Well, imagine this: a user-friendly interface ensures that people can easily engage with blockchain applications. It’s like having a friendly guide in a foreign land. When smart contracts are wrapped in beautiful, user-centric designs, they become more approachable and trustworthy. And that’s where my HTML, CSS, and Flexbox skills come into play. I’m not just coding; I’m crafting experiences.

HTML Code Breakdown

You can view the code in my repo here: https://github.com/SupaMega24/first-webpage/blob/main/index.html

Let's break down the HTML code step by step:

  1. <!DOCTYPE html>: This declaration specifies the document type and version, indicating that this is an HTML5 document.

  2. <html lang="en">: The opening <html> tag defines the root element of the HTML document. The lang="en" attribute specifies the language of the document as English.

  3. <head>: Within the <head> section, metadata about the document is defined. This includes character encoding, viewport settings, and the title of the webpage.

    • <meta charset="UTF-8">: Specifies the character encoding of the document as UTF-8, which supports a wide range of characters and languages.

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties, ensuring the webpage is rendered appropriately on different devices and screen sizes.

    • <title>Awesome Cats</title>: Sets the title of the webpage, which appears on the browser's title bar or tab.

    • <link rel="stylesheet" href="style.css">: Links an external CSS stylesheet called "style.css" to the HTML document for styling purposes.

  4. <body>: The <body> section contains the visible content of the webpage. It is divided into several elements:

    • Header Section (<div class="header">...</div>): Contains the website's title and a list of links to external cat-related websites.

    • Section 1 (<div class="section1">...</div>): Contains a message about the awesomeness of cats, a description, and a button linked to a Facebook group.

    • Section 2 (<div class="section2">...</div>): Displays the text "Check Out These Adorable Kittens."

    • Section 3 (<div class="section3">...</div>): Contains four cards, each displaying an image of a cat along with a caption.

    • Quote (<div class="quote">...</div>): Displays a cat-related quote attributed to Bill Dana.

    • Call to Action (<div class="callToAction">...</div>): Encourages readers to get involved in helping cats and provides a button linked to the website of Alley Cat Allies.

    • Footer (<div class="footer">...</div>): Displays the text "Geaux Tigers!" (a popular slogan associated with Louisiana State University).

This HTML code creates a webpage about cats, featuring various sections, images, and interactive elements for users to explore and engage with cat-related content. But it doesn't give it any style or arrange the items. For that, let's look and the CSS code.

CSS Code Breakdown

You can find this code here. I do feel like it is a bit bulky, but I'm learning and am confident that I'll get better.

https://github.com/SupaMega24/first-webpage/blob/main/style.css

Here's the explanation of the code:

  1. Font Import:

    • Imports the Roboto font from Google Fonts, making it available for use in the document.

  2. Body Styles:

    • Sets the minimum height of the body to 100% of the viewport height.

    • Removes default margins.

    • Applies the Roboto font to the entire document.

  3. Image Styles:

    • Styles images with a border, border-radius, and padding.

  4. Header Styles:

    • Styles the header section with flex layout, background color, text color, and padding.

  5. Section Styles:

    • Styles various sections with different background colors, text alignment, font sizes, and padding.

  6. Quote Styles:

    • Styles the quote section with a background color, italic font style, and padding.

  7. Hero Styles:

    • Styles the hero texts with specific colors, font sizes, and padding.

  8. Card Styles:

    • Placeholder for potential card styles (currently empty).

  9. Call to Action Styles:

    • Styles the call to action section with flex layout, background color, text color, border radius, and padding. The button inside the call to action has additional styles.

  10. Footer Styles:

  • Styles the footer section with specific background color, text color, font size, and margin-top.
  1. List Styles:
  • Styles list items (anchors) with specific margins.
  1. Anchor Styles:
  • Styles anchor elements with specific text decoration, color, and font size.
  1. Button Styles:
  • Styles buttons with specific background color, text color, border, border radius, padding, and margin-top.

The Odin Project

This was a huge step forward for me, and I enjoyed every minute of it. This is part of the Foundations Course at The Odin Project. You can check it out here. This is a wonderful program with a very active Discord community. It is challenging and rewarding. There is a lot of support, but no hand-holding. This is great as it allows for true learning. I strongly recommend you check it out.

The next step for me is JavaSript. I'll continue to read and stay abreast on Solidity - but for now - I want to focus on learning overall web development and becoming more well-rounded.

Frontend DevelopmentHTML5CSSflexboxlearning