Responsive landing page using CSS Flex and JS

Community feedback

• 

  Dylan Heslop•770

  @dylan-dot-cPosted 8 months ago

  Well done bro! Looks neat and all.

  And yes for JSON data we usually just make it a JS object and export it as it is. No need for fetch or axios.

  Yh i realize it's weird but the design on the preview looks completely different than on the site.

  I think it could be how you nested them ig...

  My browser reads it correctly but maybe not the one frontendMentor uses... And also for CSS you can't nest styles like that, or at least it's not recommended but if you want to do that, you a CSS preprocessor like Sass/Scss which supports style nesting. You should look into that, really cool way to style.

  Marked as helpful

  1

  ---

  

  Charlie•300

  @XarlizardPosted 8 months ago

  Edit: Yep, turns out their internal browser is not updated to be compatible with the last CSS features, and they are working on implementing it;

  @dylan-dot-c thanks for the feedback man! 😄

  yeah I thought the same about nesting CSS but then came across this(turns out it has been approved and introduced to CSS since August 2023):

  CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.

  CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.

  You can read more here at the mozzilla documentation about it

  So maybe you are right about pointing out that Frontendmentor's internal browser is outdated

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted 8 months ago

  @Xarlizard hey! Just a quick heads up that we've updated our solution screenshot browser version, so it now supports nested CSS selectors. We've generated a new screenshot for you 👍

  Marked as helpful

  1

  

  Dylan Heslop•770

  @dylan-dot-cPosted 8 months ago

  @mattstuddert awesome! So for a quick insight, that's how you guys and other websites like vercel take screenshots by using an internal browser?

  1

  

  Charlie•300

  @XarlizardPosted 8 months ago

  @mattstuddert you da real MVP 😄

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted 8 months ago

  @dylan-dot-c, we use Playwright to take the screenshots. There are quite a few tools and libraries out there that do similar things, but it works well for us, and we use it for other things beyond screenshots.

  1

  

  Dylan Heslop•770

  @dylan-dot-cPosted 8 months ago

  @mattstuddert thanks, sounds cool.

  What I'm really intrigued about is how you guys built the solutions page and having each person's solution aligned naturally, its not like flex/grid where each row has a fixed width and the column maybe be longer/shorter... but it normally only looks good when each card in a column has the same or close height

  Anyways I did some inspection... seems like you guys use relative positioning for top, right, bottom and left and stack the solution cards in between...

  I think that would need so javascript to build out that layout

  0

  

  Dylan Heslop•770

  @dylan-dot-cPosted 8 months ago

  @mattstuddert thanks, sounds cool.

  What I'm really intrigued about is how you guys built the solutions page and having each person's solution aligned naturally, its not like flex/grid where each row has a fixed width and the column maybe be longer/shorter... but it normally only looks good when each card in a column has the same or close height

  Anyways I did some inspection... seems like you guys use relative positioning for top, right, bottom and left and stack the solution cards in between...

  I think that would need so javascript to build out that layout

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted 8 months ago

  @dylan-dot-c, we use a package called React Masonry Component to achieve that layout. Masonry layout is tricky to do with CSS, although CSS Grid is trying to improve that.

  We're considering reworking the pages that use a masonry layout, though. As you said, it doesn't always look the best and can be pretty hard to scan.

  0

  

  Dylan Heslop•770

  @dylan-dot-cPosted 8 months ago

  @mattstuddert sounds interesting, will definitely check it out, never knew about it. It would be cool to see a challenge implement this kind of layout(if not done already).

  And what do you think about having collaborative challenges like 2 devs working on a project, has to be like a 3,4 or 5(In difficulty). Could be async work or live via discord channel

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted 8 months ago

  @dylan-dot-c, our Galleria slideshow site challenge uses a masonry layout. But we may add more in the future.

  Collaborating on projects is a great idea. We have a "challenge-collaborations" channel on Discord where anyone can set up a collaboration. So, I'd definitely recommend checking it out. Working in a group gets you even closer to what it's like working on a professional team and using a more advanced Git workflow 👍

  0

  

  Dylan Heslop•770

  @dylan-dot-cPosted 4 months ago

  @mattstuddert I know this convo ended a long time now😅, but there is something else I'd like to ask you. So it's about challenges and the awarding of points, so do you guys actually have a way to verify/check the actual quality of the challenges? Like just now I just did a fake solution for the QR code challenge and my submission was accepted and points awarded as well. I know how complex it may be to have say a script or an AI to go check and validate the actual solution a user submitted and I don't know if you guys have a feature where users can report or flag a fake solution to prevent someone from spamming or using a bot to submit fake solutions and get free points. Anyways I was thinking maybe you guys could do like a mod/ solution reviewer kind of thing where a selected and trusted few members of the community could actually review solutions and have a checklist/marking scheme for each challenge and of course provide feedback and maybe reasoning for the marks. I know you guys have like this forum for posting feedback already but sometimes it's not guaranteed or quality feedback. Also thinking about the number of challenges that get submitted weekly, maybe this could be a feature for only premium members so it adds more value to a premium subscription and would let more people want to get a premium account.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted 4 months ago

  @dylan-dot-c, hey! We're planning to review the solution feedback UX and look into creating "enhanced reports" that will be more comprehensive than the current solution reports. Hopefully, these will boost the quantity and quality of feedback people receive on their solution, both through automated feedback and from other community members.

  Regarding "fake" submissions, there's no reliable way to guard against them other than community members reporting people who have plagiarised solutions. We also plan to make this easier by adding a "Report solution" button, but for now, the best way to report them is to email us at [email protected]. Submitting plagiarised solutions leads to an immediate ban, so hopefully, this is enough of a deterrent. But people submitting plagiarised solutions are really just cheating themselves anyway. There's no substitute for actual practice for getting good at coding.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted 4 months ago

  @dylan-dot-c, also, please remove your test solution submission as it's against our community guidelines to post solutions for incorrect challenges and could confuse people, especially as it's a submission on the first challenge in our first learning path. I know you were just testing this out, but it would be helpful if you removed the solution. Thanks 🙂

  0

  

  Dylan Heslop•770

  @dylan-dot-cPosted 4 months ago

  @mattstuddert just removed it, no worries. Thanks for the insights as well.

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted 4 months ago

  @dylan-dot-c, thanks!

  0
• 

  Charlie•300

  @XarlizardPosted 8 months ago

  Edit: Yep, turns out their internal browser is not updated to be compatible with the last CSS features, and they are working on implementing it;

  YOO why are fonts not correctly loading on this site's previews???😭

  Should I not nest my CSS elements within themselves / within parent elements?

  0

  ---

  

  Daria Liferova•30

  @dliferovaPosted 8 months ago

  @Xarlizard

  Just add a special style sheet link in the <head> section and then refer to the font in the CSS

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Outfit:[email protected]&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap">

  body { font-family: "Hanken Grotesk" }

  1

  

  Charlie•300

  @XarlizardPosted 8 months ago

  @dliferova thanks for the reply! I have an @import on the CSS file already; in fact, the font-family is correctly loaded and displaying and that is not the issue;

  As I pointed out, my issue resides on my CSS being too nested for the internal frontendmaster's display browser version (it is outdated so that is why it is not supporting native nested CSS). I don't blame them, native CSS nesting feature has been fully implemented on all major browsers since December 2023, so it is normal for them to take a little bit more time than the main browsers. We just need to wait until they update it for it to correctly work 😄

  0

  

  Dylan Heslop•770

  @dylan-dot-cPosted 8 months ago

  @Xarlizard I was surprised when I saw nesting in css... I only use it in sass but good to know

  1

  

  Charlie•300

  @XarlizardPosted 8 months ago

  @dylan-dot-c yeah me too, I actually like A LOT how nested native CSS looks

  1

  

  Dylan Heslop•770

  @dylan-dot-cPosted 8 months ago

  @Xarlizard So what are you going to do, to make it show properly?

  Maybe just use ChatGPT to un-nest your css code... Or you can use Scss either installation or a vscode extension

  and after that Generate a new screenshot for it

  1