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

Finally done with my style guide.
I’m open to reviews,still have a long way to go.

Thanks for the like (below). I like the clean look of your site and your choice of colors. I actually was trying to follow the responsive design techniques you used, but decided to wait until after I had finished the lessons on responsive design. You did a great job.

I didn’t realize my post would be under your like (lol)

hey y’all, here’s my website:) hope to spark some nostalgia!

live
code HTML & CSS

actually I’d prefer to have the elements not stacked upon each other (except for the first box, title image & navbar) but I couldn’t figure out how to do it. If anyone has any suggestions after reading the code let me know, thanks a lot!

7 Likes

Hey guys, just finished my second Challenge Project. Here is the link below:

https://aimes13.github.io/Challenge-Project-2/

Any feedback and/or constructive criticism is welcome!

3 Likes

How do I see some one’s code rendered on a website? I would like to see what the persons code actually looks like in my web browser on GitHub.

Hello,

Here’s mine! Great way of learning.

Hey, you can make a directory on Github, push your code to your directory, and then you go to Settings (in your directory), Pages (on the left-side menu) and then you select the branch where your code is, so that github can identify your HTML file and render it. Then you wait 10 minutes or so till everything is working and your website is online :)) you also have the link to it in this very last session.

There are actually different ways of doing it on Github. Good luck with your deployment!

2 Likes

Hi,

I’m having trouble with the exercise where my font div boxes are not lining up. Here’s the code if anyone can help:

Hi here is my version. It’s not fully functional, but mostly responsive…if i had continued I am not sure where or when I would have stopped lol. As it is, I finished this a week or so ago but am only now posting because I had some grand plans to tweak it…but really, moving on! :wink:

Still learning and still learning Github so please don’t judge me too harshly.

Code - https://github.com/Mthibodeaux-hub/Project—Styleguide

Published webpage - https://mthibodeaux-hub.github.io/Project—Styleguide/

5 Likes

Great job. Well-designed and useful site.

Thank you so much!! I really appreciate it!

1 Like

Here is my take on the Style Guide Challenge. Any feed back would be appreciated!

Source Code - GitHub - Baerlucky/website-design-system: Codecademy Challenge Project

Live Version - Website Design System

Keep on Coding!

It looks very nice and clean. Only thing I would change is the first square on the Colors page, for the color white, make the text and border black instead of blue.
edit:
Also on the Fonts page it looks like Open Sans is slightly higher than Roboto, which I think they should be level with one another

1 Like

Very cool! I think we have the same taste in colors haha when I finish mine you’ll see. And I like your button. Oh your Colors and Navigation links open in new tabs and I don’t see a way back to the main page.

Thanks for the review. I made both changes you suggested.

(I did some additional tinkering to implement a flexbox layout throughout the site and make the look of the three pages more consistent.)

Hello! Here is my Web Design System. I had few issues with GitHub displaying the background image, but I got that fixed! I hope you enjoy! please feel free to give any type of feedback, it really helps me learn what I can do better :grin:!

GitHub code: GitHub - BuluBerry/Website-Design-System

Live Website: Web Design System

Thank you!
-BuluBerry

5 Likes

Hey there Buluberry. It’s nice to come across someone who’s at the exact same place I am. I find it appealing to the eye maybe cause of the colors that you used (just a thought: I actually spent a little while browsing Google’s site, you know the one that is listed in the bottom the left-side pane and it was really useful. I am certain you will find it useful too) but I observed two interesting matters if you will.
Firstly, and probably the most relevant, I thought the font section was a bit confusing because you have two text styles,but three descriptions. It is hard to say what the third description is for as the H1 and H2 elements have their description respectively.
Secondly, this is something that I observed cause I just spent some time browsing Google’s site and I thought it was really interesting. The navigation on your site at present is omitted. Maybe you can throw in a breadcrumb nav using the topic at hand. Just some food for thought cause I thought it was directly related and being so fresh in my head cause we just did that section… thought it might help you too.
I like your work btw. Looking good dude! Keep it up.

1 Like

I think I see something else now, buluberry. When we use text over imgs, it is recommended we use a background color behind the text for improved readability. The text gets lost when there’s an img behind it. In this case, you could use an accent of the tone of the picture that you prefer or maybe even a dark color like black with some opacity so that the picture is still visible. I think it would help to visually group certain elements if they had some sort of background to 'em. Again, this is in Google’s Materials Design, man. You should really check it out. Happy coding dude!

1 Like

Thanks a lot for the feedback. I went ahead and made that addition because it really did make sense. Now what I need to do is, put the time in to feel comfortable making these commits and pull requests using the Git Bash terminal via Visual Studio Code.

Thanks again &
Keep on Coding!

1 Like