First time trying out web development and it’s kinda neat I guess

I, Motivation

So ever since the break 2 weeks ago (specific to Viet Nam, known as “Reunification Day” and “International Workers’ Day”), I’ve been doing a lot more coding, specifically in Java and a little bit of Python because I literally don’t want to do anything else, mostly because I don’t like math and my university / teachers make me hate it more, I was literally dead set to do nothing but coding. And I’d like to say that I’ve been able to made some pretty cool projects whether it be finished or unfinished, not to mention everything I’ve learnt along the way too, it honestly have been some of my best coding experience.

But nevertheless, since my projects has been pilling up one by one and I just literally cannot stop coding, one afternoon about 4 days ago, after I’ve finished my first bot for TicTacToe, I thought to myself:

“You know what, the stuff I’ve been making is indeed pretty cool and I have been able to share it with quite some people. But I just feel like these projects have more meaning and impact to me, I want them to be something more. They’re not just code and a cool programs, they were learning experience with real emotions along the way.”

And then it hit me:

“Hey, since I’m practically addicted to coding, and I just can’t stop my drive to learn new thing, and developing a web is both of that thing…”

So anyway yeah I started to look up how to make a website 2 days ago. While I want to say that I have no experience in this particular field, I do know what stuff does it involves, and I also know that it’s messy as hell. But all in all, who hasn’t heard of the trio HTML, CSS, JavaScript, right? Silly story: I’ve actually always thought that CSS is part of the C family (C, C#, C++). With that in mind, I think to myself, how hard can it be, right? After all, I can’t just keep pilling up projects like this without making the most out of them, just thinking about that make me shivers, how I can be wasting what I’m learning right now if I don’t document my journey and share it to others, and for myself because who can remember everything that they learn right? it’s practically like taking notes in a class! I’m learning and I want to take notes! While I also agree that teaching is the best way to learn, when one person teach 2 people learn and all that, but writing blog posts documenting your own learning journey, it has to at least be the second or third best thing right?

Moreover, if I actually managed to complete a somewhat decent website that will be another learning experience right? So many apples with one arrow, I was so damn determined. But not gonna lie resisting the urge to continue working on my ongoing projects was also a challenge, but eventually I overcame it and now you are reading my effort in the product that came from this story right now.

II, The process

1, HTML - Day one

The first step was HTML, which should be simple enough right? I’ve actually had a very brief exposure with HTML in one of my subject and also from the days when I accidentally hit F12 and saw all the crazy stuff that pops up from the right side of Chrome, I remember how when I was messing around in there, I was able to change stuff like the color of texts and other shenanigans (now I know that that was CSS). But anyway back to the main topic, HTML (Hyper Text Markup Language) was essentially just like the skeleton of a website, if striped away of all it’s clothes and skins, it’s HTML. which essentially isn’t really a programming language (though I think that it does have some simple programming stuff) but rather just a structure for a website to follow, raw HTML was what it was like back in the day, just text, media, some links to each other and that was it.

As mentioned before, I started digging into making a website right after I was done with my bot for TicTacToe in Java, but at that moment, I was still in Intellij IDEA, and I saw that it actually have support for HTML. Perfect!, because I was just done with the bot, I was feeling quite spent so actually at that point I was quite hesitant to even begin, but just HTML? it should be a breeze then. I made a new project in Intellij IDEA, choose main language as HTML, and started testing. This is one of the first complete HTML that I was able to cook up:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Test</title>
</head>
<body>
<div class="container">
    <div class="header">
        Header
    </div>
    <div class="main-content">
        Main Content
        <p>
            some text...
        </p>
    </div>
    <a href="index.html">
        <button>
            Click me
        </button>
    </a>
    <div class="sidebar">
        Sidebar
    </div>
    <div class="footer">
        Footer
    </div>
</div>
</body>
</html>

Cool trick: In most IDEs, when writing HTML, if you need to quickly set up the conventional sample you can just type “ ! “ at the very beginning of the file then Tab and it will generate an entire sample snippet for you. I learned that HTML is composed of many tags, for example: “<div>” is an opening tag and “</div>” is a closing tag (some tags might not require closing tag). And further more, those tags can have attribute in them, some of the most crucial attributes that I learned and used the most were stuff like:

<div class="main-content">
    Main Content
    <p>
        some text...
    </p>
</div>
<a href="index.html">
    <button>
        Click me
    </button>
</a>

So in this example, “div” is assigned attribute class, which ultimately defines a target for both CSS and JavaScript to be able to target specifically. Another one is the “a” tag which is assigned href, which basically allows everything inside of it to be a clickable hyperlink that takes you to the argument of href. That is 2 of the attributes that I used the most in this project, however there are a lot more that makes HTML5 so powerful.

But so far, with only raw HTML, it was basically like writing a document with Word but less painful once you get the hang of HTML and also do it on a modern IDE. I think the only difference is that for Word you have to configure everything every time you want to write something while for HTML, tags most often time define the layout and structure for you from the get go. I believe that how most websites back in the early days were built, it have all the essential stuff for a fully functional website, so in theory, you can get a site up just from HTML. But of course things change, and website is no stranger to massive revolutionary changes. With that, I already have a clear path to my next topic for this post.

2, CSS - Day one

The skin of HTML - CSS (Cascading Style Sheet) also is a crucial part of any websites, it essentially turn a simple white page black text Word document from my analogy earlier to something unique, only limited by the programmer’s vision and ability. it gives full control to all aspect of any elements of a HTML file by first targeting them by declaring the tag’s signature, then it provides a wide range of aesthetic and often time layout modifiers to style everything to your liking. More over, CSS also supports very primitive conventional programming features for when you need it, which is a step above HTML in this regard. And both HTML and CSS solidify the fact that they’re almost always together by the fact that HTML supports seamless CSS integration to your HTML file, by simply using the “style” tag and you can basically define your entire CSS implementation in the said tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 Not Found</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            text-align: center;
            color: #333;
        }
        h1 {
            font-size: 5em;
            margin: 0;
            color: #ff6b6b;
        }
        p {
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <p>Page Not Found</p>
    </div>
</body>
</html>

So as you can see, inside the style block, a lot is at work:

• First part is the body, followed by curly braces because CSS uses those, font is set to Arial (if for some reason Arial is not present, it will default to a sans serif font family), display is set to flex (I don’t really understand this that well), and more importantly, items are aligned to the center and the background color is set to black.
• h1, which is Heading level 1, have a size of 5em (a relative unit compared to px to better adapt to mobile display), same goes for p, which is paragraph
• Finally, you can see .container, which has a slightly different declaration than others, that is because this part is not targeting any concrete element, but rather, a class!, following below, you can see how there’s a div section with the same class name, and so, that CSS part is targeting this div section.

So apart from the section that targets class “container”, the other CSS sections are targeting everything that is of the same element type, so although in this example I only have 1 Heading level 1 or h1, if I were to add another, the style defined in the CSS will also be applied to it. This is crucial for reducing code repetition and ensuring consistency, very important for websites! However, I must admit that, being a newcomer like me, trying to make the most out of CSS was NOT easy, while i tried my best to ensure that I have as little repeated CSS as possible, trying to adhere to that was definitely a challenge. And that challenge made me understood web development so much more, now I know why they hire people with work experience. This style of web development is practically just memorization, there were not really a lot of problem solving or complicated programming involved. And there weren’t even anyway to “debug” by yourself, you just kinda have to know where to mix things up and see how it react.

Further more, you don’t have to directly include CSS in your HTML like this, you can also just link an HTML to use a specific stylesheet ending in .css, for example, you can put something like this inside your “head” tag of your HTML:

<link rel="stylesheet" href="/assets/css/styles.css">

And the entire HTML file will use that CSS file as It’s stylesheet just like as if you include CSS in your original HTML. This way, we can decouple CSS from HTML and ensure that each file only do what it’s suppose to do, and it is the best practice considering how lengthy CSS can be nowadays.

3, Jekyll - Day two

So with HTML and CSS, I was basically all set to make my own personal blog like I’ve been wanting to. And in fact, the first version of It, I made with raw HTML and CSS, with a home page, a single CSS file to style everything and individual different HTML for each of the post I plan to make, and that was day one. I quickly drop that approach though because i soon realize something:

“I can’t just write an entire HTML for every single post, and I can’t keep adding actual element to the home page’s HTML every time I add a new post.”

This is when I came across a tool called “Jekyll” - a SSG (Static Site Generator), which essentially solves the problem above. So Jekyll is not new, and I have actually seen it before. With the older version of this project (and still this project), the site is hosted with GitHub Pages, it essentially free hosting for a GitHub repository, though for a custom domain name you’ll have to take out the wallet but that’s kinda inevitable. And while configuring GitHub Pages, I glance at Jekyll for a brief moment, at first I disregarded it because my mentality was that I want something that I made from the ground up. But after encountering the mentioned “long-term” issue, I think to myself there must be some kind of tool that automate this process, I mean for a personal blog, theres only so much pages like the home page or about page, and all the post are practically of the same layout. So I did some digging and will you guess it, Jekyll showed up.

After and still is using it, Jekyll is truly a saving grace. Now, I can just write my posts in .md (Markdown) files, which is so much more enjoyable and manageable. Jekyll helps by generating everything you need for a “static site”. I won’t really go in depth into how to set it up, but these tutorials from Giraffe Academy helped out a lot: Jekyll tutorial playlist

Basically, all I have to do is create a HTML for my home page, another one for my posts, a CSS for styling, have Jekyll do the rest, and I have myself a blog! Its actually so much more convenient and make the entire project maintainable. This is a few cool stuff from Jekyll that I especially love:

• Templates: You can have a single HTML as a template, and assign it a certain “layout” attribute, next time you want to generate a site in that structure defined by the HTML, all you have to do is declare some front matter (just some config text at the start of the desired markdown files) and it automatically knows what you want and generate it for you, for example, this is a snippet from my template HTML for my posts:

<body>
    <header>
        <h1>(( page title ))</h1>
        <div class ="date">
            (( page date | date: "%d/%m/%Y" ))
        </div>
    </header>
    <main>
        <div class="post-content">
            <article>
                (( content ))
            </article>
        </div>
    </main>
    <footer>
        <div>
            <p>Written by: (( page.writtenBy ))</p>
            <p>Credits: (( page.credits ))</p>
            <p>&copy; 2024 Yukano</p>
        </div>
    </footer>
</body>

As you can see, instead of writing raw HTML yourself for every posts, Jekyll help set up everything with it’s “Liquid syntax”, allowing it to know where to put things from the markdown file to generate the desired HTML.

• Primitive logic processing: I love this so much for my home page, basically, Jekyll supports simple logic operations to do everything in its power to help you make the job as easy as possible, in my use case, I set it up for my home page in a way that it automatically put new posts into my home page, it’s so convenient:

<div class="posts">
    for loop here
        <a href="(( post url | relative_url ))">
            <img src="(( site.thumbnail_path ))/(( post.title | slugify )).png" alt="(( post.title )) thumbnail">
            <h2>(( post title ))</h2>
                <div>
                    (( post.description ))
                    <div class="date">
                        (( post date | date: "%d/%m/%Y" ))
                    </div>
                </div>
        </a>
    end for loop here
</div>

Basically it loops through all of my post, and apply the correct styling and generate the appropriate structure for how I want my post to display in my home page, in my case, a title, a brief description, a date, and a thumbnail. I just can’t express how more bearable Jekyll made this project to be. And that’s basically all I need for this site that you’re reading right now, my first post in my first blog. This was a fantastic experience and I can say that I definitely do enjoy web development, It really is a realm of its own when it comes to programming, but after this project, I’ve come to respect it and the people who painstakingly goes through the process of making them. GG web devs.

III, Conclusion

While I haven’t even scratch the surface of web development, like interactivity with JavaScript or popular library like React, I can say that for now, I’m happy with my little blog here that I can continue to post and even scale if I want to. But for now, I think I’ll just stick to making some blog posts and slowly catching up the documentation of all of my projects. Then, I’ll be much more comfortable to learn new things, knowing that I’m making the most out of them. This whole experience has taught me a lot of new thing and I don’t see myself backing out from web development, it’s actually, really neat.