TheOdinProject/css-exercises

flex/03-flex-header-2: Improve solution for conciseness

Closed this issue · 7 comments

jwsoh07 commented

Complete the following REQUIRED checkboxes:

  • I have thoroughly read and understand The Odin Project Contributing Guide
  • The title of this issue follows the location for request: brief description of request format, e.g. Foundations exercises: Add exercise for XYZ

The following checkbox is OPTIONAL:

  • I would like to be assigned this issue to work on it

1. Description of the Feature Request:

IMHO, the additional markup was one possible solution but not quite necessary after learning some useful techniques from an article recommended in that topic's 'Assignment' section.

I would like to propose a solution, for the benefit of all TOP learners, what I found to be a very concise and direct answer, if you will.
This solution requires no additional HTML mark up, and 8 lines of code addition in CSS.

The finished UI will be identical to the one in desired-outcome.png

2. Acceptance Criteria:

CouchofTomato commented

@TheOdinProject/html-css

Can someone take a look at this please.

codyloyd commented

@jwsoh07 it's hard to know if we would accept the solution without seeing it. Can you share your idea?

  • 👍1
jwsoh07 commented

@codyloyd hey there! i apologise, here's the code.
in index.html (no changes from the pre-defined markup)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Header 2</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="logo">
        LOGO
      </div>
      <ul class="links">
        <li><a href="google.com">link-one</a></li>
        <li><a href="google.com">link-two</a></li>
        <li><a href="google.com">link-three</a></li>
      </ul>
      <button class="notifications">
        1 new notification
      </button>
      <div class="profile-image"></div>
    </div>
  </body>
</html>

In style.css
image

the only additions i have made here are lines 15-18, 27-28 (optional), lines 54-57.
with this approach, no additional mark up is needed from the pre-defined html.
however, I thought we could share this as an alternative solution, if you will.

let me know if you want to talk more about the code.

codyloyd commented

looks good to me.. go ahead and do a PR if you like.

  • 👍1
jwsoh07 commented

@codyloyd
could you assign this to me please?

ManonLef commented

I assigned you @jwsoh07 :)

  • 👍1
thatblindgeye commented

Closing for inactivity and linked PR was closed out