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

Here is my version of the style guide. Its basically a recreation of the sample with fonts and colours I chose. I also attempted to make it a little more responsive than the sample. For example, if the screen or window was very small width-wise the content on the website should still be somewhat legible.

The repo: https://github.com/jamzzy/style-guide

Click to see it live!

joshuah26 · January 28, 2022, 6:36am

Hello,
Here is my take on the Style Guide

Live: Style Guide
repo: GitHub - joshuahutchinson26/webpagestyleguide

jean-tech · January 28, 2022, 9:08pm

Hey Everyone,

Check out my website builder assignment using my GitHub link below. I will definitely be adding more to this document as I see/learn more styles that I like!

jdelgado1025 · January 28, 2022, 11:15pm

Here’s mine - super simple, nothing fancy:

Live: Jose's Website Style Guide
Code: GitHub - jdelgado1025/WebDev: HTML/CSS Project for CodeCademy

kristina1311 · January 29, 2022, 11:56pm

Wow folks, there are some really nice project here

Anyway, here’s mine, almost exactly as the example provided:

GitHub - Website Design System

kova989 · January 30, 2022, 12:28am

Hi! There is main projeckt, first one !!!

lucasfs022 · January 30, 2022, 9:58pm

Hi everyone,

it took me a little while, but it’s done! i’m quite happy with the result.

I’d appreciate if anyone could give me some tips about how to improve it.

thanks!

na906 · February 1, 2022, 3:14am

Please check out my project. I would really appreciate any feedback. Thank you!

My GitHub: GitHub - ahman502/Website-Style-Guide: A basic CSS (Cascading Style Sheets) design system to help me build more websites in the future! A collection of some basic/common colors with their hex and rgb codes, fonts and their usage with examples, and some basic text styling using CSS.
Live Version: http://127.0.0.1:3000/index.html

Images:

aroman427 · February 1, 2022, 4:00pm

Would love for someone to have a look. All done with flexbox.

na906 · February 2, 2022, 12:16am

Live version of the web page above: Website Style Guide

frugodwill · February 6, 2022, 1:12am

Hi Everyone, here is my work for this project: https://codepen.io/frupreneur/pen/yLPVVzJ

Slowly but surely I guess

Happy Coding!

web7171240187 · February 9, 2022, 1:23pm

Hi everyone, here is my work for this project: https://www.codecademy.com/workspaces/6203bd9d411f17397900f5af

This project uses Roboto, Exo and Special Elite.

jemjasott · February 9, 2022, 10:44pm

Hi,

Project is complete! Was quite challenging, and Im glad to show the result.

live: Style Guide
repo: https://github.com/sultanby/website-design

Would be glad to hear feedback, thank you!

sterlingevans8585065 · February 11, 2022, 5:08pm

hey guys, heres my code for my most recent project…feel free to critique!

gist.github.com

https://gist.github.com/StErLz/e055470c1359377f2201d48705b23756

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="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

This file has been truncated. show original

styles.css

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: rgb(247, 132, 0);
  background: linear-gradient(
    135deg,
    rgba(247, 132, 0, 1) 0%,
    rgba(249, 255, 95, 1) 35%,
    rgba(247, 132, 0, 1) 100%
  );
}

This file has been truncated. show original

lordfalcon_art3rmisx · February 16, 2022, 7:03am

Hi guys! Here’s my solution, took me a week to complete:

Screenshots:

Constructive criticism will be very much appreciated!