Beginning First CSS Lessons on Our Web Dev Journey and Pondering if Recall of the Knowledge Will Prove Challenging Without More Practice
- rachel
- May 29, 2024
- 5 min read
Updated: Sep 16, 2024
Right now I’m about one-third through the Learn Enough CSS and Layout to Be Dangerous course. This is the fifth course in the Learn Enough curriculum, as described in my first blog post. Spring is a busy time for me so progress in the course has been slow, but so far it’s not been too difficult. Someone told me that things get more complicated in Section 5, where we learn about layout and templates.
Before I move on, I’ll post resolutions to a few small hiccups in Section 4 (Chapter 8 in the textbook).
Section 4.3, Floats. This is an issue only in the textbook. In the textbook this is Section 8.3, where there is a small error on page 206. Listing 8.10 is supposed to give the entire `index` page up to this point, but it actually only gives a small section of it. Section 4.3 of the CSS & Layout course at the Learn Enough website, however, has the complete listing (Listing 4.10). For those of you who are only working from the textbook, I’ve included the code listing below at the end of this post.
Section 4.6.2, Yet another exception: negative margins. I found that the server for placekitten.com is down. You can substitute any image for the one from placekitten if you have the same issue. I decided just to use the kitten image from the HTML course (Section 2.4). Most of you probably have it already amongst your files. In case you don't, however, and want to download it but no longer have access to the HTML course, I’ll copy here the commands of how to do it from the command line.
```
$ mkdir images
$ curl -o images/kitten.jpg -L https://cdn.learnenough.com/kitten.jpg
```
Then, in each of the four bio-box sections of your html file, use the following `img` element instead of the one sourcing placekitten.com: `<img src=”images/kitten.jpg” alt=”An adorable kitten”>`.
If you're using GitHub Codespaces as your coding environment and want to use a photo from your personal files, first make the folder for your images in your Codespace repository (`mkdir images` at the command line), and then simply drag and drop the file from your personal files to the images folder. Afterwards, modify the `img` elements as described in the previous paragraph, but substitute your particular file name and an appropriate `alt` description.
I’ve let Learn Enough know about this minor issue and hopefully it’ll get resolved soon. Apologies to Messrs. Hartl, Donahoe and Merwin for not using a more masculine photo, but at least it’s cute in a roguish sort of way 😊
If you use this photo you’ll see that black text for the names in the `h3` will show up better. Also, a different background color for the hero will complement the photo colors more nicely. I’m using #00693e, a beautiful rich green. Hmm, I like it so much here that I’m also going to use it for all the links that aren’t social media links. I know, these are just temporary images, but the color clash really bothered me!
Section 4.8.4, Syncing up. In Listing 4.40, the `.bio-box` style declarations do not contain the reversions from Listing 4.34. Specifically, we should have the following:
```
.bio-box {
border: 1px solid black;
box-sizing: border-box;
.
.
.
padding: 2%;
```
Actually, though, it looks like in the next exercises we’ll be changing the border-style of the `.bio-box`es and also the `border-color`. I’m not sure if these styles are meant to stay this way or if these exercises were only meant for practice. It produces an interesting effect on the bio-boxes but I think I’ll change the styles back, as in Listing 4.34, for a more straightforward look.
At this point, I’m not sure how much of this material is sticking to my brain. Maybe I should try to start a mini side project to apply the HTML and CSS material we’ve gone over so far. I could “pause” the course for a bit while I do this, but what I don’t want to do is spend so much time on it that I get sidelined by the side project. Besides, I’m enjoying the course a lot. Well, I’ll think about it. How are things going with you? Leave me a message and let me know!
Listing 4.10 (online) / 8.10 (textbook), complete: index.html
<!DOCTYPE html>
<html>
<head>
<title>Test Page: Don't Panic</title>
<meta charset="utf-8">
<style>
/* GLOBAL STYLES */
html, body {
margin: 0;
padding: 0;
}
h1 {
font-size: 7vw;
margin-top: 0;
}
a {
color: #f00;
}
/* HERO STYLES */
.full-hero {
background-color: #c7dbfc;
height: 50vh;
}
/* SOCIAL STYLES */
.social-link {
background: rgba(150, 150, 150, 0.5);
color: blue;
display: inline-block;
height: 36px;
}
/* BIO STYLES */
.bio-wrapper {
font-size: 24px;
}
.bio-box {
border: 1px solid black;
float: left;
font-size: 1rem;
padding: 2%;
width: 25%;
}
.bio-box h3 {
font-size: 1.5em;
}
.bio-copy {
font-size: 1em;
}
.bio-copy a {
color: green;
}
</style>
</head>
<body>
<div class="full-hero hero-home">
<h1>I'm an h1</h1>
<ul>
<li>
<a href="https://example.com/" class="social-link">Link</a>
</li>
<li>
<a href="https://example.com/" class="social-link">Link</a>
</li>
<li>
<a href="https://example.com/" class="social-link">Link</a>
</li>
</ul>
</div>
<h2>I'm an h2</h2>
<div class="bio-wrapper">
<div class="bio-box">
<h3>Michael Hartl</h3>
<a href="https://twitter.com/mhartl" class="social-link">here</a>
<div class="bio-copy">
<p>
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
<a href="https://www.railstutorial.org/">Ruby on Rails
Tutorial</a> and principal author of the
<a href="https://learnenough.com/">
Learn Enough to Be Dangerous</a> introductory sequence. Michael
is also notorious as the founder of
<a href="http://tauday.com/">Tau Day</a> and author of
<a href="http://tauday.com/tau-manifesto"><em>The Tau
Manifesto</em></a>, but rumors that he's secretly a supervillain
are slightly exaggerated.
</p>
</div>
</div>
<div class="bio-box">
<h3>Lee Donahoe</h3>
<a href="https://twitter.com/leedonahoe" class="social-link">here</a>
<div class="bio-copy">
<p>
When he's not literally swimming with sharks or hunting powder
stashes on his snowboard, you can find Lee in front of his computer
designing interfaces, doing front-end development, or writing some of
the interface-related Learn Enough tutorials.
</p>
</div>
</div>
<div class="bio-box">
<h3>Nick Merwin</h3>
<a href="https://twitter.com/nickmerwin" class="social-link">here</a>
<div class="bio-copy">
<p>
You may have seen him shredding guitar live with Capital Cities on
Jimmy Kimmel, Conan, or The Ellen Show, but rest assured Nick is a
true nerd at heart. He's just as happy shredding well-spec'd lines
of code from a tour bus as he is from his kitchen table.
</p>
</div>
</div>
<div class="bio-box">
<h3>??</h3>
<p>
The Future
</p>
</div>
</div>
</body>
</html>
