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

checkreality · January 13, 2025, 11:19pm

That’s some nice use of Bootstrap! Looks great!

dev1961280659 · January 15, 2025, 3:43pm

Here is my solution:

Zelirious/my-style-guide/blob/main/Project_04/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sky's Style Guide</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header>
            <h1 class="title">Website Style Guide</h1>
        </header>
        <main>
            <section class="category colors">
                <h2>Colors</h2>
                <div class="color-block orange">
                    <p class="color-name">Sun Orange</p>
                    <p class="color-value">#EB9D00</p>
                </div>
                <div class="color-block green">

This file has been truncated. show original

py9186240037 · January 21, 2025, 3:29pm

Hey everyone, here my project for a website style guide. Feedback and tips are welcome! Thanks and happy coding

design1250918257 · January 31, 2025, 8:45am

website

gfneira · February 8, 2025, 1:33am

Here is my solution:

colinparrow996712117 · February 12, 2025, 4:17pm

gist.github.com

https://gist.github.com/Zelarys/daea0a5631c16b2fa0e51ebc0947aab1

index.css


h2{
    display:block;
    font-weight: bold;
    font-size: 20px;
}
#hunter-green{
    background-color:#205933; 
}
.color-panel{

This file has been truncated. show original

index.html

<doctype html></doctype>
    <html lang="en">
        <head>
            <link href="./css/index.css" type="text/css" rel="stylesheet">
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Ga+Maamli&display=swap');
                @import url('https://fonts.googleapis.com/css2?family=Ga+Maamli&family=Gabriela&display=swap');
                @import url('https://fonts.googleapis.com/css2?family=Mona+Sans&display=swap');
                </style>
            <title>Zel Style</title>

This file has been truncated. show original

here is my solution!

array8384395840 · February 13, 2025, 8:10am

Hello. My work is here. I will be grateful to hear your feedbacks.
https://alesia-via.github.io/web-style-guide/

marshmelliest · February 18, 2025, 10:24pm

Take a look at my style guide! I didn’t make it very graphically fancy, but I did use flexbox to make it fully responsive, so I’m still pretty happy with it.

gist.github.com

https://gist.github.com/emarshgaulin/d8eac699ec7cb2251eeebd84dd85c51f

index.html

<html>
    <head>
        <!DOCTYPE html>
        <title>EMG Personal Branding Style Guide</title>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    </head>
    <body>

This file has been truncated. show original

style.css

/*Defaults*/
* {
    margin:0;
    padding:0;
    border:none;
}

body {
    font-family:'Merriweather','Merriweather Sans',sans-serif;
    background-color:floralwhite;

This file has been truncated. show original

css9744165171 · March 1, 2025, 11:10am

https://aidandjalins.github.io/design-style-guide/

Hi, this is my initial design for my design style guide

hope y’all like it

micro9233872302 · March 2, 2025, 12:01pm

Hi everyone! Posting my github for the design guide! Let me know if you have any suggestions!

Design System Guide website

kabelyanet · March 2, 2025, 9:02pm

Wow, I like it.

kabelyanet · March 2, 2025, 9:04pm

It looks very good

justinm696 · March 3, 2025, 6:40am

This is my style guide design. Enjoy ! GitHub - AnonymousA11/Justins-Style: a project assigned by codecademy.

array8384395840 · March 3, 2025, 8:05am

Thank you so much. When you take the first steps, it’s very important to see other people reaction.

scottosullivan · March 4, 2025, 5:11pm

Hello everyone!

I decided to keep it simple but implement all the different bits learnt so far

Code files: GitHub - ScottODev/web-design-style-guide: I made a simple Web Design Style Guide to show case some of the things I have learnt throughout the course with HTML & CSS.
Link to site: Web Design

Let me know what you think, I’ll happy look at some others too.

Happy coding.

dev3895536496 · March 9, 2025, 10:48pm

this is my work.

https://github.com/julian-uk/starting

mkdiraman · March 13, 2025, 3:50am

Hi Fam, I am new here. Check out my design system here Website Design System
all feedback is welcomed and appreciated. Please reach out for any questions as well, happy coding.

mkdiraman · March 13, 2025, 3:53am

Great work! looks amazing.

mkdiraman · March 13, 2025, 3:54am

Good job! design looks great.

aarondev · March 18, 2025, 11:41am

Hello, here I present my project. Any suggestions for improvement are greatly appreciated.
Best regards.

Topic		Replies	Views
Responsive Club Website (CSS) Challenge Projects	933	33306	March 18, 2025
Company Home Page Challenge Project (Css,Flexbox) Challenge Projects	1232	49910	March 18, 2025
Build your Own Cheatsheet Challenge Project (HTML, CSS) Challenge Projects	2195	104297	March 16, 2025
Find Your Hat Challenge Project (JavaScript) Challenge Projects	489	33770	March 3, 2025
Become a Pokemon Master Challenge Project (Python) Challenge Projects	75	21112	May 3, 2024

Related topics