Breakpoints are added, and it went pretty fast because I have already used them before.
2025-08-25
I added breakpoints to my pages and components, but the only thing they are affecting right now is the header formatting.
On mobile devices or small screens, the navigation links are stacked underneath the Fifty Feats wordmark. On larger screens, the links sit beside the wordmark. If you’re on a phone right now, you can turn it sideways into landscape mode to see the header formatting change.
In order to produce the breakpoint, I used a media query in the CSS files where I want the breakpoint to apply. In this case, it’s within my header component using the .header class:
@media (min-width: 768) {
.header {
flex-direction: row;
}
}
I’ll be able to use this media query for tablets and a second one for large screen sizes (minimum width of 1024 pixels), like a laptop or desktop.
At this point, the breakpoints exist and can be used for any formatting that I want, which completes this week’s feat! I have plenty of time to dive deeper into breakpoints or keep adding other elements to the basic site layout.
This is probably a good point in time to talk about head starts. With my focus this year on creating the full-stack Fifty Feats website in one year, it’s important to note that I wasn’t starting from nothing on this.
I completed lots of Scrimba courses that taught me how to write HTML code, deploy it, and start to add styles and dynamic content with CSS and Javascript. That is making these first few feats easy.
Later in the year, I’m going to have some feats where I don’t have the skills yet to complete them. That will be where the Fifty Feats framework (and my gumption) really gets tested.
Back to Journal