Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAlonzo Delk
6,991 PointsHow do I get this .logo code on the write line or same line, so that my code makes sense?
/* Complete the challenge by writing CSS below */
header {
text-align: center;
}
.logo {
width: 110px;
margin: auto;
}
.logo {
display: block;
}
.main-nav
.main-nav li {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Getting Started with CSS Layout</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<img class="logo" src="city-logo.svg" alt="logo">
<ul class="main-nav">
<li><a href="#">Ice cream</a></li>
<li><a href="#">Donuts</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</header>
</div>
</body>
</html>
4 Answers
Peter Vann
36,427 PointsHi Alonzo!
This code:
.main-nav
.main-nav li {
display: block;
}
Should be:
.main-nav, /*** The comma here is critical ***/
.main-nav li {
display: inline-block;
}
Keep in mind, that essentially:
inline-block makes an element only as wide as its content
block makes an element the full width of its parent container
More info:
https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/
I hope that helps.
Stay safe and happy coding!
Alonzo Delk
6,991 PointsHey I see that I was missing the comma and had the code out of place. Hey btw do you think it's a great idea to get a hard copy of a front end development book? Or would you recommend any books that may have helped you?
Peter Vann
36,427 PointsHi Alonzo!
When I first started coding, I relied very heavily on books, but back then there wasn't nearly as much content online as there is now.
But depending on how you learn, books can be a fabulous tool.
Given that many coding books can cost north of $50.00, I was spending over $1000.00/year on books for a while.
Fortunately, I eventually found a website called bookpool.com (out of business, now, unfortunately) that offered many high-tech books at significantly discounted rates.
First, however, organize for yourself plenty of online reference resources (keep open in tabs or bookmark them), such as:
https://developer.mozilla.org/en-US/
https://www.youtube.com/user/derekbanas (His videos are BOMB - he talks fast, so he covers a lot and you don't end up waking up in a puddle of your own drool!?! LOL)
(And research more for your own personal goals.)
Then I would Google search for "Top books on (your language or framework, etc.)", to find links like this:
https://www.digitalcrafts.com/blog/5-best-books-learn-javascript
Before emptying your wallet on a bunch of tech books, though, I highly recommend making a day of camping at your local Borders and/or Barnes & Noble (or equivalent) and perusing the tech book section and find books that appeal to you.
Also, if you are a Mac user (it's not available for Windows, unfortunately), I also recommend checking out Dash:
It is a repository for documentation on a vast majority (200+ offline documentation sets) of programming languages and frameworks (even available OFFLINE) and it is also a snippet manager/text expander (VERY HANDY).
If you aren't familiar with what a snippet manager/text expander does, it allows you to associate any long block of text or code that you frequently type with a very short abbreviation and if you type the abbreviation (with Dash that's anywhere you put a working cursor) and the longer block of text/code will magically appear!?! (One recommendation, start you abbreviation with an odd character, such as a backtick, to avoid accidentally triggering the text-expansion!?!)
For example, if I type:
`ss
This magically appears:
I hope that helps.
Stay safe and happy coding!
I hope that helps.
Stay safe and happy coding! (LOL, I just used it!?!)
Alonzo Delk
6,991 PointsThank you Peter this was much appreciated!