Building most of the challenges is kinda hard to me because of my screen size. I'm using a 1280x720 screen, and since the challenges are "meant" to be for 375px and 1440px width, I kind of struggle... Still, it's fun to try it out!
Jonathan
@corjonAll comments
- @ZephyroCodeSubmitted about 2 years ago@corjonPosted about 2 years ago
For your concern about your screen size: You can right-click on your site and choose 'inspect'. This opens your browsers dev tools and at the top select 'responsive' then change the width to whatever you want. Hope this helps!
Marked as helpful0 - @AlifBSubmitted about 2 years ago
What's the best practice when to use padding and when to use margin?
@corjonPosted about 2 years agoHere's a great resource on padding vs margin. Basically, padding is the space around an element and margin is used to separate elements.
Marked as helpful1 - @dlxzeus777Submitted about 2 years ago
- My solution to the bonus challenge was 'bar.style.height =
${datas[index].amount / 10}rem
;' this. I took the amount data out of the JSON file divided it by 10 and gave the bars height the result. I used try and catch in my fetch because on github pages fetch doesn't work so I had to give them different heights.
Any advice on how can I fix it?
I also used click instead of mouseover event to view the prices for the bars.
@corjonPosted about 2 years agoTry removing the forward slash in your fetch url so it looks like this
fetch('data.json');
Marked as helpful1 - My solution to the bonus challenge was 'bar.style.height =
- @FelipeDaCostaSubmitted about 2 years ago
How can I improve this?
@corjonPosted about 2 years agoYou can center your content vertically by adding this:
body { min-height: 100vh; }
1 - @DavidMorgadeSubmitted about 2 years ago
Hello and welcome to my Creative agency, single page solution
Extra Features:
- Sticky Navbar for easier navigation.
- Smooth navigation clicking the links from the navbar
- Custom Swiper.js Slider.
- Personal changes on hover, image sizes, buttons sizes
Breakpoints:
- Mobile: 375px - 768px
- Tablet: 768px - 1440px
- Desktop: 1440px+
Things that I learnt:
- CSS Mask
- Improved a lot on pseudoelements (thanks to kevin powel vids)
- More components, and more reusable components
Built with:
- React
- Styled Components
- Swiper.js
Question to the community:
Sticky navbar, do you think is a good idea? Thoughts on navbar size when navigating on the page?
Hope you like it!, any feedback would be appreciate, I would apply all the changes that you suggest me here!
@corjonPosted about 2 years agoWhen I scroll down a bit on the live site, the navbar starts to flicker. Looks good otherwise!
Marked as helpful1