Loopstudios Landing Page With React

@emestabillo

Thank you very much! 😊 I also just noticed that the word "experiences" is very close to the edge of the border around the heading. I think it's that way for all devices at that screen size, but it should be an easy fix. 👍

@emestabillo

BTW, I was going to mention that I actually took a bit of inspiration from you for this challenge (such as the responsiveness of the cards in the "Creations" section). 😉 And you should have seen my file structure before I learned a thing or two after looking at the folder structure of your most recent solution (that you made with React) earlier today—mine was a mess! 😂

@ApplePieGiraffe Haha I deleted part of my first comment before I posted and it went: “I did the exact same thing to my sass files” 😂 I can’t say it’s best practice since I’m still learning but I’ve been studying multipager submissions on FEM and that seems to be one way of doing it. Thanks a lot for taking a look and commenting on my loop project 👍🏼

@brasspetals

I knew I was going to forget a couple of small details because I was focusing on React, but you have a good eye, of course, and so thanks for pointing out those things!

I decided to scrap the underline on hover the social media icons because I liked simply darkening them better. I actually had some other custom ideas for the hover states of those social media icons, but I didn't like the way things were going when I tried them out, so I scrapped them, too. 😅

Funny thing, I only included the 300 font-weight for Josephin Sans when linking my typefaces from Google fonts, so I didn't bother about explicitly setting a font-weight for the headings, but the browser must store that typeface by default or something because those headings are thick!

And I changed the z-index of a few elements to get the mobile menu working and apparently forgot all about the logo in the mobile layout!

React is good, and I like it because it utilizes vanilla JS constructs to accomplish things a little more than other frameworks do (apparently). TBH, I like Svelte better so far because it just makes so much sense (especially if you jump into it after HTML, CSS, and JS), but I have much to learn, as well, so we'll see how it goes!

Thanks! 😁

@ApplePieGiraffe I figured the icons were a conscious choice, but thought I'd toss it in there just in case. I had the same font-weight issue when I initially submitted my Insure project. Had to go back and tweak a bunch of layout elements. 🤦‍♀️ Never again.

Thanks for getting back to me about React (and Svelte) - good to know!

As always - happy coding, APG! 😄

@brasspetals

I just pushed a bunch of those fixes to the live site—so things should be good, now!

I can't wait to see your solution to this challenge! Let me know when you submit it! 😉

And, yes, of course—happy coding! 😁

@tesla-ambassador

Thanks, dude! Can't wait to see yours! 😉

@steventoben

Wow, thanks. I really needed advice for React! I knew the logic for the mobile navigation menu was pretty bad and my Sass was quite ugly, but I didn't bother fixing those things (until now, I guess). 😀

To be clear, should I split my components into just separate functions or simply create new files for each component?

@ApplePieGiraffe No problem! If you need any React help I'm probably a good resource since I've been using it professionally for like 3 years so I have a pretty good grasp on most of it. It really depends on the situation, for example on this project here I'd make a Nav.jsx and a List.jsx but in that List component I'd make a ListItem function. If you did that you could also set List.Item = ListItem; Then export the List. Then when writing a list it would look like <List> <List.Item> List Item 1 </List.Item> </List> and that would let you write some cleaner code and keep both List and ListItem functions in the List file. It's ok to have multiple components in a file as long as they're tightly coupled, basically like helper components that wouldn't be used without the main component. Just like you'd never use an <li> element without a <ul>.

And yeah it's ok to use the nesting feature and it's an amazing feature but people often go overboard and don't think about what that sass code will look like as css code, cause in the end it's going to be converted to css so nesting will create tons of code repetition. It's a great feature but just make sure to think about what the css compilation will look like.

@steventoben

Okay, cool! 👍

I hardly touch react, but one of the most common issues I see with react projects is forgetting some of that base html knowledge picked in earlier challenges. That hamburger is a classic example I'm afraid - a div used instead of a button. You know that's gonna make me sad 😉

But I also know you have the power to fix it ☺

@grace-snow

Snap! 🤦‍♂️ I had been careful to use the button element for past hamburger menus I made but I completely forgot about it in this challenge! Thanks for pointing that out! 👍

@ElieB77

TY! 😀

@astroud

TY! 😀

@shahabs789

TY!

@SarahHenriette

Thanks, Sarah! 😊

@softmagnet

Thanks for the tip! 😀

@oliveiring

Hey, Michel! 👋

I used the <picture> element to change between the desktop and mobile images for the cards in the "Our Creations" section. You can learn more about the picture element and how to use it here.

@oliveiring

That might work, but I think using the picture element might be a little better for semantics and will allow you to determine when the image changes right in your HTML, which will probably make things a little easier to manage.