CSS CSS Layout Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Alonzo Delk
Alonzo Delk
4,396 Points

How do I get this .logo code on the write line or same line, so that my code makes sense?

style.css
/* 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;
}
index.html
<!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
Peter Vann
36,045 Points

Hi 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
Alonzo Delk
4,396 Points

Hey 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
Peter Vann
36,045 Points

Hi 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://www.w3schools.com/

https://www.freecodecamp.org/

https://developer.mozilla.org/en-US/

https://css-tricks.com/

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:

https://kapeli.com/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
Alonzo Delk
4,396 Points

Thank you Peter this was much appreciated!