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

course1662380856 · April 4, 2024, 2:57pm

Thanks for showing me the gist. I like the background color scheme you have; I’ll try that approach for my own website. I’ve thought about trying Bootstrap or Material Design but both seemed too complex for my current knowledgebase. For now I’ll just keep things simple like you did. Have a good day.

course1662380856 · April 4, 2024, 3:35pm

Okay! I’m proud to present to the world a GitHub Gist of my completed work. The link is below:

github gist - click me

I wasn’t able to do any bootstrap or use Google MaterialDesign but was at least interested in them. Materials were difficult to install and use on my computer for some reason. So for time’s sake, I just colored the backgrounds of my elements to make them look better. I hope this works out.

board7816559072 · April 5, 2024, 10:26pm

This is my live version of Website Style Guide: Style Guide Live

bentlym · April 6, 2024, 4:06pm

Here’s how i did it

gist.github.com

https://gist.github.com/codecademydev/78a6409120a643f8ab043c837c17ad3a

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Design System</title>
    <!-- poppins -->
    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"

This file has been truncated. show original

styles.css

body {
  background-color: none;
  margin: auto 10%;
  padding: 0;
  overflow: auto;
}

div.container {
  display: block;
}

This file has been truncated. show original

design9433714534 · April 8, 2024, 2:21pm

Here’s my take on the Style Guide

code6369861253 · April 9, 2024, 2:47am

Here is a link to my Website Style Guide via GitHub, I wrote the scripts in visual studio code. I have been coding for less than a month with no prior experience or knowledge in software development. I like to think that my problem solving skills have been sharpening up for the better! Please take a look at the code posted below, I look forward to receiving some tips and pointers! Thank you for your time and this amazing platform!

gist.github.com

https://gist.github.com/MstCarpenter/3c807dbd7e9acf38d237ed3cd6bfc1dc

CWstylesheet.html

<!DOCTYPE html>
<html>
    <title>Corey's Website Style Guide</title>
    <head>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <!--chakra petch - regular 400, regular 400 italic, bold 700, bold 700 italic
        teko - variable, full axis, italic 0, weight 300-700
        rubik - variable, full axis, italic 0, weight 300-900
        oswald - variable, full axis, italic 0, weight 200-700
         -->

This file has been truncated. show original

cwSTYLESHEET.css

/*
    color: #7fffd4;
    color: #ff4500;
    color: #6b8e23;
    color: #a900a9;
    color: #808080;
    color: #b8860b;
    color: #cd853f;
    color: #ffa07a;
*/

This file has been truncated. show original

code6369861253 · April 13, 2024, 4:59pm

your style guide came out really well. I see there are some things i can improve on, thank you!

ajax9860915743 · April 15, 2024, 3:05pm

Hi! I built my website style guide without using flexbox, this is my code:

Happy coding!

dhadjiev · April 15, 2024, 9:34pm

Here is both my HTML & CSS code for the project! I kept it rather simple, but checks all the boxes!

gist.github.com

https://gist.github.com/Denislavv/a1c439d2f3203ae5d7b1246fd0c1d3ee

Web Style Guide CSS

body {
    background-color: blanchedalmond;
}


h1 {
    font-size: 25px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;

}

This file has been truncated. show original

Web Style Guide HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Website Style Designs</title>
    <link rel="stylesheet" href="style.css">
    <h1 id="title">Website Style Guide</h1>
    <!--FONT LINKS-->

This file has been truncated. show original

ratsonyogamats · April 16, 2024, 2:42am

Check out my website style guide! Let me know what you think!

beta0893532249 · April 20, 2024, 2:31am

Hey everyone here’s my website style guide:

https://samjunderwood.github.io/My-Website-Style-Guide/

beta0893532249 · April 20, 2024, 4:00am

I’m probably going to remove the navigation as it doesn’t make sense to me in its current form but as it grows i’ll certainly add it back.

object0015715774 · April 24, 2024, 2:10pm

Hello! I have just started to learn how to code for less than 3 months. I will appreciate that if someone can give me some clues for the problem I encountered. Thank you in advance!

Below is the link to my GitHub repository:

I wonder why couldn’t I remove underlines of

elements?
I thought the code below should work.

.sourcecodepro p,
.nunitosans p,
.poppins p {
text-decoration: none;
}

micro8585286757 · April 29, 2024, 11:15am

Here’s a very candy-colored looking website https://hex0rouge.github.io/
I’m still struggling to find out how GitHub works and how to share links from there, so this link might change over time… Also think my CSS is a bit messy and could do with some clean-up. Happy to receive feedback in order to improve!

yehpaing · May 1, 2024, 6:10am

MY WORK FOR THIS DESIGN SYSTEM PROJECT

Mouse Hover Over Them to see my work. Thank You.

_nagradgang · May 1, 2024, 10:01pm

Hello, everybody. This is a direct link to the web page with my project and here is a link to files on Github. I would appreciate any feedback and corrections. Thanks, and have a great coding day!

charlottexomae · May 8, 2024, 4:13am

gist.github.com

https://gist.github.com/codecademydev/9f2ba938d20062a44071f39f55e79841

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=Briem+Hand:[email protected]&family=Jaro:[email protected]&family=Jersey+25+Charted&family=Sedan+SC&display=swap" rel="stylesheet">
  </head>

  <body>
    <header><h1>My website Style Guide</h1></header>

This file has been truncated. show original

styles.css

.container{
width:100%;
}
.color-container{
  border: 2px solid black;
  width:100%;
  height: 200px;
  text-align: center;
}
.color-container h2{

This file has been truncated. show original

text0201631131 · May 9, 2024, 5:31pm

Hi! Here’s the link to my style guide for my personal portfolio as a grpahic designer. Open to hear your comments! Style Guide A-LeBel Thank you!

data5732515007 · May 13, 2024, 7:33am

Hi,
the bubbles in the " Favorite Text Styles" section are not in the right place when you resize the browser.

jaykrishnagadhavi · May 14, 2024, 1:20pm

Repo Link
Live Veiw