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

Hello everyone! Here’s my solution to the ‘Challenge Project: Build a Website Design System’. Looking forward to hearing your kind feedback! :slight_smile:

I’m done with this one :partying_face:

Biggest struggle for me was to make a nice and consistent system of naming div and other tag classes.
I am certain there is a way to make the code cleaner.

Live page

Also I was so proud of myself for finding a way to make the header + nav section to be positioned correctly (not overlapping the section text) when clicking on different nav buttons :slight_smile:


Here’s my go at the Website Style Guide project. Had fun and learnt quite a bit.

Code: GitHub - kirn89/CodeAcademy-Design-System-Project
Live: Home Page

Many thanks!

Loved you site, how your nav tab size increased when you hovered over them, loved the buttons, and loved your site’s responsiveness.

Nicely done!


Herewith my Website Style Guide challenge:

My responsiveness is non-existent in this project. I have tried several thing and in the end deleted all my attempts. Will build the next site with responsiveness from the start instead of trying to add afterwards.

Question: What is the rule in HTML for when to code Special Charters and when to just use it in the HTML code?

Take care

1 Like

Hi all! Here is my cheat sheet project.

I am still struggling with display/positioning/margins/padding, etc., and would love to hear your input on how I could have done this better. If you have any tips for really grasping these concepts (when to use px, when to use 100%, when to use auto, etc.), I would love to hear them. I also had a really hard time centering the text in my circles, as you can see. Any tips there would also be awesome. Thanks so much!

Here’s my Website Style Guide project. It has changed and developed a lot as I’ve been working on in. The biggest changes were inspired by the previous posts of this group. Thanks very much for your contributions. I would be very grateful for any suggestions for improvement.


Here is my simple design system.
Simple Design System

My Website Style Guide.
Feel free to comment/point out mistakes
Github Repo
Web Page live


Finished project live on Git hub pages.


it took a few hours and an amount of caffeine. i’m kind of satisfied with the final product but i think i have to focus on writing cleaner code. it looks like a mess. im open to any feedbacks.




1 Like

In fact, every project, even a simple one, brings some kind of challenge.

I decided to make a footer on my website. It would seem that this is simple. But I spent about two hours to make footer appear at the bottom of the page. It was a real quest.
There is a lot of information on the Internet how to do this, but everything was spoiled by the fact that in my HTML document the header tag had the absolute position, and the body tag had the relative position and the offset down… That’s what spoiled everything, all the tips from the forums just didn’t work. So pay attention to this.

Here is the result: Styling Colors


Posting my project

Hi :blush:
Please rate my first project: Website Design Guide
Hope you enjoy. Waiting for star from you on my GitHub:
GitHub - asyakr/website-design-guide

My Website Design System Project

Hey all, here is my attempt at the Style Guide challenge.

Github: GitHub - Fyddlestix/WebDev-StyleGuide: Codecademy Challenge Project - Website Style Guide

Live Site: WebDev - Style Guide

HI! This is my Project: Build a Website Design System.

Site: My Website Design System

Explore my solution to the project by clicking the link below:

My Website Style Guide. With this one, I used display and positioning elements so I could get a better grasp on how each property work with the others. Definitely have a better understanding.

still struggling with displaying and positioning but will practice in my own time, moderately happy with how this turned out. might tweak it in the future! any feedback or some tips on how to understand display/position better, lmk!

github repo

1 Like