Learning Web Development, Day 6 — Skeletons and Navigation
Alas, this is still Bootstrap, this is still incredibly pointless, but now I'm finishing it out of sheer spite. And this part of the course is supposed to show me how to build an actual website.
It's not going to be good. That's pretty obvious. But let's see if I can figure out how it all works anyway.
02 — Bootstrap Project 1
I like how I'm 51% of the way through my "Web Development Fundamentals with HTML, CSS, and Bootstrap — Complete Guide", but The second half is taken up with two Bootstrap projects. And considering that there was a Bootstrap section in the first half, that means that over half of this entire web development course is nothing but a particular framework.
But then again, I guess it's great if you just want to keep on making blue and white gridded websites with the occasional light or dark grey. Mmmmm bland.
I'm trying to decide if I want to make an actual example site in this course or if I just want to use JSBin. On the one hand, I'd actually have something to show you. On the other hand, I'd actually have something to show you.
I'll see how it goes.
01 — Build Website Skeleton With Bootstrap
We will apparently be making a company website. I have decided that I am selling Summerisle Apples.
I like that the instructor has decided that the navigation needs to be in <nav>, but I am side-eyeing a bit that the rest is all in a bunch of <div>s, especially since then the contact form is in a <section> and the footer is in <footer>. You can stick these in sections, you know. Come on.
But here is my skeleton. Very simple, could be simpler.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Summerisle Apples</title>
<link href="https://cdn.jsdelivr.net/npm/
bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16c
r9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
crossorigin="anonymous">
</head>
<body>
<nav>
</nav>
<div id="services-overview">
</div>
<div id="featured-products-carousel">
</div>
<div id="services">
</div>
<section id="contact" class="contact">
</section>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/
bootstrap.bundle.min.js" integrity="sha384-FKyoEF
orCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/
BmnVDxM+D2scQbITxI" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/
core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/
vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/
bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/
EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXb
jrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous">
</script>
</body>
</html>
(All the scripts are all on one line per script, obviously. I just broke them onto separate lines because I hate horizontal scrolling.)
Obviously, it's not painful, not yet, but it could be a lot better. Like, um.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Summerisle Apples</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
</nav>
<section id="overview">
</section>
<section id="products">
</section>
<section id="services">
</section>
<section id="contact">
</section>
<footer>
</footer>
</body>
</html>
I know, I know, I just got rid of the scripts and threw things into sections. But this is a skeleton, I might improve upon it, y'know?
02 — Find Bootstrap Icons
This just showed me Bootstrap Icons. I get the feeling that we're going to be copy/pasting the SVG code. Which I can cope with. That isn't too painful.
They have a weird mouse icon though.
What is that why is the mouse part of your hand like some Cronenberg sort of nonsense. What happened to your fingers?
03 — Build Bootstrap Navigation
The instructor doesn't really make sense when it comes to explaining the difference between using class with regular CSS and using class with Bootstrap. Because it's exactly the same, it's just that Bootstrap has a pre-fab set.
But, dang, the way you have to call every. single. feature. in. the. class. Why am I typing out:
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded fixed-top">
When I could just be like:
<nav>
And have all those bits in the CSS?
The instructor keeps saying "I don't have to style that in the CSS, it's all in the Bootstrap CSS", but, honestly, with all the bits you're sticking in that class, it's like, maybe, three more words?
I mean, I guess it makes it easier when the big boss is suddenly like "what if it was on the bottom" or "what if it was dark" or whatever, but...eh...I'm still not seeing the benefit.
I do like that I've been shown how to do a navbar-toggler, but it wasn't really explained to me, and there are a lot of bits in the code that really should have been.
Like, okay, here is my new navbar.
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<svg xmlns="http://www.w3.org/2000/svg"
width="2em" height="2em" fill="currentColor"
class="bi bi-arrow-through-heart-fill"
viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.854 15.854A.
5.5 0 0 1 2 15.5V14H.5a.5.5 0 0
1-.354-.854l1.5-1.5A.5.5 0 0 1 2
11.5h1.793l3.103-3.104a.5.5 0 1 1
.708.708L4.5 12.207V14a.5.5 0 0 1-.146.
354zM16 3.5a.5.5 0 0 1-.854.354L14 2.
707l-1.006 1.006c.236.248.44.531.6.845.
562 1.096.585 2.517-.213 4.092-.793 1.
563-2.395 3.288-5.105 5.08L8 13.912l-.
276-.182A24 24 0 0 1 5.8 12.323L8.31 9.
81a1.5 1.5 0 0 0-2.122-2.122L3.657 10.
22a9 9 0 0 1-1.039-1.57c-.798-1.576-.
775-2.997-.213-4.093C3.426 2.565 6.18 1.
809 8 3.233c1.25-.98 2.944-.928 4.212-.
152L13.292 2 12.147.854A.5.5 0 0 1 12.5
0h3a.5.5 0 0 1 .5.5z"/>
</svg>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbar" aria-controls="navbar"
aria-expanded="false"
aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"
href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#services-overview">
Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#featured-products-carousel">
Featured
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#services">
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#contact">
Contact
</a>
</li>
</ul>
</div>
</nav>
Why do I have data-toggle and data-target in the <button>? Why is there a <span> inside the <button>? What is aria-controls, aria-expanded and aria-label doing?
Like, okay, I have a vague idea, but that's more than someone who is coming to this all new would.
Also? I copied the latest CDN Bootstrap scrips from their site, and the freakin' hamburger doesn't work the way the instructor's written it out. I've had to download the source files, open up the right one, and copy/paste in the scripts from that in order to get the navigation to show up.
This seems like such a major ballache for something so stupid.
04 — Build A Nav
When the instructor says "build a nav", they don't mean actual nav. This is us filling in the services-overview section.
Also, I'm kind of annoyed that the instructor keeps their mistakes in. I guess it's okay to have actual errors, to show that everyone makes errors, but when it's something like:
<div id="services-overview" class="py-5" text-center block block-1 full-page>
It'd kind of be nice to, y'know, not have that error. It's like I'm watching a horror movie, and the killer is behind you, come on stop messing around, just fix that end quotation mark, just put it in the right place, what are you doing?
Also, this is where we get to have our own CSS. I don't like that there's a default bit of CSS included for html and body, but that's just because it seems to be a bit redundant. I mean, okay, margin: 0 auto;, that's fine, but width: 100%; height:100%? Do I really need that?
html,
body
{
width: 100%;
height: 100%;
margin: 0 auto;
}
.block {
color: white;
background-color: black;
padding: 5%;
}
.block-1 {
background-color: #324376;
}
.full-page {
height: 100vh;
}
I do like height: 100vh; though. That is a neat little trick.
The code is still clunky as hell, though. Why am I making an <a> that has a class of btn?
<div id="services-overview" class="py-5 text-center block block-1 full-page">
<div class="py-5">
<svg xmlns="http://www.w3.org/2000/svg"
width="2em" height="2em" fill="currentColor"
class="bi bi-arrow-through-heart-fill"
viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.854
15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0
1-.354-.854l1.5-1.5A.5.5 0 0 1 2
11.5h1.793l3.103-3.104a.5.5 0 1 1 .708.708L4.5
12.207V14a.5.5 0 0 1-.146.354zM16 3.5a.5.5 0 0
1-.854.354L14 2.707l-1.006
1.006c.236.248.44.531.6.845.562 1.096.585
2.517-.213 4.092-.793 1.563-2.395 3.288-5.105
5.08L8 13.912l-.276-.182A24 24 0 0 1 5.8
12.323L8.31 9.81a1.5 1.5 0 0
0-2.122-2.122L3.657 10.22a9 9 0 0 1-1.039-1.57c
-.798-1.576-.775-2.997-.213-4.093C3.426 2.565
6.18 1.809 8 3.233c1.25-.98 2.944-.928
4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5
0h3a.5.5 0 0 1 .5.5z"/>
</svg>
</div>
<h1 class="py-5">Summerisle Apples</h1>
<p class="lead">
The finest apples in all of Scotland with more
information here and including a bit with a
newsletter or details. Whatever.</p>
<p><a href="#featured-products-carousel"
class="btn btn-primary my-5 px-4 py-2">
Learn More
<svg xmlns="http://www.w3.org/2000/svg"
width="1em" height="1em" fill="currentColor"
class="bi bi-arrow-right-circle"
viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14
0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16
0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5
0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5
0 1 0-.708.708L10.293 7.5z"/>
</svg></a></p>
</div>
Day 6 — Results
- You can use
<nav>,<section>, and<footer>, you are not beholden to<div>. - Bootstrap does let you do a little collapsed menu icon that opens up into a new icon, but I don't know how, so it is magic.
- Bootstrap also has a bunch of SVG icons you can add to your site, and they're
<path>, so that's nice. height: 100vh;makes the block as large as the vertical height of the browser window. This is neat.- Always make sure you're using the right version of whatever script you're being told to import, otherwise something will just break on you.
- I need to really learn more vanilla JS in order to understand what the heck is going on.
It's not bad, but it's not good either. An awful lot of extraneous code producing nothing but filler, and not really explaining why you're doing what you're doing.
But it's okay. I guess. I'll see how tomorrow goes with adding in a carousel and whatnot.
Today's Sticker
I got a package from Kawaii Pen Shop today, and in it was this Psyduck sticker. This is me every day. Every. Day.