Site I made for my podcast

Code Feedback
1

Hey all! Decided to put my shiny new responsive web design skills to work, and create my home page for a podcast I co-host. I built it using the skills I picked up completing the FCC web curriculum, which is honestly amazing. Freecodecamp, you rock!

Technical stuff

I built the site using HTML, CSS, and bootstrap.

I run an Ubuntu VM through Azure and use Apache as my web server. I’m versed in Linux and figured this setup was practical and affordable.

Candid Crypto Podcast

There’s still a lot to do. A few changes I wish to make…

  • Media queries for index.html (the episode tiles do not stack on mobile, and the mobile experience currently isn’t so great).
  • Create a favicon
  • Add more colors
  • Embed the direct link somehow (instead of linking directly to an mp3)
  • Figure out how to expand episode tiles with a “read more” button.

Thanks for checking it out, and let me know what you all think!

1 Like
2

Ya, this is the biggest issue as far as I see, especially since there is a good chance the majority of people viewing your site will be on mobile devices. My suggestion would be to use a narrow-first approach to styling (or mobile-first if you prefer that term). Narrow your browser all the way in and style it to look good at that narrow width. This will be your base CSS. Then you can gradually widen and add break points as necessary for layout changes on wider view ports.

You’ve got some pretty basic accessibility issues that can be easily detected with a number of different accessibility browser extensions. I primarily use the axe accessibility checker, but there is also WAVE, Lighthouse (built into Chrome/Edge), ARC, SiteImprove, and many others. Fixing these basic issues should not be hard.

1 Like
3

Hi @liam.stojanovic !

I think your page looks good.

I didn’t look at your code but maybe you could play around with flexbox and the flex-wrap property. That way as the width gets smaller the cards move to a new line.

You might be interested in using a favicon generator like this one

I personally like the color scheme that way it is

You could play around with the audio tag.

Hope that helps!

1 Like
4

Well, you are using Bootstrap so making it responsive shouldn’t be too much of an issue. But you have to follow the grid rules. The docs for the card component have some example code.

As already mentioned, a quick option for the cards is just to add the justify-content-center and flex-wrap BS classes to the card container.

<div class="container justify-content-center flex-wrap" id="episodes-container">
  ...content with the cards
</div>

The same goes for the navbar look at the docs to see the options you have. I would suggest you use the collapsible version that turns into a mobile menu on small screens.

You can use the collapse component for a fairly simple read more toggle.

1 Like
5

Thank you all for the help and suggestions so far!! I really appreciate it. I will be making those changes this weekend, and will update this post when they are live!!

6

If I can make a small suggestion, you should put a small shadow in the topbar. Because the background and the top bar are both white I didn’t realize that was a topper there until I rolled down.

Also, wouldn’t be better if the titles in the topbar were all in the same line?

1 Like
7

Thank you all so much for the help!

I feel like there’s now a decent mobile experience. I tested the site using lighthouse, and got all the scores in the 90s.

Even better, the site doesn’t look crunched and crappy on smaller viewports.

Thanks @bbsmooth , @jwilkins.oboe, @lasjorg , and @dejesus for the suggestions / feedback! I’m still working on implementing a few things, including embedding the audio file and adding a “read more” button… Just procrastinating on writing that content myself, lol!

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.