Build a Website Style Guide Challenge Project (HTML, CSS)

Thank you, appreciate it! Nice work on yours as well :slightly_smiling_face:

Hey Hey Everyone! :wave:

For my solution I went with a basic design guide. I hope you like it!

I’ve been looking to some of your work for this project and let me say great job to all of you! I really liked what I saw :smile:

:arrow_right: Live Solution

:arrow_right: Github Repository

here is my solution, still working on making it more responsive but just thought i would share my basic guide so far.

Here is my attempt:

:arrow_right: Live
:arrow_right: Repository

Would love some feedback!

Here is my Website Style Guide.

Would love to get some feedbacks

please check out my code.

Any tips would be much appreciated! Couldn’t quite remember how to center content in the divs automatically, so I tried my best manually adjusting the margins to make it look centered.

It does indeed, thank you!

1 Like

I really like the overall page design. It’s very modern and minimalist. I like how you styled the CSS for the color palette to keep the page free of extra text. The color palette itself is bold and really pops with the minimalist design.
Your code is really clean too.
I’m just starting this challenge. Thanks for the inspiration.

Here’s mine:
:small_blue_diamond: Live site
:small_blue_diamond: Code gist

Let me know what you think. :slight_smile:

The projects posted here are very impressive. Good job everyone.

Here’s mine:
Github: Repository
Live: Github Page

I do have a question about how to properly use CSS position with internal links. I have styled the page to have a fixed header at the top and a fixed Navigation column on the left side of the page.

I tried to used position:absolute on the main container to position the content where it’s visible. However when you click on the internal link, the part of the page that the link points to displays at the top of the page, behind the header.

The HTML, Navbar links section:

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-btn"><a class="nav-link" href="#color-section">Colors</a></li>
        <li class="nav-btn"><a class="nav-link" href="#font-section">Typography</a></li>
        <li class="nav-btn"><a class="nav-link" href="#style-section">Styles</a></li>
    </ul>
</nav>

<main>
    <div class="container" id="color-section">
        <h2>Colors</h2>
        <div class="color-container">
           ...
        </div>
    </div>

    <!--  Fonts  -->
    <div class="container" id="font-section">
        <h2>Fonts</h2>
        <div class="font-container">
          ...
        </div>
    </div>

This is how I styled the main in the CSS:

main {
position: absolute;
top: 84px;
left: 200px;
margin: 0;
border: 0;
padding: 5px;
}

Hello. Check this out pls.
GitHub
Web

Hello everyone, here’s my Website Style Guide looking forward to hear some feedback, i wanted to put some extra touch with the interactive part but I’m proud of the result! :smiley:

2 Likes

This is my attempt toward this projects, feel free to check it out!

Github Repo For Code Refer

Github Page for Preview

I deployed the page on my github repository.
In css, I also refer this page for this very cool button “Click Me” as you can see it on my page.

2 Likes

Thank you so much for the feedback, I really appreciate it! Looking forward to seeing yours when it’s done :slight_smile:

I definitely feel like I overcomplicated this but if someone could review mine that’d be great!
[Projects/index.html at main · JEastham2/Projects · GitHub][Projects/styles.css at main · JEastham2/Projects · GitHub]

Hello everyone, here is my website style guide project Challenge project
Looking forward for feedback from you guys :smile:

Really nice buttons :slight_smile: