First Phase Reflection

During the first week of May, we began the first phase of our bootcamp. We learned the three foundations of web development: HTML, CSS, and JavaScript. On the pre-work phase, we began by learning the very basics of JavaScript. In this first phase, we learned the more advanced concepts of JavaScript. In particular, the relationships between these three foundations and how all three, even with the simplest methods, can create magic.

I have been doing self-study for years before I entered the bootcamp, but there are three things that I learned from this first phase that made me feel more excited in becoming a software developer.

Semantic HTML

During my self-study, I learned about creating the base structure whenever I build simple websites. One of the foundational elements in making things work with its relationship with CSS is using the <div> tag. If you go to less-commercial sites, such as a personal blog or a fan site and check their source code, you will see plenty of <div> tags here and there with a bunch of ID names and class names as attributes along with the <div> tags.

When I learned how to use the <div> tag properly, I felt powerful as a developer, as long as there are ID name and class name attributes in them. However, as time goes by, I started to feel completely confused and overwhelmed with the nesting of all these <div> tags.

Here's an example of what I mean:

<!-- Sample code from my project using Bootstrap 5 -->
<div class="container-fluid p-5 text-center">
        <h1 class="mainheader">Cool Gitty Peeps</h1>
            <h5>GitHub Profiles and More!</h5>
            <div class="row height d-flex justify-content-center align-items-center">
                <div class="col-md-8">
                    <div class="searchBar">
                        <form id="form">
                            <input id="search" type="text" class="userProfiles" placeholder="Search username" />
                            <button id="#searchBtn" class="btn btn-primary"><i class="bi bi-search-heart"></i> Search</button>
                        </form>
                    </div>
                </div>
            </div>
</div>

That's quite a lot of nesting, don't you think? It's become so cluttered and confusing that I feel like I couldn't match the ID and class name attributes to the actual ID names and class names in my CSS file. Sometimes, it gets very confusing if I don't name the <div>s properly and it will be difficult to determine which <div> does what, and so on.

After learning (and re-learning) HTML, I discovered semantic HTML. If I were going to rewrite the code above, it would look something like this below:

<main class="container-fluid p-5 text-center">
        <h1 class="mainheader">Cool Gitty Peeps</h1>
            <h5>GitHub Profiles and More!</h5>
            <div class="row height d-flex justify-content-center align-items-center">
                <div class="col-md-8">
                    <section class="searchBar">
                        <form id="form">
                            <input id="search" type="text" class="userProfiles" placeholder="Search username" />
                            <button id="#searchBtn" class="btn btn-primary"><i class="bi bi-search-heart"></i> Search</button>
                        </form>
                    </section>
                </div>
            </div>
</main>

The tags <main> and <section> are examples of semantic HTML tags. There may still be some <div> tags left in the code example above, however, semantic tags did make this code sample a little cleaner and a lot clearer. The <main> tag helped me identify that this is the main element of the entire web app. The <section> tag helps me identify that this is a search bar section that includes the <form> element and the <button> element.

There are some hundreds of semantic HTML elements available for use, but <main> and <section> are some of the most common tags used when building the skeletal structure of a website or a web app.

I'm still new to semantic HTML, but I do hope I would incorporate this more often whenever I start building my HTML document(s) for future projects.

CSS Specificity

Just as I thought that I've got the main core of CSS covered, there is one particular aspect of CSS that I wasn't aware of during my self-studying period: there is a hierarchy within CSS that is more formally known as CSS Specificity.

There are four categories in hierarchy and specificity:

Inline Styles: <p style="color: red;">...</p>

IDs: #mytext

Classes, pseudo-classes, and attributes: .thispart, link:hover, [src]

Elements and pseudo-elements: h1, :before

We also had to memorize on how to calculate the specificity in each of these categories. More information is found here.

As far as I know, the highest specificity is the inline styles, while the lowest are the elements and pseudo-elements. However, there is one keyword that we must be careful on using: !important

!important overrides everything including inline styles. If we have to use it, we need to be careful with using this keyword.

Building Web Apps with APIs

We've covered so much with the more advanced JavaScript. Learning about DOM, events, and connecting the dots between HTML, CSS, and JavaScript. But what's also amazing is that we can create apps with data coming from other sources that we call API.

We can build any web app that takes advantage of the data provided by the API. In JavaScript, there are different ways of fetching the API which included jQuery and React and XMLHttpRequest. But in this phase, we learned a relatively new feature in JavaScript today: the fetch() API.

Here's an example of using fetch():

// We are fetching GitHub profiles from the GitHub API
fetch(`https://api.github.com/users`)

// We want to return the profiles into JSON
   .then(response => response.json())

// We can now use the data
   .then(data => {
     console.log(data)
// We can add some markup here
...
})

// We'll catch some errors
   .catch(error => console.error(error))

We haven't learned about the other methods yet, but the fetch API was created as a substitute or a replacement for XMLHttpRequest. The latter was known to be a very complex, complicated way to fetch data, and therefore fetch was created to make the data fetching a lot more streamlined and easy to understand.

Last Thoughts

It was fun in the beginning, but it got very difficult and complicated to the end. I struggled a lot in the end of the phase because of my lack of extra time due to many outside situations. But despite of the time difficulties that I had, I learned a lot of valuable concepts and discovered new concepts I never knew existed, from the CSS Specificity to building our own cool apps using APIs already provided to us by many services all over the internet.

The next phase introduces us to React, one of JavaScript's most popular frameworks. Frameworks are supposed to make things easier for us with our JavaScript coding journey, but at the same time, it will be another difficult challenge.

I look forward to what's to come, and I pray for more time and proper time management in the coming future.