Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Log in with GitHub

Submitted

Penmic Podcasts (css, sass, javascript) a pod request landing page

Helena Plantin• 45

@Helena-p

Preview siteView code
Desktop design screenshot for the Pod request access landing page coding challenge

This is a solution for...

Pod request access landing page
  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

I would be extremely grateful for any constructive feedback as to my solution to or how I can improve:

  • responsiveness
  • effective reusable code and DRY principle
  • code structure

This was my first Frontend Mentor challenge and I truly enjoyed it! It was so much fun and educational! Any feedback would be highly valued! Thanks! //H

Community feedback

Tesla_Ambassador• 2,980

@tesla-ambassador

Posted

@Helena-p This is great work! Although I think you should try using classes for things like buttons instead of ID's because an ID should only appear once and that will solve your HTML issues. Also instead of using the "min-width" attribute on your media queries, I think you should use "max-width" because I can't view the site properly on my browser. Happy Coding!!!

1
Helena Plantin• 45

@Helena-p

Posted

@tesla-ambassador Great! Thank you sooo much! Yes, I figured the id's would get me into trouble ;) Thanks also for the tip on max-width...will definitely check it out! Again 🙏 a million for taking your time to check out my solution, stay safe! //H

1
P
Matt Studdert• 13,611

@mattstuddert

Posted

Hey Helena,

Amazing work on this challenge! You've done a really good job and I love the detail you've gone into for your README.md file! 🙌

Here are some thoughts after taking a look at your code:

  • For the dots and the picture of the guy on the microphone, I'd recommend using background-image in your CSS as opposed to img in your HTML. This is because they're decorative images and don't add any context to the content.
  • You've got accessibility errors on your input elements. This is because you haven't added label elements, so they'll be inaccessible to screen reader users. You could either add a label and then visually hide it or add an aria-label attribute to the input.
  • As you've mentioned in your HTML comments, I'd recommend not duplicating your form code. Instead, use Flexbox to change the order of the elements.
  • Stick with min-width instead of mixing with max-width. min-width media queries and a mobile-first workflow are great because you often end up writing less code. It also loads in fewer lines of CSS for mobile users, which can be a performance benefit.
  • The overall structure looks good!

I hope those tips help. Keep up the great work! 🙂

0
Helena Plantin• 45

@Helena-p

Posted

@mattstuddert - Thank you so much for this excellent, constructive, and positive feedback! It's invaluable and you have some really good points and I will correct them as soon as I possibly can. Since you, I'm sure, are an experienced developer - may I ask for some advice? When I test the page in different browsers (Edge, Firefox, Safari), the page looks fine, but Tesla-ambassador previously pointed out, that the page didn't show properly on his/her computer and got cut at the bottom. Also as the screenshot shows for my solution in my member dashboard, the placeholder text is too far out towards the side - I can't find that anywhere when I test the page. How can I get a good work strategy when I am testing web pages to find these issues and solve them? I find this is really bugging me and would like to know how you professionals go about it?

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@Helena-p no problem! For the screenshot, we use Firefox to take them. You've got this CSS rule which is causing the placeholder to sit right at the edge:

.combination__email {
    padding-left: 0;
}

I use LambdaTest for cross-browser testing. We've got a paid plan, but they also offer a decent free plan that will be more than enough for your needs with these challenges.

To make it easy to test the responsiveness, I recommend using Responsively. It allows you to view your site on multiple device emulators at the same time.

Those are some great tools to help you test your projects!

0
Helena Plantin• 45

@Helena-p

Posted

@mattstuddert Excellent :) Thanks for taking the time to fill me in on the tips and tricks of the business and for having a look at my code! I wish you the best of days! ;)

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@Helena-p you're welcome!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord