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

hannah · August 25, 2023, 4:41am

Here is my solution to the project: https://www.codecademy.com/workspaces/64e82f186b4702dd5fa8cabe

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

websitedesign

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.

Fonts

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.

Typography

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.

Colors

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.

Buttons

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:

Logo: [My codeacademy logo]
Links: [https://codecademy-prod.s3.amazonaws.com/profile_thumbnail/644c8b7d32376800188aae59_55396382.jpg]
Search Bar
Title of the website
Nav links

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

Footer

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

Anchor links for sections of the landing
Links: [devjanny (Hannah) · GitHub]

dr.rodolfo · August 25, 2023, 11:25am

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

gist.github.com

https://gist.github.com/RodolfoMD/0534c6a3193e773b9fd2e54e9573f650

index.css

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {

This file has been truncated. show original

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Website Design System</title>
        <link href="./index.css" rel="stylesheet">
    </head>
    <body>
        <main>
            <h1 class="main-title">Website <span id="style">Style</span> Guide</h1>
            <p class="author">by: Rodolfo Moreno</p>

This file has been truncated. show original

indiegamedev52552072 · August 25, 2023, 4:51pm

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.

Thank you

hannah · August 25, 2023, 9:54pm

Hey guys!

Here’s my solution!

https://devjanny.github.io/websitedesign/

Would love any feedback!

katmoria · August 31, 2023, 1:46am

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

https://katmoria13.github.io/designguide.html

ericschouw · August 31, 2023, 9:18pm

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

Sample:

kristyr · September 1, 2023, 10:13am

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?

object2191916301 · September 3, 2023, 3:47am

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

ktotz · September 7, 2023, 4:54pm

Here’s mine: ktotz.github.io

petrucco · September 8, 2023, 7:30am

Hi everyone!
Here’s my solution.

live: Website Style Guide

github: visit

What would you add?

mercurial-fish · September 8, 2023, 10:49pm

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

system5583678679 · September 11, 2023, 1:57pm

Hello.

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.

Thanks,

Robert Pfaff

https://www.codecademy.com/workspaces/64ff1c01180a28cab3cd87e5

alejmire · September 12, 2023, 3:31pm

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

noble.chacko · September 16, 2023, 12:42pm

gist.github.com

https://gist.github.com/codecademydev/6be95b80291b4cd88cebac3435b911b2

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Design Guide</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <header>

This file has been truncated. show original

styles.css

@import url('https://fonts.googleapis.com/css2?family=Heebo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: row;

This file has been truncated. show original

carlalua · September 17, 2023, 7:41pm

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

object2191916301 · September 18, 2023, 1:30pm

This is my Tea Cozy Project:

I am happy to get your feedback.
Thanks

code6489640591 · September 21, 2023, 7:03am

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).

matthew_morrison_aus · September 22, 2023, 9:23am

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.

anerlo · September 23, 2023, 2:26am

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 , but it’s honest work.

anerlo · September 23, 2023, 2:32am

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

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

websitedesign

Web Design/Design System

Table of Contents

Fonts

Typography

Colors

Buttons

Navigation Bar

Footer