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

Projects Challenge Projects
#515

Hi!

Your project looks good!

If you want, I can review your code. I didn’t find it here.

#516

Hi :slight_smile:

Thank you, I’d appreciate if you could do that for me
You can find my code over here:

#517

Heya :slight_smile:

first time posting on the forums. I just finished the Website Design System Challenge Project. Would be cool to get some feedback.

Live: Website Design System
Code: GitHub - Goregan/Website-Design-System

Cheers

#518

My recommendations:

  • add “body” and “main” elements to your code. You always need them.
  • “nav” section: you call your nav class as “breadcrumb”, but I think it could be “navigation”, for example. Because it’s a primary system. There are primary and secondary navigation system. The primary navigation system typically contains the most important links and buttons that need to be displayed on every single page of the site. Secondary navigation, or breadcrumb navigation, usually consists of a clickable list of pages or attributes that led to the current page. It can help users understand the extent of the site and also where they are currently. And what you have is the primary system.
  • “nav” section: “li” elements must be contained in a parent element: an ordered list “ol”, an unordered list “ul” or a “menu”
  • “section” element: defines a section in a document. It’s good that you used it, but you should nest the title, the “h2” element, as well.
  • flex-direction: the default value of flex-direction is row. So you don’t need to write it in your code. But it’s good that you remembered this property.

Any questions just let me know :slight_smile:

#519

Thank you for your feedback :slight_smile:
Cheers from Poland

#520

Could you review my project as well?

Thank you for any feedback :slight_smile:

#521

Here is my style guide. I’ve always liked to use the Paletton site when picking colors for my theme.

https://www.codecademy.com/workspaces/627c172564d22de6d9c47052
https://github.com/DigitalCharles/style-guide.git

#522

Here’s a link to Paletton if anyone else would like to use it. :grinning:
https://paletton.com

#523

sure, however you know my knowledge might be not sufficient yet to make my feedback worthwhile :slight_smile:

  • the background picture is pretty heavy and it takes long to load in on a page, maybe you could try to resize it and cut it weight.
  • I like the way you have organized the html and css files - it is easy to read and find the things you are looking for :+1:
1 Like
#524

Don’t worry about it :upside_down_face:
We are learning and any feedback is important.
I was worried if this could be a problem because I don’t really know how to work with images. How heavy they are and stuff like that. I’ll see what I can do to simplify.
I’m very happy to hear that. I was also worried if my code was confusing and hard to read. It’s different when I read and when others read.
Thanks for taking some time to look at my code and for your advices.

1 Like
#525

Finally finished my second challenge project! Included some responsive elements by reading the MDN documentation and seeking out some help from the Codecademy Discord community. Excited to learn how to build truly responsive websites next.

Github Pages: https://rodrigopimentel.github.io/codecademy-project-styleguide/
Github Repository: https://github.com/rodrigopimentel/codecademy-project-cheatsheet
Codecademy Workspace: https://www.codecademy.com/workspaces/627ef52887ef76ade429fa50

image
image1553×911 72.6 KB