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

juan_debali · May 6, 2023, 8:02pm

It seems simple, but tooked a lot of work

https://www.codecademy.com/workspaces/6456b1f4191912900d6b22a8

final-aerith · May 9, 2023, 2:31pm

Hi all,

Here my solution to the challenge: Build a Website Style Guide

GitHub repository: GitHub - final-aerith/web-design-system: Codecademy Challenge Project
Page: My Website Design System

Thanks for the feedback!

text2624604097 · May 10, 2023, 4:52pm

github.com

sfaulant/Website-instructions/blob/2ad3bdc4eb3d6d2bd3578f698620127eef631c92/Website design.html

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='Website design.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=Cormorant+Garamond:ital,[email protected],400;0,700;1,400&family=EB+Garamond:ital,[email protected],400;0,700;1,400&family=Source+Serif+4:ital,[email protected],400;0,700;1,400&display=swap" rel="stylesheet">
        <title>Website design instructions</title>
    </head>
    <body>
        <header>
            <h1 class="title-header">Website design instructions</h1>
        </header>
        <main>
            <!--COLOR PALETTE-->
            <div class="color-palette">
            <h2 class="color-to-be-used">Color palette to be used:</h2>
            <div class="color-boxes"><div class="hsla-1"></div><p>hsla(0, 100%, 50%, 0.1)</p></div>
            <div class="color-boxes"><div class="hsla-2"></div><p>hsla(100, 100%, 50%, 0.2)</p></div>
            <div class="color-boxes"><div class="hsla-3"></div><p>hsla(240, 100%, 50%, 0.4)</p></div>

This file has been truncated. show original

kamillaboross1654007 · May 10, 2023, 8:55pm

v0.1 - have quite a few ideas to continue, however, I am not sure how re-usable is my solution tbh, which would be the point of the design system I believe, will learn this as we go

ndrklmr · May 12, 2023, 12:25pm

Very niceee well done!

carransah_7 · May 17, 2023, 1:25am

Thank you much appreciated.

ghklearninghard · May 20, 2023, 6:55am

Trying my best! It takes so long to make this such a simple website, but it was fun creating it!

gist.github.com

https://gist.github.com/viviproje/7ece55684ef3fa3979a0b36b1c589476

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">
    <title>EARTHY – Website Style</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>

This file has been truncated. show original

styles.css

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,[email protected],100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&display=swap');
/* fonts */


body {
    background-color: #FFF2CC;
    margin: 0 10%;

This file has been truncated. show original

josefroslan · May 20, 2023, 11:50am

Your web design is beautiful! I like the shadow effects you use for almost all elements.

net2216157591 · May 22, 2023, 1:06pm

Hello, This is my first message on the forum, I have been having trouble with navigating the forum. I want to share my website design project here but I seem to be having trouble with that too. I wrote the code on my computer code editor but and I’m having trouble sharing it with git I have a GitHub account already. please help me with some advice. I also think I made a mistake, i copied my code from my code editor to the codecademy code editor, I wanted to try and share it from there but now i can’t continue forward, its displaying “something went wrong” I tried several times but still the same, I tried refreshing too but failed. i would really appreciate your help.

thanks,
regards
Mercy.

shivian · May 22, 2023, 5:49pm

Hi everyone!
This is my attempt, i hope you like it! Feel free to give feedbacks and share your thoughts!

Repo: GitHub - Andre-DM/Website-Design-System
Live: Website Design System

ndrklmr · May 24, 2023, 2:26pm

Nice touch with the font

ndrklmr · May 24, 2023, 2:37pm

Not sure about the error. But if you are using VS Code, publishing to GitHub shouldn’t be too hard.

On the left hand side in VS code look for the Source Control panel. If you haven’t already, choose the second option: initialising git and creating the upstream branch on GitHub. Then on GitHub go to your repo and then Settings → Code and automation → Pages. Then choose “Deploy from a branch” and point it towards master. That’s it! Good luck

ndrklmr · May 24, 2023, 2:57pm

Hi everybody!

Here’s my attempt. Went a bit overboard, but have prior experience with this stuff and wanted to show that. Hope you like it

Repo: Challenge Project: Build a Website Design System
Site: aWebsite Design System

ndrklmr · May 25, 2023, 8:14am

This should help: Deploy a Site with GitHub Pages | Codecademy

shivian · May 25, 2023, 12:49pm

I’m glad you liked it! I saw your attempt and it’s wonderful, I really like the descriptions at the beginning of each paragraph and also it looks very professional! Keep up the good work!

vivianr · May 27, 2023, 8:07pm

This is my version of the Website Design System challenge.
I experimented a lot with the flexbox and I hope that I created a responsive website.
At least using the Chrome developer tools it doesn’t look bad.

You can try it and let me know what you think… Some feedback please

Repository
Live Preview

net2216157591 · May 28, 2023, 6:30pm

Thanks a lot, I managed to fix the problem and VS code has helped a lot.
I very much appreciate it.

Regards
Mercy

net2216157591 · May 28, 2023, 6:38pm

wow! This is amazing and you do have experience. thanks for sharing.

ndrklmr · May 29, 2023, 10:28am

Thanks! Will keep working on it, so keep an eye out if you’re interested

ndrklmr · May 29, 2023, 10:29am

Awesome that’s great to hear!