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

jleivh · October 12, 2022, 1:41pm

hi everyone!
Another project done.
This one it’s a complement of the Cheatsheet project, i’ve applied a minimalist layout for this one.

Live page
Git repo

cheers!

bay_of_biscay · October 12, 2022, 10:56pm

Good evening.
Please check: I @ M (noviceatdevelopment.github.io)

jleivh · October 13, 2022, 1:38pm

i’ve updated the page…
made some layout changes, if u still see the older one u need to clear de cache and refresh the page.

new layout

thisispetrus · October 13, 2022, 2:21pm

Hola,

here it is my attempt for a Design System:

https://codepen.io/pedro-alerri/pen/BaxMdOK

As a very first approach, I just add some content to start it, but I did not add colors because I dont know yet about its colors. I am sure you can get a feel of it.
Coding wise, I welcome any feedback so I can code this lady better as I keep learning.

The <header> gave me sort of a headache because it did not go full width as it did the <main> part. Seems that it was having padding - margin somewhere that I could not find.
Everything else did not go that bad…or, well, mind that I’m a new bee…

Its a living file to be found here:

https://github.com/Iampetrus/Improved-styling-with-CSS—Design-System

Thank you all

kalinatran5130596614 · October 15, 2022, 2:40am

Here is my attempt at the project. Advice to make my code look cleaner or any suggestions for improvement are welcome!

gist.github.com

https://gist.github.com/codecademydev/a5524d1c8f56e38fdcbedfb940221c4b

index.html

<!DOCTYPE html>

<html>
<head>
    <title>My Styling Guide</title>
    <link href="styles.css" rel="stylesheet" type="text/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=Asap:wght@400;500;700&family=Noto+Sans:wght@200;400;500&family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
</head>

This file has been truncated. show original

styles.css

/* Universal styling */

* {
    font-family: helvetica;
    text-align: center;
    font-weight: normal;
}

/* Header */

This file has been truncated. show original

gambadio · October 15, 2022, 6:30pm

Hello this is my first project that I share here:

gist.github.com

https://gist.github.com/gambadio/c2208acb3fcd65bccc7e29cff24bb6e3

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;700&family=Silkscreen:wght@400;700&display=swap');
    </style>

This file has been truncated. show original

style.css

* { margin: 0; padding: 0;}
* { font-family: 'Quicksand', sans-serif;}

header {
overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

This file has been truncated. show original

jamesschulze · October 16, 2022, 8:12pm

Good day, here is my attempt at the “Build a website design system challenge”. Any comments or advice would be great.

Here is the live link:

My Style Guide

Here is the link to the repository:

JamesSchulzeDev/mystyleguide: Project: Build a Website Design System (github.com)

julian_dev · October 20, 2022, 11:44pm

Hi everyone!

Just finished WDS project! Check it out and let me know what you think!

GitHub
Live

Thanks in advance and happy coding!

gabortrapp1990 · October 21, 2022, 11:27am

Hi everyone,

I just finished building the Website Design System project. I’d love to hear what you think. I have made it quite basic and did a lot of mistakes that took some time to fix. Please be constructive and if you fancy learning together it would be great to connect.

Have a look at my work here:

Build a Website Design System Build a Website Design System Challenge Project

Happy coding!

asaadj · October 21, 2022, 7:13pm

Dear anna
I appreciate your review for my project : Website Design System
link : Website Design System

Sincerely

takahashichihiro · October 23, 2022, 8:03am

Please rate the code for Challenge Project: Build a Website Design System.
GitHub - 3chihiro/My-Website-Style-Guide: Basic website design system Challenge Project: Build a Website Design System

risabeth · October 26, 2022, 3:33am

your style guide is definitely one of my faves!

julian_dev · October 26, 2022, 10:40pm

When trying to link your live site from GitHub, on GitHub, select your repository, then “Settings”, then “Page”. You’ll see on the top the URL of your project. Make sure your repository is published.

ruby2703637828 · October 27, 2022, 9:06am

Hello
Thanks for this. I am new at Git and GitHub and have been searching for a long time how to link my site from GitHub.

takahashichihiro · October 27, 2022, 12:24pm

Thank you for your response.
Project URL.
Challenge Project: Build a Website Design System.

webbedfrumples · October 28, 2022, 2:14am

Hello everyone! Please check out my website and code and let me know what you think if you so please. Thanks!

Code: GitHub - klunkyfungus/Web-Design-Style-Guide: Style guide for website design
Website: 🍄 KF Website Design Style Guide

victorcastilloa · October 30, 2022, 1:31am

Hey, i just finished this program , if you can give me some review, i will appreciate it!

Live site is Here

Github files Here

giga7967532692 · October 30, 2022, 8:14am

gist.github.com

https://gist.github.com/codecademydev/893503fa68a893ceb83fed3026e4431f

index.html

<html>
    <head>
        <title>Website Design System</title>
        <link href="https://fonts.googleapis.com/css2?family=Freehand&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Island+Moments&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Shalimar&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="./styles.css">
    </head>

<body>

This file has been truncated. show original

styles.css

h1 {
    color: #BE4B4B;
    font-family: 'Shalimar', cursive;
    font-weight: 700px;
    Font-size: 80px;
}
.mainc{
    display: block;
    border: 2px solid #BE844B;
    padding: 10px;

This file has been truncated. show original

here is my web page design

takahashichihiro · October 31, 2022, 12:01pm

Thank you for your response.
Project URL.
Challenge Project: Build a Website Design System.

ab87 · October 31, 2022, 8:05pm

my project

gist.github.com

https://gist.github.com/codecademydev/e3a7d7ea4f4d7f5ddece8ccbab7bbab3

index.html

<!DOCTYPE html>
<html>
<head>
    <link href="./styles.css"  type="text/css"  rel="stylesheet" />
    <title>Document</title>
</head>
<body>
    <h1 class="mainh1">My Website Style Guide</h1>
    <main> 
        <section class='section1'>

This file has been truncated. show original

styles.css

.mainh1{
    margin-left: 110px;
}

.section1{
    width: 1200px;
    height: 400px;
    margin-right: auto;
    margin-left: auto;
    border: 2px solid gray;

This file has been truncated. show original