My Coding Journey pt. 2: Nested divs and flexbox

Current Jam:

Nested divs. What can I really say about them other than they are kind of confusing at times. Honestly, nested code in general is just confusing to follow sometimes. But one thing I have noticed about HTML is that nested divs seem to be something that I, in my current limited knowledge, would say is a very important thing to learn. Most sites that I frequent every day use nested divs for their content. YouTube, Ebay, & Twitter to name a few.

Here is a sample of some nested divs from my StreamOS project:

 <div class="video-preview">
          <div class="thumbnail-row">
            <img class="thumbnail" src="assets/images/thumbnail_2.png">
            <div class="video-time">45:00</div>
          </div>
          <div class="video-info-grid">
            <div class="channel-picture">
              <img class="profile-picture" src="assets/images/channel-3.png">
            </div>
            <div class="video-info">
              <p class="video-title">
                Super Summer Mix Vol. 3
              </p>
              <p class="video-author">
                Chillhop_Guru
              </p>
              <p class="video-stats">
                19M views &#183; 4 years ago
              </p>
            </div>
          </div>
        </div>

This one isn't too bad but, I have seen them where they just keep going to the right for what feels like miles. If it wasn't for VS Code adding the lines to show what divs go together, I would be lost. This is a skill that I definitely want to get better at.

As I said, I feel like nested divs are a very important building block to learn and I am trying to do more beginner projects that use them in conjunction with my next topic: flexboxes.

One thing that goes hand in hand with nested divs is flexbox. Flexbox is another one of those concepts that I feel like is super important and that, at this moment, kind of gives me trouble. Combining flexbox with nested divs really lets you style your site in some creative ways. First let's look at the html for the segment:

<nav class="sidebar">
      <div class="sidebar-link">
        <img src="assets/images/home.svg">
        <div>Home</div>
      </div>
      <div class="sidebar-link">
        <img src="assets/images/explore.svg">
        <div>Explore</div>
      </div>
      <div class="sidebar-link">
        <img src="assets/images/subscriptions.svg">
        <div>Subscriptions</div>
      </div>
      <div class="sidebar-link">
        <img src="assets/images/originals.svg">
        <div>Originals</div>
      </div>
      <div class="sidebar-link">
        <img src="assets/images/youtube-music.svg">
        <div>YouTube Music</div>
      </div>
      <div class="sidebar-link">
        <img src="assets/images/library.svg">
        <div>Library</div>
      </div>
    </nav>

This section of code is for the side bar. It combines <nav> with <div> and then with some CSS magic, we have a sidebar.

.sidebar-link {
  height: 74px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;

There are some other elements like grid, relative and absolute that you can also throw in there to style it.

The reason why I want to learn this, other than it's important, is because I want to use it for my portfoloio/personal site. I have a rough layout idea in mind and the above elements and css will definitely come in handy for the "projects" page of my site. I have a few ideas I want to try but I am still learning about CSS right now in my Udemy course and I haven't quite gotten to the flexbox and grid sections of the course yet.

So far I have been having a blast learning CSS & HTML. I have learned a few things I didn't know and brushed up on some topics I already did. I'm going to keep whittling away at the course and try to apply the knowledge I'm gaining to small practice projects where I can get some experience. I have a few more tutorials lined up that I want to try out that use flexbox and grid but I want to try not to rely on just tutorials and try to apply the knowledge to my own projects both big and small. One thing that I can also do is watch specific tutorials on the topics I want to deep dive into. But again, I need to be careful as to not fall into tutorial hell. It's a fine balancing act but, I look forward to the journey.

I think in terms of "hardest part" out of the HTML/CSS sections, the nested divs and flexbox have been my problem child. I get the concept but, I find it hard to implement them sometimes. I'll definitely need to spend some time in this section of the course before moving on to the JavaScript section. Speaking of JavaScript....

Without knowing squat about JS at the moment, this is all speculation but, I imagine once I learn some JS, I'll be able to combine it with flexboxes and nested divs to make some pretty interesting things. So I'm really looking forward to that. I'm hoping that the few concepts I learned from python will be transferable to JS. I think that is the language I will need to sink the most time into studying.

But anyway, that's all for today. Thanks so much for reading and have a wonderful day/night!