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

Here is my solution to the project:

Github: GitHub - devjanny/websitedesign: Wireframes and styles for my website


Wireframes and styles for my website

Web Design/Design System

This repository contains the web design or design system for my website. It includes the styles, components, and guidelines for consistent and cohesive design throughout the site.

Table of Contents


The chosen fonts for this design are:

  • Font Name: [Quicksand]
  • Font Name: [Poppins]
  • Font Name: [Nunito Sans]

To use these fonts, you can import them from Google Fonts or include the necessary font files in your project.


The design system follows the following typography guidelines:

  • Heading 1:
    Font-weight: 700 (bold)
    Font-size: 26px
    Font-family: Nunito Sans

  • Heading 2:
    Font-weight: 500
    Font-size: 18px
    Font-family: Poppins

  • Body Text:
    Font-weight: 400 (regular)
    Font-size: 14px
    Font-family: Poppins

You can apply these styles to headings and paragraphs throughout your website to maintain consistency.


The color scheme used in this design includes the following colors:

  • Primary Color: Bright Lavender #AC8BF1
  • Secondary Color: Soap #CDB7F9
  • Background Color: White #FFFFF
  • Text Color:Chinese Black #16111E

These colors can be referenced and used throughout the website to ensure a cohesive visual experience.


The design system provides a set of buttons with predefined styles. These buttons can be used consistently across the site. The available button styles include:

  • Primary Button
  • Secondary Button

To use these buttons, apply the corresponding CSS classes or styles to your HTML elements.

Navigation Bar

The navigation bar is designed to be fixed at the top of the page. It provides easy navigation for users to explore different sections of the website. The navigation bar includes the following features:

You can customize the navigation bar to fit your website’s specific needs while maintaining its overall structure and functionality.


The footer is designed to appear at the bottom of the page and provides additional information and links. The footer includes the following elements:

Hello Everyone! I hope you are very well.

I just finished this task and i’m very excited. Please review my code and share your toughts. Thanks

Live: Website Design System

Hey Guys, this is my first upload on here.
got a little carried away with the colours.

I have checked this link works so you can see my code clearly.
All feed back welcome. :grin:

Thank you

Hey guys!

Here’s my solution!

Would love any feedback!

Got a little impatient at the end so didn’t add any kind of paragraph or footer but I definitely learned/tried out a lot of things to see what worked and didn’t. Definitely need to take the time to learn about actual design elements (i.e. what colors look good, fonts, etc) it feels a little basic but i tried out new things so thats what counts!

No specific question but it might be a little cluttered (especially the CSS) does it seem like that to others? was there a more efficient way to bring this together? Let me know! Any feedback is good

Hello there!
Eric here.

Here’s my solution for the Web Style Guide challenge.
Hope you like it! Comments are very welcome!

LIVE: Eric's Website Style Guide
Github HTML and CSS: GitHub - codeerfreak/webstyleguide


1 Like

Hi guys,

I took a little bit of a different take on this project, because I wanted to explore css more. What do you think?

Hi everyone, I completed my one-page website on the code challenges. I am happy to get feedback from all of you. I did a bit different from all of you. let’s check it out on my GitHub. GitHub - lonborey/project-space-codecademy

1 Like

Here’s mine:

1 Like

Hi everyone!
Here’s my solution.

live: Website Style Guide

github: visit

What would you add?


Hey y’all!

Here is my solution: Web Design System

I still need to make the website responsive, because it definitely looks funky on smaller screens, but other than that, I am pretty proud of it :slight_smile:

1 Like


Here is the Github link to my completed Challenge Project: Build a Website Design System for the Full Stack path. I also pasted the link to the shared, interactive version on Coddecademy below.

I chose to use this opportunity to learn CSS Grid and hope that qualifies for the Solutions & Extensions requirement (#7). I am not thrilled with how my choice of fonts turned out. That part is likely to change.

Please let me know if you have questions or feedback.


Robert Pfaff

Hi, this is my first post I guess.
Here is my solution for Challenge Project: Build a Website Design System.

There are many details that i didnt know hot to solve like the spacing between text styles are not equal… didnt figure out how to make them even

there is also a video background but the Github pages dont load it, does any one know why?

here is the link to the page → Examen 2 Brand Guidelines

here the repository link → GitHub - alejmire/ca-cp-brandguidelines: Challenge Project Brand Guidelines


Please take a look at my code for the Stylesheet project and let me know if you think it can be improved.

Github Repo to view code: GitHub - CarlaLua/stylesheet

Github Pages to see it deployed: Nya Rue Style Sheet

1 Like

This is my Tea Cozy Project:

I am happy to get your feedback.

Hey, have a look at my style guide project! Let me know if there is anything I can improve on. As I continue learning, I intend to make it function better, especially when minimising the screen (using flex).

Hey all! I am new to coding and currently doing the Frontend Developer Course. Take a look at my style guide project, all feedback is appreciated as I know there will be room to improve.

Hello! Good afternoon, guys! You can see the code for my project here: GitHub - anerlo/WebsiteDesignSystem . Here’s the live demo: Website Design .

Note: it’s not responsive yet, I haven’t started that part :anger: , but it’s honest work. :smiling_face_with_three_hearts:

I love the colors! And the buttons! Good job!