Responsive Club Website (CSS)

Projects Challenge Projects
1

Congratulations on completing your project!

Compare your project to our solution code and share your project below! Your solution might not look exactly like ours, and that’s okay! The most important thing right now is to get your code working as it should (you can always refactor more later). There are multiple ways to complete these projects and you should exercise your creative abilities in doing so.

This is a safe space for you to ask questions about any sample solution code and share your work with others! Simply reply to this thread to get the conversation started. Feedback is a vital component in getting better with coding and all ability levels are welcome here, so don’t be shy!

About community guidelines: This is a supportive and kind community of people learning and developing their skills. All comments here are expected to keep to our community guidelines

How do I share my own solutions?

  • If you completed the project off-platform, you can upload your project to your own GitHub and share the public link on the relevant project topic.
  • If you completed the project in the Codecademy learning environment, use the share code link at the bottom of your code editor to create a gist, and then share that link here.

image
image990×109 4.29 KB

Do I really need to get set up on GitHub?
Yes! Both of these sharing methods require you to get set up on GitHub, and trust us, it’s worth your time. Here’s why:

  1. Once you have your project in GitHub, you’ll be able to share proof of your work with potential employers, and link out to it on your CV.
  2. It’s a great opportunity to get your feet wet using a development tool that tech workers use on the job, every day.

Not sure how to get started? We’ve got you covered - read this article for the easiest way to get set up on GitHub.

Best practices for asking questions about the sample solution

  • Be specific! Reference exact line numbers and syntax so others are able to identify the area of the code you have questions about.
5 Likes
2


This is my web :3

3 Likes
4

This feels like half the website - no pictures are displayed (including background image) so difficult to say if it is a truly responsive design.
The text part, however works well and displays neatly on variety of screen width settings.
A few notes about the code itself:

-when using rems you should set up basic font-size in styles.css:

html {
  font-size: 16px; /*this is example size*/
}

-you are supposed to wrap anchor in li tag (not the other way round):

<ul>
  <li><a href=""></a></li>
  ...
</ul>

-in this fragment of your html code I am not sure why you wrapped “7pm” in an anchor with a class but without href; the class is not styles in css either:

<div class="main">
            <h1>Come join to fun!!</h1>
            <h2>We meet every evening in the city square at <a class="time">7PM!</a></h2>
        </div>

It would be great you uploaded the site to your own github repository with all the images so we could see how the end effect works.

P

3 Likes
5

Hi,

This is my take on this project:
https://pyll-o.github.io/Goss-Club/

The code is available here:

Any comments either here or on GitHub will be really appreciated :slight_smile:

P

17 Likes
6

quick question. you say your’e not supposed to wrap the <li> element in the anchor, but the example (South Village Run Club) does. What is the difference? (just so I know for the future)

7

My guess is that it’s one of the tricks to make a full button clickable, not just a a text inside this. This, however, can be sorted out without deviating from html rules:

When you look at the MDN reference, it clearly states that the only permitted parents of <li> element are <ol>, <ul> or <menu> elements and the only permitted content of <ul> are “zero or more <li>, <script> or <template> elements”:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

Maybe one of the moderators could give us their thoughts on wrapping <li> in an anchor in this project example?

8

I did not look at the model website they had, so I thought that the project was referring to an actual club.
Anyways, here goes!

Live Version

Repository

6 Likes
9

Hello, this is my take on this:

https://katimilo.github.io/velocyclingclub/

Code available here:

Thanks,
Kati

7 Likes
10

This is my attempt.
https://gist.github.com/9b3759f0bce21997932f05c33b1c5a4d

1 Like
11

Hi,

This is my take in this project. Any feedback is welcome. Thanks!
https://github.com/PJan82/Responsive-Club-Website

2 Likes
12

Here is my version for the responsive site challenge:

11 Likes
13

Hello
I think I’m having issues with the CSS…I already viewed your work and they’re extremely perfect…I would like you putting me through with mine

Thanks!

2 Likes
14

Hi Saintjudeey,

do you need help with something? if you do, can you be more specific? I (and I’m sure others) would be happy to help.

Julie

2 Likes
15

I finish my first Responsive Website about a club called “Cool Coding Club”.
I think that was a very interesting and cool project :blue_heart:

2 Likes
16

https://lucy4788.github.io/Responsive-Sport-Club-Webpage/

The photos in gallery session were not displayed as i uploaded the files from the local file. One solution i could think of right now is to replace all the images from local file with ones from online source, which is a bit time-consuming🙁
Is there any other better ways to fix the issue? Thanks in advance for your help​:blush::pray:

17
1 Like
18

https://undic1.github.io/

This is my first project on codecademy and my first time using GitHub.
I’m actually really happy of the result since I’ve been learning all this really in a rush.
I welcome any suggestions, I know I have a lot to learn still.
Thank you all.

12 Likes
19

https://flockofbees.github.io/

The above is the website. Here is the code on github: https://github.com/FlockOfBees/FlockOfBees.github.io

I made a silly little occult detective agency website. This was difficult for me but I think I did okay.

2 Likes
20

Best regards,
Miloš

1 Like
21

Hello everyone,

this is my first post here and I didn’t get creative with the project and copied the example site. At the moment I learn better by copying than dealing with creative decisions as well. Here it is:

Setting up GitHub was equally challenging for me :smile: