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

script3452018686 · October 30, 2023, 12:10pm

Hello check this out.
code:

live:
https://garrett04.github.io/Website%20Design%20System/index.html

Give me some feedback please.
Thanks.

jakdaw1 · October 31, 2023, 12:32pm

Hi All,

Here is my effort for the Website Design System challenge, feel free to leave any constructive criticism:

Live Preview:
https://jimthepict.github.io/codecademy-website-styles/

View the code here on my Github repository:

valentind · October 31, 2023, 9:02pm

Hello!
This is my Website Style Guide project.
vietnow.github.io/index.html at main · vietnow/vietnow.github.io

youcancallmefather · November 12, 2023, 2:02am

Here is my Website Design Guide project. Feel free to use source code for anything your want! If you have time, please give feedback, positive or negative!

Live website: Github Live website

youcancallmefather · November 12, 2023, 2:04am

Your too advanced!!! LOL

bumblebee133 · November 12, 2023, 4:13am

this is my first draft/pass at the style guide

gist.github.com

https://gist.github.com/powerpuffkc/406cc529fa4370f9b469d939348385a8

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="styles.css" type="text/css" rel="stylesheet" />
    <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=Abril+Fatface&family=Agbalumo&family=Cedarville+Cursive&family=Edu+TAS+Beginner&family=Merriweather:ital@0;1&family=Roboto&family=Space+Mono&family=Ubuntu+Mono&display=swap"

This file has been truncated. show original

styles.css

/** 
1) Style guide / design system
a section on colors
fonts
specific text styles
*/
body{
  margin: auto;
}
h1,body,h3,h2{

This file has been truncated. show original

I will update it to use grids later on but feel free to add your comments/feedback appreciated!

jakdaw1 · November 12, 2023, 7:15am

Haha…I wish! Thanks for that very encouraging comment, I appreciate your effort to say so.

Actually I think around 99% of my effort in this challenge was taught on the lead up to the challenge in Codecademy, the other 1% I was just curious, I thought of how I wanted to make it and explored external resources to find out how I could implement it.

But I am very much a beginner, and loving the learning and development. BTW, I like your effort in this challenge also, looks good!

jpowder · November 15, 2023, 9:48am

gist.github.com

https://gist.github.com/jpowder01/0afc57136713a22a4226540d10cab057

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>My Website Style Guid</title>
</head>

This file has been truncated. show original

style.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500&family=Poppins:wght@200;300;400;500&family=Source+Code+Pro:wght@200;400;500&display=swap');

body {
    margin: 0 10%;
}

header h1 {
    font-family: 'poppins';
    font-style: bold;
    text-transform: uppercase;

This file has been truncated. show original

agustinperezsilvestr · November 15, 2023, 8:21pm

Here is my gist: Website Design System · GitHub
I really needed to work with codeademy’s solution so I made it almost the same hahaha.
Second time coding!
Feel free to make any comments.

yk_david · November 17, 2023, 2:16pm

Nicely done… very inspiring!

yk_david · November 17, 2023, 2:25pm

Hi there,

I took the offered template in order to customize it. Here’s the links:
rendered view

code

yk_david · November 17, 2023, 2:26pm

Copying is good start!

rs_hades · November 17, 2023, 4:17pm

Hiii guys, I just finished this project but I had some problems with grid due to it was my first time using it, that’s why my page had a problem with the header, I would like if someone can check my project and review it, I’ll really appreciate it.

Here is the link to the repository: GitHub - RS-Hades/ChallengeProjectTwo

ddavies · November 17, 2023, 5:49pm

Just completed this project, but will continue to add to it as I progress.

Site up and running on GitHub Pages https://damian-dvs.github.io

https://gist.github.com/Damian-Dvs/b632d2b5ebe9a623ff723a8d69c2adbb

odlcm · November 18, 2023, 8:22pm

Thank you! ‎‎‎‎‎‎‎‎‎‎‎‎

msdavis11 · November 19, 2023, 11:27pm

github.com

mdavis1132/mdavis1132.github.io/blob/My-Website-Style-Guide/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Website Style Guide</title>
    <link href="./styles.css" rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&family=Raleway:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100;0,700;1,300&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,700;1,400&display=swap"
      rel="stylesheet"

This file has been truncated. show original

github.com

mdavis1132/mdavis1132.github.io/blob/My-Website-Style-Guide/styles.css

* {
    font-family: 'Raleway';
  }
  
  header {
    text-align: center;
  }
  
  span {
    display: inline-block;
  }
  
  #colors {
    border:2px solid gainsboro;
    padding: 5px;
    text-align: center;
    color: black;
    margin: 20px;
  }

This file has been truncated. show original

reflectio · November 23, 2023, 2:22pm

Hi everyone! Here is my code for the web style guide challenge project.

Feel free to leave a comment!

sachiko2396 · November 27, 2023, 12:18pm

Take a look at mine:

Live: Vintage Fashion: Website Design
Repo: GitHub - sachyko/WebDesignStyle: Web Design Style

cloud0618119088 · December 3, 2023, 10:39am

Here is my super basic style guide. GitHub - anastasyaR/websiteguide

I have to say, I am at my wit’s end re: positioning the color blocks horizontally re: each other. I’ve tried inline blocks, tinkered with margins, etc.

leoclarkribeiro · December 4, 2023, 9:12am

Hey everyone,

Here is my attempt:

https://leoclarkribeiro.github.io/Website-Design-System/

Cheers
Leo