User
Write something
Open Office Hours Coding Help is happening in 6 days
Anyone else use "outlines" in CSS to see your elements?
So I was reviewing this website and wanting to understand a little bit more about how the spacing happens to be. If you take a look at this page here https://www.bin-go.net/book-with-us Scroll to the bottom and see the big spacing issue. Adding this line of code to your CSS has some benefits - Diagnose Layout Breaks: Spot elements causing horizontal scrolling instantly. - Visualize Element Boundaries: See margins, padding, and content areas clearly. - Detect Ghost Spacing: Find hidden padding or margins pushing items away. - Verify Nesting Structures: Confirm elements sit in their correct parent containers. And you don't want to use the "border" property - Zero Added Width: Outlines do not alter element dimensions. - No Layout Shifting: Elements stay in place when toggling outlines. - Draws Outside Box: Outlines sit on top of the element box. - Preserves Box-Sizing: Layout mathematics remain completely untouched. There used to be a Chrome extension called Pesticide, but it looks like it's no longer being supported. I did find this one: https://chromewebstore.google.com/detail/pesticide-advanced-css-de/jeebpgmphhagpecfiophljpkhncoajcg
Logo in the Top Left of Navigation Bar 🫣
I was asked to review a vibe-coded website. Here's their website if you want to take a look at it as well. https://www.bin-go.net/ When you're using an image logo in the top-left corner of a navigation bar, make sure the logo blends naturally with the header instead of looking like a separate box that was placed on top of it. The best option is usually a PNG with a transparent background or an SVG logo. That allows the navigation bar’s background color to show through around the logo. When a transparent version is not available, choose a logo background color that exactly matches the navigation bar. Even a small difference in the color can create a visible square or rectangle around the logo. You should also check the image for extra empty space around the design. Sometimes the logo itself is small, but the image file contains a lot of built-in padding. This can make the logo look too tiny or cause it to sit out of alignment with the navigation links. A few additional things to keep in mind: - Preserve the logo’s original proportions so it does not appear stretched. - Make it large enough to recognize without making the navigation bar too tall. - Vertically center it with the menu links. - Make the logo link back to the homepage. - Test it on mobile screens to make sure it does not crowd the menu button. - Use clear alt text so screen readers can identify the business. In the example attached to this post, the logo has a dark square background that is slightly different from the navigation bar. Because the colors do not match exactly, the edges of the logo image are easy to see. A transparent version of the logo would make it look much cleaner and more professional. What do you think about the size of the logo?
Logo in the Top Left of Navigation Bar 🫣
To add hyphens or to not add hyphens to the url slug?
So I was reviewing a website for somebody the other day, and on one of their URL pages, it was a "/bookus" And so then had me question myself. Yes, we as humans can definitely read that as potentially a booking URL. I don't think it was a Halloween word of "boo kus," right? But I was intrigued to find that, according to Google Gemini, the search bots would actually prefer you to hyphenate your URLs where a space would naturally be. So in this example, it would prefer a "/book-us" compared to a "/bookus"
To add hyphens or to not add hyphens to the url slug?
Unofficial FreeCodeCamp Review Guide
I saw this on reddit that one of the FCC organizers created some notes that could be helpful when going through FreeCodeCamp modules. She calls it unofficial because she made it herself. Link to the guide: https://cdn.nhcarrigan.com/fcc-review-pages.pdf Original Reddit Post: https://www.reddit.com/r/FreeCodeCamp/comments/1o37tgh/unofficial_study_guide/
5
0
The <br> in HTML
Just looking at this code what does the <BR> do? What does BR stand for? As a pilot we would get a meteorological report called METAR and in the report it would read something like this: METAR KJFK 242235Z 28024G36KT 7SM -. RA BR BKN009 OVC020CB 26/24 And the BR in there would equate to "Mist" and we would remember it as "Baby Rain" for the "BR"
The <br> in HTML
1-30 of 101
The Code Zone Skool
skool.com/the-code-zone
Learn the proper way to build websites with AI that will rank higher in search results. Learn HTML/CSS/JavaScript Basics to further your understanding
Leaderboard (30-day)
Powered by