Responsive Club Website (CSS)

Here is my website. Im too lazy to make two different website so I just did one responsive company homepage.

Code source: GitHub - sharkgal/Company-homepage
link: SINO-SCI

Hi All,

Here id my code for a Responsive Club Website.

I would really appreciate any feedback anyone has. Thank you for your time.

Emma

Here’s mine, took around 18 hours in the end but a lot of that was playing around with CSS Grid and tweaking the layout across different viewport widths. Getting the header looking how I wanted also took far longer than I’d like to admit :sweat_smile:

GitHub: GitHub - Cmastris/club-homepage: A Codecademy HTML & CSS independent practice project (design, build, and style a responsive club homepage).
Live site: Hilltop Hikers | Homepage

1 Like

Here is my take on the responsive club website project.

Code

Live

1 Like

Hi all,

This responsive club website project that I make:

Hi everyone!


Here is my project:

Live site:Debali's Sailing Boat Club

Code: GitHub - Juan-Debali/Codecademy-Challenge-Project-Responsive-Club-Website

Starting in the mobil version makes all the difference, it’s harder to shrink elements than expand them. Great exercise to fix the HTML and CSS knowledge.

1 Like

Visually, it looks great!

Browsing your code I noticed a lot of <div> usage. Try to think about how you can replace some of those divs with semantic HTML to increase accessibility. A lot of them could be replaced with <section>.

Also don’t forget to add alt attributes to all those images! :slight_smile:

1 Like

Hi!

Thanks a lot for your feedback! Yes I could use less div and forgot to put the ‘alt’ atrribute on the images.

1 Like

♞ Hello. My name is Eduardo from Mexico City.
I hope you like this site that is a chess club:

https://www.codecademy.com/workspaces/648519a346ef98cca28a81fe

For this project, I created a juicing membership page

Company - Juicer Barista

Actual Webpage - Juicer Barista
GitHub Repository - Code

1 Like

Be wary of relying too heavily on <div>'s. For example in your nav:

<nav>
        <div><a href="#club">El Club</a></div>
        <div><a href="#membresia">Membresía</a></div>
        <div><a href="#historia">Historia</a></div>
        <div><a href="#ajlit">Ajedrez literario</a></div>
        <div><a href="#contacto">Contacto</a></div>
    </nav>

There’s no need for any <div>'s in there. You can eliminate them and instead use the CSS selector:

nav a {
}

This is just an example of one way you can cut down on divs. Your HTML document is stuffed full of div’s everywhere. I would suggest exploring alternative ways of structuring your document.

<br> is normally a sign that an area could use some CSS formatting. Either change the display of each input to make them block level, to force them onto their own lines, and/or add some padding/margins to the inputs to space them further apart.

I also noticed you wrapped a link in a <span> tag, but didn’t format your spans in your CSS. I assume this might be old code that wasn’t removed.

I like the look of the site, thought! It was responsive and looked great on desktop + mobile.

Thank you for taking the time to look over my code and leaving feedback. You were right about using
it was an easy fix, and I went back and removed those tags and made adjustments to create space within my CSS file.

1 Like

Hello everyone! I wanted to share my project on the Responsive Club Website with you all.

I would greatly appreciate any feedback since I’m eager to learn from you guys.
Code: GitHub
Live preview: Responsive Club Website

Awesome project! Here are my observations/suggestions:

Aesthetically ~

  • The “join now” button could be moved down slightly. It’s very close to the text above it.

Great job! On to the next project :sunglasses:

Hi @ThatTyGuy please can you check the page again I have updated your suggestions. Thanks for your review.
https://devshittu.github.io/cp-responsive-club-website/

1 Like

I like it! Looks great now :+1:

1 Like

Hi Guys,

Here’s my project for sharing.
I welcome any comments. Thanks.

https://www.codecademy.com/workspaces/648a849d8f4f3bb808b11eca

Hi there! This is my project, feedbacks and thoughts are appreciated!

Repo; GitHub - Andre-DM/Responsive-Club
Live Site: Chrono Dice - Roleplay Club

2 Likes

Hello - Heres my project! Not as responsive as i’d like it to be - any tips to make it better would be greatly appreciated!

Live Site

Code