DEV Community: vance

Learning in public

vance — Fri, 07 Feb 2025 22:20:00 +0000

Have you heard the advice to "learn in public" yet?

A friend just asked an interesting question in a coding group chat that I belong to:

For all my friends here that learn - or learned - in public, how did you go about that, and did you notice that it made a difference in helping get a job and/or expediting your learning? I've been trying to come up with some sort of plan, but have been having trouble figuring out what to do or how to do it. -- Logan

In trying to reply, I ended up gathering quite a few resources and recommendations together, so I figured I might as well take all those links and thoughts I just gathered and make a blog post of it!

So first of all, what do we mean when we say "learn in public"? It's very similar to the "build in public" movement among developers, which encourages sharing your projects while they're still in progress instead of only after they're complete, allowing folks to see your entire development process instead of only the product. Learning in public means taking that approach to your entire journey of learning to code--or learning anything, for that matter, but the term does seem to originate in the coding community.

This blog post by swyx is what I'd consider the 'learn in public manifesto' and may or may not be the origin of the phrase. It briefly outlines the how--by creating what they call "learning exhaust" like tutorials, Twitch streams, or Stack Overflow answers--and, more obliquely, the why--to network and build connections, to learn faster by teaching and by getting feedback.

I really adore the learn in public movement (can I call it a movement?). I love seeing what other people are learning. Sometimes it's just curiosity, but also, even though the information might not be as sound, there's something so much more relatable and comfortable about reading the messy notes of a fellow learner instead of only ever tutorials from experts. Seeing someone else's learning journey, especially when they're learning something similar to me, makes me feel like I'm not alone in my efforts and boosts my motivation and resilience--and boy do you need resilience when you're learning to code, haha. What's even better is when you actually reach out to talk to your fellow learners, get to know some of them, and start growing a real sense of community. That's how I ended up in this little group chat where the question was asked in the first place!

I really enjoy sharing my own learning too, besides enjoying when other people do. I like creating a record that I can look back on to see how much I've grown, especially when I feel dispirited about how far there still is to go to reach my bigger learning goals, or just when depression has me feeling like I can't do anything. And when I write a tutorial or blog post, that's a great resource for my future self to come back to later when I forget how to do the thing. Likewise, recording general notes about your learning creates a useful resource you can review later when you need a refresher--a resource customized to the way that you think and the specific items that you had struggled with or been most interested in--and posting my notes publicly instead of keeping them private gives me a little push to care more about keeping them well-organized and understandable, which again benefits myself when I'm reading them later. Writing tutorials is great too; it really helps crystallize your knowledge when you have to think about how to explain it in a way someone else could understand, and I even found that it helped me create connections between different concepts when I had to explain what background knowledge my tutorial required or when I found myself feeling like I should throw in a "learn more here" link to another topic (and building connections is reputed to be be a cornerstone of how we learn, at least according to the course Learning How to Learn). And I love that it might even be able to help someone else learn, perhaps!

But does learning in public actually get you results? Let's go back to what Logan asked: can it help you get a job? Can it help you learn faster?

Well, I have to admit, in my experience of learning in public I've never directly observed any concrete benefits like that, only the more abstract stuff like motivation (which is hard to accurately attribute to a cause). Or like, yeah it's nice that I have these personalized notes I can look back to, but do I actually learn faster because of that? I can't say. But it's worth noting, I've personally done only a minimal amount of learning in public. I've only written one or two blog posts/coding tutorials; I only kept a daily progress log for 46 days; I only took and published notes for about half of one course. So it kinda makes sense that I haven't gotten much out of it, since I haven't put much into it either.

One thing to note about the question of "learning faster": if you're measuring that in terms of say, how long it takes you to complete a course, and if you only have a limited amount of time/energy to dedicate to learning, then maybe it won't help with the speed of your learning--just because the act of learning in public itself takes up time, too. It takes time to write a blog post or answer Stack Overflow questions. Sharing notes takes time if you care about making your notes look "presentable" (I strongly encourage sharing raw, messy notes anyway!). Even small things like writing a one-line daily log or making a tweet about what you learned today have some cognitive overhead that could potentially draw from your pool of energy for the learning itself. Then again, do you just want to complete a course faster, or do you want to reach mastery faster? Because there's a difference there too, and it's possible that taking more time upfront can lead to deeper or more thorough understanding and allow you to "level up" faster in the long run.

I suspect that learning in public actually could help you get a job or learn faster/better, but it hinges on actually getting noticed. Any time you're publicly talking about coding (or whatever your field is), you create the opportunity to network with others in the field, and networking is well known to be a major factor in finding jobs. Some of the things that can help you learn faster are if others ask you questions, or conversely, if someone who's more experienced than you sees your notes and notices you've made a mistake and reaches out to correct you. But those things can only happen if people actually find you, and well, the state of the internet is such that people don't always actually notice you, and even fewer of them actually decide to reach out and say something. Personally, I don't recall ever having any meaningful interactions as a result of my attempts at learning in public. So, your mileage may vary, and you can only get out as much as you put in. (There are probably ways to try to get more noticed, like posting under hashtags, but that's a whole separate conversation and it's out of my wheelhouse.)

But okay, let's say you've made up your mind that you want to try learning in public. How do you actually go about it?

The short answer is, you just talk about what you're learning somewhere public like social media. Or you write notes/blogs/tutorials and you put them somewhere. (Or of course there's a million other things you could do, like hosting livestreams while you study/code, going on forums and answering other people's questions, whatever.)

But when I saw Logan's question, the very first thing that came to mind for me was daily coding challenges like 100 Days of Code or Codedex.io's 30 Nites of Code! This is really what got me started on posting about what I was learning. The great thing about these challenges is that the community aspect is built in--there are all kinds of social media tags, Discord servers, etc that people who do these challenges use to find each other and spread encouragement (encouraging other participants is even one of the official rules of the 100 Days of Code challenge!). So that definitely helps with the "getting noticed" point above.

I got 46 days into the 100 days challenge, and for those 46 days, I kept a daily log in Notion of what I worked on each day (and then also posted it on Twitter each time). You can check that link to see exactly what I was recording each day, and feel free to copy for your own learning tracker! One of the especially useful elements of it for me was the "what I learned" box, where I tried to distill one key takeaway out of each day of learning. It doesn't have to be limited to 100 (or 30) days, of course, and you don't have to be participating in one of these challenges to just start your own similar log of what you learn each day. There's also an official GitHub repo for logging progress with 100 Days of Code; you can check out the forks to see some other examples of how people log their daily learning.

The other big option is to post blogs or notes. It's pretty simple to start a blog right here on Dev.to, or on Hashnode, two blogging platforms specifically for coding. There's also a great community platform on Codedex.io where you can write blog posts, although you do need to complete a few lessons to "unlock" the community features. In these cases, there's already an audience and community on the site, so it's easier for your posts to get seen. If you want a more personalized blog, or want to blog about learning other stuff besides coding, you can try Substack. If you wanna get fancy, you can even self-host the similar blogging platform Ghost, like I do for my art blog! (Self-hosting is a great learning experience in and of itself!) IMO, these options are best when you want to write more focused and thought-out pieces like tutorials and guides, or even just "here's everything I know about CSS selectors" or whatever. Basically, I turn to these blogging platforms when I'm writing directly for the sake of informing other people.

On the other hand, when you just want to share your casual working notes that are written mainly to yourself, you can get a better workflow with other platforms. I really like Notion for learning notes. In fact, here you can see my general directory of learning notes on all different topics. Some are complex sets of sub-pages, like my notes for the freeCodeCamp web dev course which include the each project's code and an overall glossary alongside individual lesson notes, and others are just short blurbs, like my Linux notes page which currently only contains a list of what each folder in the Linux file system is for. But who knows, by the time you read this blog post maybe I've added more! And that's the great thing about Notion for note-taking: it's a living document that you can easily keep editing and building upon, with it available as a live site all the while. The other advantage of Notion is being able to nest pages inside each other or quickly create links between them, much more efficiently than you could link different Hashnode posts to each other, for instance--so you can do what I did for freeCodeCamp and have one page for a course, with subpages for each lesson or topic, all bundled up together.

Another interesting option can be to write your notes as Markdown files in a public Git repo hosted on GitHub/GitLab/etc, like this person did. It can be nice to have it live in the same place as your code and means that folks like recruiters might see it when checking out your projects, and it doesn't disrupt your workflow as much if you spend most of your study time in a code editor (you can browse, write, and publish your notes all from within VS Code for instance).

Of course, if you want that crucial community engagement and feedback on your notes that are hosted on Notion or GitHub or wherever else, I recommend posting a link to your notes on social media each time you add something new to it.

So how about it? What are you learning, and what do you have to say about it?

Cross-posted from Codedex Community

How to prepare for a coding bootcamp

vance — Fri, 29 Dec 2023 01:16:51 +0000

Are you planning to participate in a coding bootcamp? That’s awesome! It’s a big commitment to make, though, and it can really disrupt your daily life. It’s a good idea to take some time before the bootcamp starts to plan out your approach. Doing so will increase your chances of sticking it out until the end, set you up to learn more effectively, and let you feel better while doing it.

This article can apply to any kind of coding bootcamp, but was written especially for people getting ready to join the Bad Website Club web development bootcamp. This free bootcamp by Jess and Ramón kicks off on 1/5/24!

Make a trade

It’s a bad idea to expect yourself to take on a major new commitment like a coding bootcamp while still maintaining every other part of your routine. What are you willing to let go of during this time period in order to make space for learning to code? Don’t just think about making time, but also about energy and exertion.

I often see people saying they’re going to give up recreation time, like watching TV, and replace it with learning to code. I don’t know how many of those people it actually works out for, but I can tell you, it didn’t work for me. That’s because, even though I freed up my time, cutting out my relaxation time didn’t free up any energy that I could use for hard mental work—instead, losing my “cool off” time made me more stressed than ever, so I wasn’t able to focus well enough to actually learn effectively, and quickly burned out and gave up.

Instead, try asking yourself if there are other commitments that you can cut back for the duration of the bootcamp. Can a project be delayed until after the bootcamp ends? Is there a hobby or side hustle that you’re willing to stop working on for a while? Can somebody else take over one of your responsibilities now in exchange for you taking on their part after the bootcamp? It could even be a matter of temporarily lowering the standards you hold yourself to, like giving yourself permission for your house to get messy during this time.

Prepare a routine

Make sure you know how many hours per week the bootcamp expects its students to study, both in class sessions and on your own. Where does this fit into your existing schedule? Choosing what to let go of might have already given you an idea of where the bootcamp will fit in your schedule.

If you can choose a specific time and place where you’ll do your studying, it should make you more likely to stick to the habit. This is also a good time to physically clear off your desk or otherwise prepare a good studying environment that will help you focus.

Think also about how you’ll pace yourself over the length of the bootcamp. It’s easy to dive in too deep at the start and then run out of steam before the end. If your bootcamp doesn’t provide deadlines for the assignments, maybe try coming up with your own plan about how many days to allot yourself for each round of homework.

Just remember that you can—and probably should!—adjust your routine once you actually start on the bootcamp, when you have more information about how much time the work actually takes for you to complete. Your personal pattern will probably be at least a little different from the “average” completion time. Everyone has their own pace, and it’s totally okay if your work time is different from someone else’s!

Anticipate setbacks

We always hope that life will be nice and let us focus on our goals, but when a bootcamp is months long, it’s just inevitable that at some point, life will get in the way and you won’t be able to stick to the schedule you planned. Or you’ll run into that one pesky assignment that you really struggle to complete. It’s okay! It happens to everyone! The most important thing is that, when this happens, you don’t give up. Believe in yourself and just keep taking whatever the next step is!

Maybe this is controversial advice, but giving less than 100% effort can actually be a valuable strategy to make the most of your limited time, especially if you fall behind. You may be able to catch back up by just not putting as much effort into the backlogged work. It’s much more effective to let yourself learn some of the material imperfectly than to give up and not finish the course at all!

On the other hand, does your bootcamp have a deadline for completing the program? If it’s like the Bad Website Club bootcamp and has no deadline, then don’t sweat it and just keep going at your own pace. There’s nothing wrong with finishing the program later than expected.

Or maybe there will come a point when you lose sight of your motivation for taking on the bootcamp in the first place. Think about that right now—why do you want to do this bootcamp? Is there a dream you’re chasing? Maybe you want to change your career to provide a better life for your family, or maybe you want to make a video game so that you can share a cherished idea with the world. Think about both what goal the bootcamp will help you accomplish, and also why that goal is meaningful and important to you. Then write this down, and put it in a place you’ll see it when you’re studying.

Consider your wellness

Besides being time-consuming, bootcamps can also be a stressful or exhausting experience. How will you look after yourself during this time? What can you set up now to make your self-care easier during the bootcamp? Maybe this means buying easy-to-prepare foods to make sure you can still eat enough even if you’re worn out, or starting a mood journal that you can use to monitor how you feel during the bootcamp. Think again about the routine that you’re planning, and make sure to book dedicated time to decompress and care for yourself in addition to study time.

Meet people

Does your bootcamp have a Discord, Slack, forum, or other way to communicate with classmates that you can already access before the bootcamp begins? It can be nice to start chatting there and get to know some of the people who you’ll be learning alongside! In my experience, it makes all the difference in the world to feel like you’re not in it alone, and the sooner you start building those relationships, the sooner you can reap the benefits of feeling like you’re part of a community. Plus, if you need to ask your peers for help later in the bootcamp, I find that it’s less scary to do if you already know some of the people.

If you’re joining the Bad Website Club bootcamp, then the Bad Website Club Discord server is a great place to introduce yourself, talk about your goals, and start getting to know your fellow learners!

Bonus: Check your foundational knowledge

This article focused mainly on how to prepare your lifestyle for the bootcamp, but you may also want to check how prepared you are for the curriculum. See if your bootcamp posts a list of prerequisites. If it’s a bootcamp for complete beginners (like the Bad Website Club bootcamp) then you probably don’t need to worry much about this, but you may still want to review this page from The Odin Project about computer basics and make sure everything at least sounds familiar. If your bootcamp is related to web development, then you might also be interested in The Odin Project’s lesson on how the web works to gain some extra context for the work you’ll be doing.

Good luck with your bootcamp, and please don't forget to take care of yourself along the way!

Learning about Docker

vance — Tue, 07 Nov 2023 09:09:58 +0000

Today I spent some time learning about Docker, and I wanna try to solidify that learning by recapping it for myself here!

I've been meaning to learn about Docker for a long time, but why did I finally look into it today? Well, as you can see from my previous post on Codedex, I've been learning about web servers lately, and trying to set up different websites for my art stuff. Since yesterday I've been looking into building my own ecommerce storefront to sell my art from, and today I saw someone saying that the fastest way to install a certain ecommerce platform (Magento) was via Docker. So I figured, might as well finally get around to learning it! I'll also need it for some of the stuff I'm trying to do with my Raspberry Pi, I think.

So first, what's the point of Docker? It's a way to bundle up an application together with all of the system configuration required to run it. It makes it easier to move the app you're coding between environments--like from your local development environment to a deployment--without having to manually configure everything based on the details (like OS and architecture) of each machine. It lets you kind of ignore the particulars of what computer you're running the Docker container on, and guarantee that the system will be configured in a well-defined way. I think the reason that the one dude said Docker was the fastest way to run Magento is that the Docker image he was using includes all the dependencies Magento requires, along with all the configs needed for each of them, and so you can just install this one Docker image in a single step instead of having to go through the installation and setup of each dependency one by one and manually configure them all to talk to each other correctly. Somebody else already did the step of configuring them to talk to each other, and saved it to this Docker image.

By the way, a "Docker image" is a file that contains the source code that you want to run, and a "Docker container" is the live instance running a Docker image.

Docker is a type of virtualization technology, but it's not the same as a virtual machine. A virtual machine encapsulates the entire operating system, including the kernel. But a Docker image only includes the "application layer" of the operating system, not the kernel. This makes Docker images way smaller files than the images(?) for virtual machines, and makes Docker containers much faster to create. A Docker container actually uses the kernel of the host machine that it's running on!

(Interesting sidenote: This means that Linux-based Docker images should only be able to run on Linux machines! How did they deal with this to allow devs to work with Docker containers from Windows or Mac computers? Well, the Docker Desktop software that you have to install to run Docker on Windows or Mac actually creates a Linux virtual machine to run your containers on top of!)

(Sidenote to the sidenote: There's a Docker Desktop for Linux too, and these days Docker encourages you to install via Docker Desktop even on Linux, but apparently it is VERY picky in its system requirements, and it isn't compatible with the XFCE desktop environment that I use! So after way too much troubleshooting, I had to just uninstall Docker Desktop and try again with the old school Docker Engine packages.)

To start working with Docker containers, you need to install the Docker software on the computer you're working from--and if you want to deploy your app via Docker, then you also need to install Docker on the deployment environment. Like in my case, if I want to use Docker for my Magento store, I'll need to install Docker itself on the server that my store will be hosted on first, before I can create the Magento container there.

Once you have Docker installed, you just need to start the service/daemon, and then you can start running Docker commands from the terminal! There's a bunch of commands you can use to download Docker images, and to start and stop and manage containers, but I'm not going to bother listing out the details because it's easy enough to look up the commands when needed. Here's a nice guide.

The workflow is like this:

Start the Docker service (you can set this up to happen automatically)
Download (pull) the Docker image that contains the app you want to run
Create and start a container from that image
Access the container's app through a certain port on your computer
Stop the container when you're done

If you want to actually interact with the app that's running inside the container, then you need to do what's called binding a port. This is an argument you pass in while creating the container that tells your computer that, if you try to visit a certain port, direct that request to the port inside of this container instead. For example, if you're running a web server in a Docker container, that would normally be available over HTTP on port 80 of the server--but in this case, that refers to port 80 inside the virtual system. Port binding means telling your real, physical computer "hey, when I look at your port 80, I want you to pull up this Docker container and show me what's on its port 80." It doesn't even need to be the same number! That's really useful for if you have like, 3 containers on your computer that are all running web servers and all expect to be on port 80--they can all be on their own internal port 80 at the same time, meanwhile they're each bound to a different number of external port, so they're all available at the same time.

(By the way, I don't really understand ports or networking, so my language might not be quite right... please correct any mistakes I made!)

Lastly, all of that was assuming you're working with an image that contains somebody else's code. But what about when you want to actually put your own code into a Docker image? You write what's called a Dockerfile in your project directory, and use that (with a terminal command) to build your image! Then you can use it just like any other image. If you're like me, maybe you've been seeing these files called "Dockerfile" in Git repos for a long time and wondering what they're for, right? It feels so good to finally know what it does, haha. If you look inside one of these, it's a pretty straightforward text file. It's just a bunch of instructions that tell Docker how to make your image. Interestingly, it always needs to begin by calling out a pre-existing Docker image that will be used as the basis of your image! For instance, this might be an image that just contains the basic operating system files, or it might be an image pre-configured with something like Python or Node. (It does make me very curious about how those "starter" operating system images get created though!) Then, you add instructions to copy your local files into the Docker image, and commands to run to set up the environment, like npm install. Then there's always one last command that tells Docker how to start your app itself, like by executing a certain file.

And I think that's about everything I learned today! Phew! Sure looks like a lot now that I've written it all out... but I haven't even started experimenting with using Docker myself yet. All I did was install the software and run the hello-world Docker container to test my installation. Looking forward to trying out that Magento Docker image that I was reading about, though!

Cross-posted to Codedex.io Community

BWC Bootcamp Recap: Week 3

vance — Thu, 24 Aug 2023 06:05:34 +0000

Hello friends and learners! Can you believe we’re more than halfway through the Bad Website Club web dev bootcamp already? Don’t worry if you’re not that far along yet yourself though—there are no deadlines here and you’re free to complete the work at your own pace.

There was a lot of material this week, but fortunately, many of the topics appeared in more than one lesson. This time the post is organized by topics addressed instead of by freeCodeCamp lesson. I hope this helps you make more connections between what you did in the different lessons and see more of the big picture of what you’re capable of now!

Accessibility

The role attribute is used to tell assistive technology what the purpose of an element is. It’s particularly important on elements that don’t already have semantic meaning built in. This is part of the system called ARIA (Accessible Rich Internet Applications).
When you assign the role as region, you can use the aria-labelledby attribute to indicate which text acts as a name for the region.
Navigation is a key aspect of accessibility! Using semantic HTML elements to structure the page create accessible navigation. These elements include header, nav, main, section, article, and footer.
Visual accessibility: Choose a typeface that remains legible even at low resolutions. Also, there needs to be enough color contrast between text and its background. You can use a color contrast checker to help.
Inputs should have a label element connected to their id, as we learned in the lesson on forms.
Sometimes we want certain text to be read by a screen reader but not visible on the page. In those cases we can create a “screen reader only” class, often called sr-only, and give it a certain set of properties that make it invisible. You can learn more about this method at WebAIM.
Conversely, to make an element hidden from assistive technology, put the attribute aria-hidden="true" in the opening tag. Of course, it’s important to keep the visual content and the screen reader content in harmony, so you should generally only use this on text if it’s repeated nearby in a screen-reader-only element.
scroll-behavior is a property that can be used to change what happens when you click on links to different sections within the same page, and make the page appear to scroll smoothly instead of jumping instantly to the new section. However, visual movement like this can cause problems for certain users. We should put this behavior inside a media query with the rule prefers-reduced-motion: no-preference so that the effect doesn’t apply for users who have not requested low motion in their browser settings. (See below for more on media queries!)

Tables

Tables are a way to display tabular data, or in other words, information that can be logically arranged into rows and columns. The Bad Website Club schedule page uses tables to organize the information, because that information consists of a series of items that all share the same categories. In that example, each day’s class makes up a table row, and each category of information such as date or URL makes up a table column.

Start by making a <table> element.
The first element inside a table should be a <caption> element, which describes what the table is about.
Next, inside the table after the caption, add one <thead> (table header) and one <tbody> (table body). thead will have the headings for the columns, and tbody will contain the main data of the table.
The data of an HTML table is grouped by rows. The children of both thead and tbody will be table rows, or <tr> elements.
Then, within each row, the content gets split into cells. For the header, these should be table heading <th> elements. Regular non-heading cells are table data <td> elements. Both the td and the th elements get nested inside the <tr>'s.
Tables have some very particular default styles—they’re one of the few elements that get borders by default. But if you don’t like the look, don’t worry, you can still customize their appearance as much as every other element! There are also a few properties useful for tables that you might not use elsewhere, such as border-collapse and vertical-align.

Pseudo-selectors

Pseudo-selectors are extra keywords that get added on to the end of a CSS selector, and they let us get more specific about what we’re selecting. Some of them select an element based on its context instead of just what it is, while other ones give us access to things that can’t be targeted by normal selectors.

The term pseudo-selector refers both to pseudo-elements like ::before and ::after, and pseudo-classes like :first-of-type. Pseudo-classes are written with one colon (:) and pseudo-elements are written with two colons (::).

Pseudo-classes

The selector h2:first-of-type targets only the first h2 element on the page. Likewise, add the :last-of-type pseudo-selector on to the end of a type selector to target only the last instance of that element. Or :nth-of-type() with a number between the parentheses to target only the 5th or 20th or whatever element of that type.
Note that we mean “first” and “last” based on what order the tags are written in the HTML file, not where they visually display on the page—if you put some elements inside a flexbox set to reverse order, it does not reverse what order they’re counted in.
It’s not just for h2s of course! Selectors like :first-of-type can be added to pretty much any type selector.
The advantage of using these selectors instead of an ID selector (with the ID of the first h2, for instance) is that, if you edit the HTML later and rearrange the order of h2s, you won’t need to update the CSS to make it still keep selecting whichever one comes first.
:not() is a special pseudo-selector that selects the inverse of another selector that you write between the parentheses. In the balance sheet, we used the selector span:not(.sr-only) to target every span except the ones with class sr-only. Notice how we still use the . syntax for the class selector inside the parentheses.
Remember using a:hover or a:visited in past lessons to change how links look when the user hovers over them or after they’ve been clicked? These were pseudo-classes all along! you can add the :hover pseudo-class to many other elements too, not just links.

Pseudo-Elements

There weren’t any pseudo-elements in the balance sheet lesson, but we actually saw ::before in the accessibility lesson and ::after way back in the flexbox lesson. These are called pseudo-element selectors because they create a “fake” child element at either the start or end of the targeted element. They’re often used with the content property. For example, in the quiz, we programmatically added the word “question” before each question number by writing this CSS rule:

p::before {
  content: "Question #";
}

Instead of using these pseudo-elements to add text content, we can also use them to draw shapes, similar to how we’ve used divs. The piano lesson used this method with the ::after pseudo-element to draw the black keys onto the piano as a “pseudo child” of certain white keys. When you use it this way, just remember to include content: "", or else the pseudo-element won’t display at all.

There are many, many more pseudo-selectors that we haven’t seen yet! To learn more, check out MDN’s pseudo-selector overview or, to find out what all the possibilities are, the full pseudo-classes documentation and pseudo-elements documentation.

Position

In the Picasso lesson, we used the position property to help us arrange elements at very specific distances relative to one another. It’s especially useful for doing CSS art like that, but it can also be applied in creating regular page layouts.

position: absolute removes an element from the normal document flow, or in other words, takes it out of the place where it would normally sit in the page and doesn’t reserve space for it. Instead, it positions the element a certain distance away from a container, ignoring the size of the other content around it and letting it layer on top of the “normal” elements.
In some cases, absolute position won’t work until you also specify a value for at least one of the top, bottom, left, or right properties. These tell the absolute item how far away to be from whichever side you pick.
That “container” that these distances are calculated in relation to will be the nearest ancestor (parent, or parent of a parent, etc) that has position: absolute or position: relative. If none is assigned, then the container will be the body element. In the balance sheet, we gave the table elements position: relative so that it would act as a positioning container for the caption element that we wanted to absolutely position 0.5rem in from its left edge.
We also used position: fixed in the quiz lesson to make the header remain fixed to the top of the page, so that it remained visible even when scrolling down. We did almost the same thing in the balance sheet, setting the years heading to stay at the top of the page when you scroll down past it, but in that one we used position: sticky instead. The difference is that sticky reserves space for the element in the normal document flow, whereas fixed completely removes it into its own layer. In my personal opinion, sticky is usually better for stuff like headers, because it doesn’t leave a gap in the document flow.

Position can be pretty confusing, and it definitely makes more sense with visuals, so check out these two short YouTube videos: a video from the great Kevin Powell explaining absolute position that helped me in the past, and a video from Slaying the Dragon that goes over all five position types.

Z-index

The z-index property determines how elements layer on top of each other. Elements with higher values of z-index are drawn on top of (or closer to the front than) ones with a lower z-index.

In the Picasso lesson, we used a negative z-index to put the back wall behind everything else, and then we used different positive values to arrange parts of the scene on top of each other, like making the table go in front of the characters.

Elements where we don’t set the z-index property are equivalent to z-index of 0.
As we saw in the Picasso lesson, changing the Z-index is most often used in combination with absolute positioning.
Z-index doesn’t work on elements that have the default position type of static. If you want to use z-index but otherwise don’t need to change the element’s position, give it a position of relative.

Media queries (responsiveness)

Media queries were properly introduced in the piano lesson, but we actually saw them once or twice beforehand as well. The basic idea is that they allow your CSS to respond differently when your website is viewed in different contexts (AKA on different media), which is why we call this responsive design. The topic is actually much broader than freeCodeCamp has shown us, so you may want to read more about them on MDN if you’re curious.

Media queries use a slightly different syntax than anything else we’ve seen in CSS so far. It’s a type of at-rule, meaning that it uses a keyword with an at symbol @ in front. They look like this:

@media (max-width: 800px) {
  p {
    margin: 1rem;
  }

  body {
    width: 100%;
  }
}

Notice how there’s more than one selector and rule set nested inside the media query! You can think of it almost like an entire mini CSS file wrapped inside of the query. You can write as many different rule sets for different selectors as you want, all within the same media query, and you can use all the same selectors as usual.
The statement inside the parentheses in the first line is the condition for when this entire set of styles should be applied. In this example, when the viewport is 800px wide or smaller, then this set of rules will be applied. When the viewport is larger than the rule’s max width, then these styles will be ignored.
It’s possible to combine more than one condition. For example, to make an intermediate size for the piano, we used the media query @media (max-width: 1199px) and (min-width: 769px).
If you’re using a media query to override styles that you declared elsewhere in the file, then make sure that you put the media query after them! When you’re using a min or max screen size rule to make a responsive layout (as you often will), it’s a good habit to always put this media query at the very bottom of your file.

Odds and ends

aspect-ratio is a property that sets the ratio of the width and height. It’s useful when we want to make sure an image doesn’t get distorted when it gets resized.
max() and min() are two CSS functions that can take two measurements and choose whichever one is larger or smaller. This is most useful when one of the measurements is in relative units, where its actual size might vary. For example, font-size: min(5vw, 1.2em); will set the font size to be whichever of 5vw and 1.2em is smaller—and which one is smaller will change depending on the viewport size.
calc() is a CSS function that lets you do some math and calculate a value dynamically. For example, width: calc(100% - 20px); will make the width 20px less than whatever the parent’s width is, and it will update and recalculate any time the parent’s width changes. You can also use it for static values like calc(350px - 78px) if you just don’t want to do the math yourself! But it really comes in most handy when you’re trying to do math between two different units.
You can use the !important keyword to protect a rule from being overwritten by any others. Just add the word to the end of the declaration right before the semicolon, as in border: 0 !important;. However, it’s best to avoid relying on this keyword because it makes the code harder to read and understand later. Often, you can prevent clashes just by making your selectors more precise instead.

That was a lot (I think these posts might be getting longer each week, whoops), but I hope it’s starting to sink in bit by bit! It’s okay if things still feel confusing right now. We’re learning so much and I’m so proud of everyone who’s participating in this bootcamp! I love all the work I’ve seen so far from those of you who have shared your projects, too! I would be thrilled to see more of you share your work on the Bad Website Club Discord or the forum—or, if you’re feeling stuck with your project, use those places to reach out and talk about what you’re struggling with.

As always, you’re more than welcome to leave any questions in the comments below, as well as asking on Discord and the forum. Take care until next time!

Cover art by Kiri!

BWC Bootcamp Recap: Week 2

vance — Tue, 15 Aug 2023 19:45:13 +0000

Congratulations, friends and learners, on completing week 2 of Bad Website Club’s free web dev bootcamp! Here’s your weekly recap of the major topics we’ve covered.

Also check out week 2’s extra post, a review of CSS selectors! They’ll come in handy as you continue your CSS journey.

Before we start, here are some review questions. Once again, I strongly encourage you to try your best to answer each one before moving on—and remember, the important part isn’t whether you get them correct, the important part is just to exercise your memory by attempting it!

Quiz yourself!

What’s the difference between margin and padding?
What’s the semantic meaning of a span element?
Which property would you use to turn an element into a flex container?
If you have a flex container with a flex-direction of row, which property can you use to vertically center the flex items within the container? (PS: this is a hard one—it’s okay to not have this memorized, you can always just look it up when you need it!)
What’s one way we learned to make the text on your page more readable?

Recap

The box model (Rothko painting lesson)

The term ”box model” refers to the “conceptual rectangles” that surround every HTML element. It’s almost like layers of an onion.

(Image from freeCodeCamp)

At the center, there’s the content box—the size of the element itself. The next layer out is the padding box, which is empty space inside the border of an element. Next comes the border box, which accounts for the thickness of any border you set. And last is the margin box, which is space outside the border that pushes elements away from one another. You typically won’t see all of these boxes on every element, because some of them will often be set to 0 thickness.

When you don’t use CSS to specify the size of margin, border, and padding, the web browser will apply its own default values. These defaults vary from one browser to another. Therefore, it’s very helpful to specify your own values for the box model properties.

The box-sizing property controls how an element’s height and width are counted. The default value is content-box. Under this setting, if you give an element width: 100px, then the content box will be 100px wide and any borders or padding will be added on top of that 100px, making the overall element bigger than 100px. The alternative is border-box, which includes the border and the padding as part of the width and height. If you have that 100px-wide element set to box-sizing: border-box, and it has some thickness of border and padding applied, then the outer edges of the border will measure 100px wide, and the content box will get smaller than 100px. I think this is best understood by just playing around with it yourself!

We learned another important lesson during the Rothko exercise: Vertical margins behave in unexpected ways sometimes! Recall that at one point, we tried adding some margin to one of the rectangles in the painting, but it ended up pushing the whole canvas down instead of just pushing the rectangle down. This was due to a phenomenon called margin collapse. It happens when the margin of one element extends out through the margin of its parent element. freeCodeCamp said the solution was to give the rectangle something “solid” to push against, so we added some padding to the canvas (the parent of the rectangle), and then the margins started behaving as expected. (Padding and borders are examples of “something solid.”)

To avoid this problem, if you want to put space between a child element and its parent, then it’s better to apply padding to the parent instead of applying margin to the child.

Margin collapse is pretty complicated, and I don’t recommend worrying about all the details of it while you’re still learning the basics of CSS. It’s just helpful to know that, if you ever see that your vertical spacing is coming out different than you expected and you can’t find where your mistake was, it might not be a mistake after all. And whenever that happens, one possible solution is to try using padding instead of margin.

Flexbox (cat photo gallery lesson)

Flexbox is a simple way to arrange items on the page. You apply display: flex on a parent element to make it into a flex container, and then all its direct child elements become flex items. The flex items get neatly distributed across the flex container. You can choose to arrange the flex items in either a row or a column.

One tricky thing about flexbox is that we don’t talk about the lines being horizontal or vertical. Instead, the direction that the row or column follows is called the main axis, and the perpendicular direction is called the cross axis. Properties like justify-content and align-items will give different results depending on whether the main axis is a row or column. (”Justify” properties refer to the main axis alignment, and “align” properties refer to the cross axis alignment.)

Flexbox creates a one-dimensional layout: it takes all the child elements of the flex container and arranges them in a line, and then if the line is too long to fit in the container, it can optionally wrap down onto multiple lines. It’s important to remember that, even when it ends up wrapping into multiple lines and making a layout that appears to have rows and columns, it’s still behaving as just a single line. Think of your flexbox content more like a line of text: like a long sentence, it just wraps around to the next line when it reaches the end of the page.

(But what if you do want to control your layout in rows and columns instead? Later in the course we’ll learn about CSS grid, which solves that problem!)

In the “learn accessibility by building a quiz” lesson, we saw flexbox used to space out the links in the navigation bar. This is a very common use case! Flexbox makes it super easy to space things out in consistent intervals, and it’s extra handy for lists (like navigation menus) because it adapts to the user’s text direction. If someone translated our quiz page into a right-to-left language like Arabic, flexbox would automatically put the first link on the right instead of the left.

A really great way to learn more about flexbox is to play this super cute interactive game called Flexbox Froggy! It really helps with visualizing what the different properties mean.

There’s also a great visual guide to flexbox from CSS Tricks, which I often use as a reference to figure out which properties I need to get the layout I want. (Remember that it’s totally okay to use references while you’re building websites, you don’t need to memorize everything!)

Typography (nutrition label lesson)

There were really not any major new concepts in this lesson! Instead, we put together many of the skills we already learned to demonstrate how finely we can control the appearance of our text.

We did meet the <span> element for the first time, though! This element is mainly used for styling a short span of text, and often used inside of other text elements like <p>. It’s an inline element, unlike <p>, which is a block element. (Remember that a block element takes up the full width of its parent, but an inline element can fit in the same line with others.)

I also want to draw attention to one subtler part of the lesson: the way we used two complementary approaches to making classes.

In most of our lessons so far, we’ve created classes that correspond to specific kinds of elements. For example, in the cafe menu lesson we had a class for coffee flavors and a class for prices, and in the colored markers lesson, each marker had its own class. The CSS rules for those classes had a list of several properties that were visually unrelated, but instead grouped together by the semantic purpose of the class—like, “all the styles needed to make this look like a green marker.”

We still used this approach a little bit in the nutrition label lesson, like when we made the class calories-info to give unique styles to that one part of the label, based on its content. But most of the classes that we wrote for the nutrition label were not tied to their content like this.

Instead, many of the classes had names like bold, indent, or sm-text. They didn’t refer to what the content of those elements would be; instead they were reusable classes that held a set of visually related properties, and we applied them to many different elements throughout the label. This approach might be described with terms like “utility classes” or “functional CSS”.

When you’re planning out how to write your CSS, it can be useful to think about how styles might need to get repeated across your project. Sometimes it’s most efficient to create “semantic” classes like calories-info that refer to what their content is, and group together several styles at once. Other times, like if you have many different elements that need bold text but might have different sizes, then maybe it would be more efficient to write a more generic bold-text class and apply it to all those different kinds of elements, so that you can write out the font-weight property just once instead of needing to add that line into several different classes.

It’s also helpful to think about how you might want to change your CSS in the future, and how to write classes in a way that makes it easier to change things. For example, if you decided that you want all your bold text to have font-weight: 900 instead of font-weight: 800, the using one single bold-text class would mean you only need to update that value in one place.

There’s no right or wrong approach here, though! You don’t have to overthink it, just organize your CSS in whatever way makes sense to you.

Odds and ends

A few smaller things that were scattered throughout this week’s lessons:

To restore a CSS property to its default value (as if you never had mentioned it), use the value unset. For example, margin: unset; will apply the default margin set by the browser. This is useful if you want to apply a CSS rule to a large group of elements, but then have just one specific element where you want to “undo” that rule.
Relatedly, remember that CSS rules generally get applied in order from top to bottom of the CSS file—so if you’re doing that “general rule then a more specific rule to override it” thing, make sure the more specific one comes later in the file!
In the Rothko painting lesson, we learned some fun ways to make our “conceptual rectangles” a little less rectangular. The border-radius property rounds the corners of an element. filter: blur() creates a fuzzy, blurry effect, and transform: rotate() changes what angle the rectangle sits at. Try looking up these properties and functions on MDN for more info and examples!
The object-fit property changes the way an image fits into its rectangle, and particularly, what happens when the rectangle gets squished—like we saw happen when images are put into a flexbox container with no wrap. By default, the image will get stretched and warped, but if we set object-fit: cover then it will maintain its aspect ratio and get cropped to fit instead.
The flexbox lesson showed us the pseudo-element ::after. (We’ll talk more about pseudo-elements later!) We used the selector .container::after to create a new, empty element as the last child of the element with the class container . Take a second to think about how wild that is! Normally, it’s the job of HTML to create all of the content and the job of CSS just to style it, but this is an exception where CSS is actually creating a new object on the page! It’s a big power that comes with big responsibility. Since it kind of breaks the rules about the roles of HTML and CSS, we need to be careful about how we use it.

Next week

Since we only got part of the way through the accessibility lesson, I’ll recap that one as part of week 3. We have some fun new topics to look forward to in week 3, too: tables, pseudo-selectors, more CSS art, and finally, how to make our pages responsive to different screen sizes!

I hope you’re getting more comfortable with CSS and HTML by now! How are your projects coming along? I’m looking forward to seeing what you all create!

As always, if you have questions about this material or if there’s anything else that you struggled with from week 2, please do leave a comment on this post, or ask a question in the Bad Website Club Discord or the freeCodeCamp forum! Take care, friends!

Quiz answers

Margin is the empty space around an element. Padding is empty space inside the element.
Trick question! Span is sort of like the inline equivalent of div—it doesn’t have any semantic meaning and it’s mainly used for applying styles to a particular chunk of text.
display: flex;
align-items: center;
One method that we learned in the Typography lessons is to use margin and padding to create space between different text items. There are surely others too! Like making sure there’s enough contrast between the text color and background color, or choosing legible fonts.

Cover art by Kiri!

BWC Bootcamp Recap: CSS Selectors

vance — Thu, 10 Aug 2023 06:01:33 +0000

Hello friends and learners, great job making it to week 2 of Bad Website Club’s free web dev bootcamp!

We’ve seen a handful of different CSS selectors in our lessons so far. It can be tricky to remember what all of them do and why you would want to use them, so let’s review!

Reminder: the CSS selector is what we call the part that comes before the curly braces { } in a CSS rule. The selector determines which HTML elements the rule will apply to.

Basic selectors

Type selector (`type`)

p {text-align: center;}

div {background-color: green;}

This is simplest selector we have! All you write is the name of the tag that you want to style, and then the rule will apply to every element of that type. Use this if you want to set the font size for all of your h2 elements at the same time, for example.

ID selector (`#id`)

/* CSS file */

#title {font-size: 3rem;}

#red-marker {background-color: red;}

/* HTML file */

<h1 id="title">Bad Website Club!</h1>

<div id="red-marker"></div>

On the other hand, maybe you want to give unique styles to just one single element. In that case, you can use the ID selector. Make sure to assign some value to the element’s id attribute in your HTML file. Then, you can write the selector by putting a hashtag/number sign # directly before the value of id.

This is most useful for styles that you know you will only want to apply one time, styles that are uniquely related to one single element. It’s especially useful when you have several elements of the same type but want each one of them to have a different style.

In the “colored markers” freeCodeCamp lesson, we gave each marker its own class and used that class to set the different colors for each marker. But since we knew there would only be one marker of each color, another option would have been to give each marker an id and assign the color to that ID, instead of using classes.

Class selector (`.class`)

/* CSS file */

.large-text {font-size: 1.5em;}

.blue {color: blue;}

.canvas {width: 500px;}

/* HTML file */

<p class="large-text blue">I'm a big blue paragraph!</p>

<div class="canvas"></div>

This might be the selector we use the most often. It targets all of the elements on your page that have a certain class attribute. Write this selector by typing a period . right before the name of the class.

This is very versatile because you can manually pick and choose which elements will be part of your class. It’s especially useful when you have a group of similar elements that you want to share a style, but don’t want to give that style to all elements of the same time. Note the blue and large-text classes in the example above. We might set up our classes this way if we wanted paragraphs with a certain type of information to use larger text, or wanted only a subset of heading elements to be blue. We don’t want to apply those styles to every paragraph or heading, just to the ones we chose by giving them the right class attribute.

Remember that the class selector won’t actually do anything until you assign the class to some elements! Make sure to go to your HTML file and write class="whatever-your-class-is-called" inside the opening tag of every element that you want to apply this set of styles to.

Universal selector (`*`)

* {box-sizing: border-box;
margin: 0;
padding: 0;}

The universal selector is typed as just the asterisk symbol * by itself. It selects every single element on the page.

It’s often used to do what people call a “CSS reset” or “normalizing the CSS”. This means setting certain properties (often including box-sizing, margin, or padding) to be the same on every element in order to override the default values set by the web browser.

Attribute selector (`[attr]`)

/* CSS file */
input[type="number"] {width: 50%;}

input[required] {background-color: yellow;}

[id*="blue"] {background-color: blue;}

/* HTML file */

<input type="number" id="input-number-blue">

<input type="text" required>

<div id="blue-marker"></div>

Attribute selectors can be a little more complex than the others we’ve seen so far. There are a few different ways to use them, but the basic idea is that you’re choosing which elements to apply your rule to based on what HTML attributes they have. (Remember, attributes are those extra words inside the opening tag.)

Attribute selectors are written with square brackets [ ] around the attribute name (and value, if there is one). If you want to select anything that has the attribute set at all, regardless of its value, then type only the attribute name inside the brackets. On the other hand, if you want to select elements based on the value of an attribute, then copy and paste the entire attribute-value pair (both sides of the equals sign =) from the HTML tag into the brackets of the CSS selector.

If you want to target elements of any type that have a certain attribute, then the whole selector will be wrapped in square brackets. However, when we’re trying to target elements by an attribute, there’s often only a single type that we want to include. In that case, we can narrow down the selection by writing a type name directly before the opening bracket.

Let’s walk through the examples above.

input[type="number"] selects any element that a) is a tag of the type input, and also b) has a type attribute assigned with the value of number. It will select only the first input in this example.
input[required] selects any element that a) is of the type input, and b) has the required attribute included somewhere in its opening tag. It will select the second input element in the example HTML. This is a case where you don’t need to use the = sign to specify a value. (But it’s not just because the required attribute never has a value attached! input[type] would be an equally valid selector, and would select all input elements that have any value of type assigned. I just couldn’t think of any other attribute that you realistically would have a reason to select without a certain value!)
[id*="blue"] is a little weirder! It selects any element of any type that has an id attribute with the word blue somewhere in its value. In the example HTML, it would select both the first input (with ID input-number-blue) and the div with ID blue-marker. The reason it selects elements of all types is because we didn’t include a type name before the brackets. Also, notice how it’s not just an equals sign, it’s *= (asterisk equals). This symbol is what makes it search for IDs that contain the letters “blue” anywhere in them, whereas writing just id=blue would search for IDs that exactly equal “blue”.

There are several different kinds of syntax available to search for sub-strings (partial matches) of the value. You can read more about all the options on MDN’s “Attribute selectors” page.

I used inputs as an example here because this is a common situation where you might want to style elements differently depending on one of their attributes. Otherwise, attributes usually don’t have a close relation to CSS properties.

Combining selectors

We can also write more complex CSS selectors that combine two or more of the selectors described above. The special characters that we put in between the two different selectors are called combinators. Using combinators to construct more complex selectors gives us more control to target elements that fall into very specific regions of the page.

Descendant selector (`A B`)

/* CSS file */

nav a {text-decoration: none;}

div div {width: 500px;}

section .blue {color: blue;}

/* HTML file */

<nav>
  <ul>
    <li>
      <a>home</a>
    </li>
    <li>
      <a>about</a>
    </li>
    <li>
      <a>gallery</a>
    </li>
  </ul>
</nav>

<main>
<p class="blue">paragraph 1</p>
<section>
  <h1 class="blue">heading 1</h1>
  <p class="blue">paragraph 2</p>
  <div>
    <p class="blue">paragraph 3</p>
    <p class="green">paragraph 4</p>
  </div>
</section>
</main>

The descendant selector has the simplest syntax: there’s no special symbol to type, just put a space between the two parts of the selector. This will target elements of the second type that are descendants of an element of the first type—which means they’re nested anywhere inside.

The selector nav a will target links that are found anywhere within a nav element—they could be direct children of nav, or they could be nested several levels deep, like the ones in the HTML above. This example is very commonly used: we often want links in the site’s navigation bar to look different than links found within the main body of text. It does not target nav itself.
You can even repeat the same selector twice! div div will target any div element that is found within another div. So if you had many nested divs, it would target all of them except the outer-most one.
They don’t have to be made up of just type selectors—any of the basic selectors we saw in the previous section of this post should work as parts of a descendant selector. So section .blue will select any element that a) has the class blue, and b) is found inside of a section element. Looking at the HTML above, this selector would target heading 1, paragraph 2, and paragraph 3, but would not target paragraph 1 (because it’s not inside a section) or paragraph 4 (because it doesn’t have the class blue).

Direct child selector (`A > B`)

/* CSS file */

nav > ul {list-style-type: none;}

/* HTML file */

<nav>
  <ul>
    <li>
      <a>home</a>
    </li>
    <li>
      <a>about</a>
    </li>
    <li>
      <a>gallery</a>
      <ul>
        <li><a>cat gallery</a></li>
        <li><a>dog gallery</a></li>
      </ul>
    </li>
  </ul>
</nav>

The direct child selector is similar to the descendant selector, but narrower: it only targets children whose immediate parent is the one named first. The combinator is the right angle bracket > symbol, so it’s written like selector1 > selector2.

In this example, nav > ul will target the first list that contains the “home”, “about”, and “gallery” list items, but it will not target the second ul that says “cat gallery” and “dog gallery”.

Adjacent sibling selector (`A + B`)

/* CSS file */

#home-button + li {margin-top: 2rem;}

/* HTML file */

<nav>
  <ul>
    <li id="home-button">
      <a>home</a>
    </li>
    <li id="about-button">
      <a>about</a>
    </li>
    <li id="gallery-button">
      <a>gallery</a>
    </li>
  </ul>
</nav>

Instead of selecting elements based on their parent, the adjacent sibling selector targets elements based on another element that comes before them at the same level of nesting. The combinator is the plus sign +.

This selector only ever targets one single element: #home-button + li only targets the first list item that comes after #home-button, and only if they share the same parent. There can’t be any other element between them. Note that we’re talking about what order the HTML tags are written in, not how things are visually laid out on the page.

We already said that the ID selector is what you should use if you’re trying to target just one single element, right, so why use this combinator instead? The advantage is that you can change around the HTML without needing to update the CSS when the order of the elements changes. In this example, we might be trying to give the home button some extra space by using the adjacent sibling selector to apply a bigger margin to whatever comes after it. Using the adjacent sibling selector means we don’t have to change the CSS at all if we decide to swap the places of the Gallery and About buttons. (This is not a great example because it would be more straightforward to just set the extra margin-bottom on #home-button rather than margin-top on the thing next to it, but if for some reason you wanted to make the button next to home be a different color or something, that would also use this selector.)

General sibling selector (`A ~ B`)

#home-button ~ li {color: green;}

This one is similar to the adjacent sibling selector, but more flexible. It can target an adjacent sibling and any other siblings (elements sharing the same parent) that come further down in the HTML after it. The combinator is the tilde symbol ~.

Compare this example with the one from the adjacent sibling selector. The only difference in these two selectors is which combinator they use. Given the same HTML, this CSS rule would select both the About list item and the Gallery list item.

We could use this if we wanted every link in the nav aside from the first one to be green, for instance.

See this blog post from LogRocket for more examples of reasons you might use the two different sibling selectors. (Warning: It’s on a website that’s trying to sell you stuff.)

Grouping (`A, B`)

h2, h3, h4 {color: purple;}

section a, article a {color: green;}

If you want to apply the same style rule to various different kinds of elements, and there’s no one selector that applies to all of them, then you can just list different selectors separated by commas! It works with selectors that include combinators too.

More resources

Here’s a really fun way to both recap the selectors we already know, and also learn some new ones: an interactive game called CSS Diner! This is totally how I started to understand selectors.
MDN guide to selectors and combinators
Selectors Explained translates a CSS selector into a plain English description.

BWC Bootcamp Recap: Week 1

vance — Sat, 05 Aug 2023 16:24:57 +0000

Hello learners, and congratulations on getting through the first week of the free webdev bootcamp! We’ve been going through a LOT of material very quickly—when I was a teenager I spent months learning what we did here in a single week!—and it’s easy to get lost in all this new information. So at the end of every week, I’m going to be writing one of these posts to recap what we’ve learned together!

But I’m going to follow in Jess’s footsteps and be a bit mean to you all: Before I give you my recap, each post will start off with some questions to make you try to recap the lessons yourself! The purpose is to get you using a super effective learning strategy called active recall. It’s A-okay if you don’t remember the answers—just the act of trying to remember will strengthen your memory! I really encourage you to give each question an honest attempt before reading on.

Quiz yourself!

What’s the difference between HTML and CSS?
What tag would you use to put a picture into a web page?
What does it mean if an HTML tag is self-closing?
What’s the difference between a block element and an inline element?
If you want to add a style to every element in the class called “large-text”, what CSS selector should you write?
What elements belong inside the <head> element?
Name one way to make your website more accessible.
What’s wrong with this code? <input type="textarea">

Recap

Key concepts

To code a web page, we need two languages, HTML and CSS. So far our websites have been made up of two files, index.html and styles.css. The HTML file is where we put the content of our page and give it structure, while the CSS file is where we put rules that describe the visual properties of that content. Each tag in the HTML file creates an element in the web page. (You can also check out my overview of some of the terms you’ll see in the lessons.)
An HTML file has two main parts, a head and a body. All the content that we want to show up on the page goes inside the body. We can also say these elements are nested inside the body, or are child elements of <body>. The head contains extra information used by the web browser.
We can manipulate the appearance of our HTML elements by writing CSS rules that change their properties. The browser assigns a certain value to some of those properties by default, and these defaults can sometimes be different from one web browser to another. Different types of element have different sets of properties available.
There’s also a way to alter our HTML elements from within the HTML file, and that’s by giving them attributes—additional words inside the opening tag, like the href in <a href="https://example.com">. But while CSS just changes the appearance, attributes usually change the behavior or purpose of the element.
The way to create a group of elements that share the same CSS is to make a class. It’s like having to wear a uniform (the same styles as your classmates) to go to class!
- One element can have multiple classes (write them separated by a space like class="item blue round")
- The same class can be applied to many elements, and they don’t even all have to be the same type! E.g. I can assign the class blue to both paragraphs and headings that I want to have color: blue.

HTML elements

p, h1, and h2 are tags for holding text. The a tag turns text into a link. The em and strong tags mark a section of text as “emphasized” or “important”.
main, header, footer, section, and article are semantic tags that provide information about the page’s structure to a web browser or assistive technology. Like div, they separate a page into different sections, but unlike div, they indicate how that section fits into the larger structure of the page and what purpose it serves.
The div element is often used to divide the page into areas with different style properties, such as making boxes with different background colors. A div tag doesn’t have any semantic meaning, so its main purpose is just for applying styles.
img adds a picture, and this can go inside a figure tag to associate it with a figcaption.
ol or ul creates a list, and each li nested inside it is one list item.
form creates a form where the user can send data back to the web server. Some elements you might put inside a form are input, select, textarea, and button.
- We also learned a lot of different ways to use the input tag inside forms. You can see an overview of these in the MDN articles “Basic native form controls” and “HTML5 input types”.
- If you want me to write a separate post reviewing what we learned about forms, please let me know by leaving a comment here on dev.to, on the week 1 recap post in the freeCodeCamp forum, or mentioning me in the Discord server by typing @vance.

Layout

Elements get arranged differently on the page depending on whether their display type is inline, block, or inline-block. Each type of tag defaults to a certain display type (e.g. the default for <p> is block), but we can use the CSS display property to change it to something else.
- Block elements take up the full width of their parent element (unless you change their width property), even if their content is small, or if there’s no content at all. They always start on a new line, so a series of block elements will stack up on top of each other like stacking blocks. Or you could say they block other elements from appearing inside their line.
- Inline elements can be in the same line with other elements. They’re only as big as the content inside them.
- Inline-block elements will appear in the same line as other elements (just like inline ones), but instead of being tied to the size of their content, you can use the width and height properties to change their size.
- Why is this helpful? Let’s say you’re making a form and you want the input elements to always be on a line by themselves, separate from their labels. You could accomplish this by setting the CSS rule input {display: block;}.
Margin is the space around the outside of an element, like the margins along the edges of a page in a book. Padding is empty space inside an element, between its border and its content. Padding is like wrapping your content in bubble wrap. Both of these properties have the same purpose, to create open space between the elements in your page. This helps with readability.
- Beware that browsers often add some margin or padding by default! If your elements seem to be the wrong size, this might be why.
- If you’re having trouble working with margin and padding, don’t worry, we’re going to focus more on this on Tuesday!
Setting margin: auto on a block element will center it.
We can use the CSS properties height, width, and max-width to set the size of an element.
Widths can be given in absolute units like pixels (e.g. 100px), which stay the same no matter what size everything else is, or relative units, where the size depends on other factors. Percents like 50% are relative to the size of the parent element, em and rem depend on the text size, and then vh and vw depend on the size of the user’s browser window.
Use text-align to arrange the text within a block element, e.g. to center it.

Getting artistic

Use font-size and font-family to customize how text looks.
Draw a border around an element with the border property. It needs a thickness, style, and color: border: 2px solid green; . Or use border-left, border-top, etc to make a border on just one side!
Color in the “conceptual rectangles” of your elements with the background or background-color property. The difference is that background-color only accepts a color as a value, while background can accept either a color or an image, including a gradient generated by the linear-gradient function.
We have lots of ways to set colors for things like backgrounds, borders, and text! Here are 4 different ways to make some text purple:
- color: purple;
- color: #800080;
- color: rgb(128, 0, 128);
- color: hsl(300, 100%, 25.1%);
These color values can be modified to make them partly transparent. Add an extra two digits to the end of the hex code, like #800080AA, or replace the rgb and hsl functions with rgba and hsla.
Use the opacity property to make an element transparent. Give it a decimal value between 0 and 1.0. This method makes all of the content inside the element transparent too, instead of just the background!
You can create a gradient in any property that accepts an image, like background! Here's an example:
- background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
box-shadow creates the effect of a shadow under your element or an outline around it.

Phew, that was a lot! But remember, you aren’t expected to memorize all these tags and properties. You just want to have a general idea of what options exist, and then you can always look up how to use them when you need them. I also want to reassure everybody that there won’t always be such a huge barrage of brand-new concepts every week—there was just a lot we had to cover in order to have the building blocks to let us get started. Next week, we’ll learn some new topics, but we’ll also take some of this week’s topics and examine them in more detail instead. Plus, our next class on Monday is all about the first certification project! Get excited, because this is your chance to start flexing your creativity and building something that’s really your own, instead of just following instructions! (As a preview, here’s the web page that I made for the first project when I took this bootcamp last year.)

And if you feel confused or uncertain about anything, please don’t hesitate to ask questions! You can ask on the Discord, on the forum, or in the comments of this post. MDN is also a great place to look up any HTML elements or CSS properties that you don’t remember. And don’t forget your extra homework: please be gentle with yourself! Learning to code is hard work and you deserve to rest as well.

Keep up the great work, everybody! I know you can do it! 💪

PS: If you want to learn more about active recall and study strategies, check out this great video from Ali Abdaal.

Quiz answers

HTML describes the structure and content of a web page. CSS describes the visual appearance.
<img> (which you can also put inside a <figure>)
A self-closing tag doesn’t have a matching closing tag after the content.
A block element occupies the entire width of its parent element. An inline element is only as big as its content and it fits in line with other elements. Some properties, like height, width, and background-color, don’t work on inline elements.
.large-text (Don’t forget the period (.) at the beginning! That’s what makes this rule target a class instead of looking for some imaginary tag called <large-text>, which doesn’t exist.)

Here is an example head element:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bad Website Club!</title>
  <link rel="stylesheet" href="styles.css">
</head>

Some ways to improve accessibility that we’ve talked about so far are to make sure all images have alt text, use semantic elements, attach labels to input fields, and use good color contrast.
textarea is actually not an input type, even though it’s often used in forms! It’s a separate type of tag, written like <textarea></textarea>. (This one trips me up alllll the time!)

Cover art by Kiri!

BWC Bootcamp Recap: HTML and CSS vocabulary

vance — Thu, 03 Aug 2023 05:25:04 +0000

Hello friends and learners! This is my first post as a teaching assistant for the 2023 Bad Website Club/freeCodeCamp Web Dev Bootcamp. I hope your learning is off to a great start! In the coming weeks, I'll be writing a series of recap posts to help us keep track of all these exciting new things we're learning. Today it's all about vocabulary!

One of the struggles when you're brand new to learning web development is just remembering all of the words that people are using! It can be really frustrating when a tutorial tells you to add an attribute and you're like "wait, what even is an attribute?" My aim here is to define all of those new terms that we'll encounter in the freeCodeCamp Responsive Web Design curriculum.

Key terms

HTML is the most basic language of the web. Every web page uses HTML! It provides the structure and content of the page.
CSS describes the visual appearance. This includes colors, fonts, sizes, and how things are laid out on the page.
Accessibility refers to how usable your website is for different types of people, particularly people with disabilities. We all have a duty to make our websites as accessible as possible, because the web is for everyone!

HTML

(Image from MDN: HTML basics, by Mozilla Contributors, licensed under CC-BY-SA 2.5)

Each “thing” in an HTML document (in other words, each thing in a web page) is called an element. For example, this could be a picture, a link, or a chunk of text.
Most elements start with an opening tag and end with a closing tag. However, there are some self-closing tags (also known as void elements), which don’t have a closing tag. *
- How many self-closing tags can you name?
A tag might have attributes to determine its properties. An element can have many attributes, or none!

<p class="large-text"><em>Bad Website Club</em></p>

This whole line is a p element.
<p class="large-text"> is the opening tag.
</p> is the closing tag.
class="large-text" is an attribute.
class is the attribute name and large-text is the attribute value.
The em element is a child of the p element, because it’s placed inside. p is the parent element. We also say that the em element is nested inside the p element, like a little baby bird sitting inside its parent’s nest!
The descendants of an element are everything nested inside it: its child elements, but also its children's child elements, and its children's children's children, and so on. In the following example, section and p and em are all descendants of body, but only section is a direct child of body:

<body>
  <section>
    <p class="large-text">
      <em>Bad Website Club</em>
    </p>
  </section>
</body>

* Note: According to the HTML specification, "self-closing tag" actually does not refer to void elements, and has a more specific technical meaning instead. However, you will still often see the term "self-closing tag" used to mean "opening tag which does not have a partner closing tag", including in the freeCodeCamp Responsive Web Design curriculum.

CSS

(Image from MDN: CSS basics, by Mozilla Contributors, licensed under CC-BY-SA 2.5)

CSS is grouped into rules.
A rule starts with a selector. This part determines which elements the rule will apply to.
Each line inside the curly braces is called a declaration. This part says how you want to change those elements. This word doesn't come up super often though.
The part before the colon (:) is the property.
The part after the colon is the property's value.

.large-text {
  font-size: 2em;
}

This whole code block is one CSS rule.
.large-text is the selector.
font-size: 2em; is a declaration.
font-size is the property.
2em is the value of font-size.
When a CSS rule applies to certain elements, we say that it's targeting those elements. This rule targets the large-text class.

Did I leave something out? Are there any other words you've heard while learning web development that you don't understand, or maybe ones that you mix up with each other or just keep forgetting? Feel free to mention them in a comment and we can sort it out together!

Acknowledgements

Cover art by Kiri!

Thanks to Nicholas Stimpson for clearing up the definition of self-closing tags.

Mini CSS trick: emoji page dividers with the content property

vance — Sat, 18 Mar 2023 06:16:18 +0000

Page divider graphics are a common way to break up blocks of text on a web page, creating negative space that helps a page feel less busy and can signal a change in topics. They're basically the fancier sibling of a horizontal rule, and often look like a curly swash or a few geometric shapes. In print books, they're often used to separate chapters or scenes.

Dividers by Vecteezy user onfocus onfocus.

I wanted to whip up a simple graphical page divider to put the finishing touches on my current project, but I didn't want to take time looking for images to use. Then it hit me that I could just use an emoji as a divider instead! My page is about red pandas (it's actually my tribute page for this freeCodeCamp project), which there isn't a specific emoji for (yet!), but the photos on the page do feature plenty of bamboo, so I picked this cute bamboo kadomatsu emoji: 🎍

Method

Start making your divider by placing an empty paragraph in your HTML at whatever points you want to insert a divider, and make sure to give that paragraph a class, like divider.

..... </article>

<p class="divider"></p>

<article> ... </article>

<p class="divider"></p>

<article> ......

I started out by actually pasting the emoji into the body of each paragraph, but then I realized there's a better way: the content CSS property!

If you're unfamiliar, [content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) can be used with the ::before and ::after pseudo-selectors to add extra content inside an HTML tag. It's great because it lets you apply the Don't Repeat Yourself principle to your HTML a little bit: if you want to change up the divider (say, to a different emoji), instead of manually editing each paragraph element in your HTML file, you can change it just once in the CSS rule.

We'll use a .divider::after selector to insert the emoji.

.divider::after {
  content: "🎍";
}

Now you should see the dividers on your page! But they're probably not doing a very good job of dividing anything, just sitting right on top of your content, at the beginning of the line.

Let's style .divider to make them more useful. Dividers are typically centered on the page, so we'll use text-align and margin: auto. Also, a divider's purpose is to create space, so let's add some top and bottom margin.

.divider {
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

And that's it! The dividers should be nicely behaved now and creating plenty of negative space on your page.

Warnings

MDN notes that you should always use the Unicode escape sequence for non-Latin characters, though in my testing, just pasting the emoji itself into the CSS worked fine for my browser.

But if you want to play it safe, you can find the escape sequences by looking up your emoji on Emojipedia. Look for the emoji's codepoint--you can find it in the right-hand column on this overview page, or if you're on the page for an individual emoji, scroll down below all the example images to find the Codepoint heading. The codepoint should look something like U+1F38D. Copy just the hexadecimal value after the plus sign, and prefix it with a backslash to make the escape sequence, e.g. \1F38D.

.divider::after {
  content: "\1f38d"; /*🎍*/
}

(I included a comment with the actual emoji character so that I'll remember what the escape sequence refers to when I'm looking at the code without a preview later.)

When you design with emoji, it's also important to keep in mind that they'll appear differently on every device, and even the colors might be completely different from one system to another. So I don't recommend using this idea on pages that have a very strict color scheme.

Inspiration

It's super easy to change up the emoji since we used content, so why not play around with a few different designs? You can use more than a single emoji, too--try repeating the same emoji with spaces in between, or making a pattern of different emoji. If you do combine multiple emoji, keeping the pattern symmetrical will help maintain a tidy look that's more in line with traditional page dividers, but breaking the rules is fun too!

🎵   🎵   🎵
📕   📘   📗   📙
✨🔻🏳️‍⚧️🔻✨
🧦👗🩳👚🧣👖🧥👟
🌒🌓🌔🌕🌖🌗🌘

I went with an emoji that was related to my content, but there are also plenty of basic shape emoji that would work very nicely as generic dividers for any page.

➖🔆➖
◼   ⚜   ◼  
🔺🔻🔺🔻🔺
🔸 🔷 🔸 💠 🔸 🔷 🔸

You can even apply this method to other types of decorative "text" beyond emoji. How about a kaomoji divider? Or a single ampersand in a fancy font? There are plenty of symbol or swash fonts out there to try, too.

Conclusion

I hope you enjoy using this little trick to quickly add some visual interest to your web pages! I'd love to see your emoji divider designs or how you use it in your projects.

This is my first dev.to post, so I would be very grateful for any feedback you have on it! Please let me know if anything is unclear, and feel free to ask any questions to might have.

DEV Community: vance

Learning in public

How to prepare for a coding bootcamp

Make a trade

Prepare a routine

Anticipate setbacks

Consider your wellness

Meet people

Bonus: Check your foundational knowledge

Learning about Docker

BWC Bootcamp Recap: Week 3

Accessibility

Tables

Pseudo-selectors

Position

Z-index

Media queries (responsiveness)

Odds and ends

BWC Bootcamp Recap: Week 2

Quiz yourself!

Recap

The box model (Rothko painting lesson)

Flexbox (cat photo gallery lesson)

Typography (nutrition label lesson)

Odds and ends

Next week

Quiz answers

BWC Bootcamp Recap: CSS Selectors

Basic selectors

Type selector (type)

ID selector (#id)

Class selector (.class)

Universal selector (*)

Attribute selector ([attr])

Combining selectors

Descendant selector (A B)

Direct child selector (A > B)

Adjacent sibling selector (A + B)

General sibling selector (A ~ B)

Grouping (A, B)

More resources

BWC Bootcamp Recap: Week 1

Quiz yourself!

Recap

Key concepts

HTML elements

Layout

Getting artistic

Quiz answers

BWC Bootcamp Recap: HTML and CSS vocabulary

Key terms

HTML

CSS

Acknowledgements

Mini CSS trick: emoji page dividers with the content property

Method

Warnings

Inspiration

Conclusion

Type selector (`type`)

ID selector (`#id`)

Class selector (`.class`)

Universal selector (`*`)

Attribute selector (`[attr]`)

Descendant selector (`A B`)

Direct child selector (`A > B`)

Adjacent sibling selector (`A + B`)

General sibling selector (`A ~ B`)

Grouping (`A, B`)