Looking to hire developers?
@jNembhard
@Yazdun
Submitted
Hey everyone ! This is my first Guru challenge and It's a little bit different from the original design, For example I completely changed the desktop hero section and I created a sidebar for the cart, which was supposed to be a modal.
I also decided to use more reddish color as the primary color, The original orange color didn't look alive enough to me 😁
I'm open to feedbacks and let me know of your thoughts about this solution. Thanks in advance
@jNembhard
Posted
This is good! I also did NOT know you could add an @ symbol to point directly to folders instead of writing out the entire file path when importing files...brb need to make some updates haha.
@donnyroufs
Submitted
First time looking into CubeCSS which made my head spin. So I decided to stick with utilities and the idea of composition. Next challenge ima take some more time to get a better idea of what to do.
@jNembhard
Posted
Nice animations! I suggest you try to build something with a React framework next and checkout the Framer Motion library. It's a bit more advanced and the codebase is kept more up to date. It takes a little getting used to, but you can do some really creative things to enhance your webpages.
If you plan on putting this on a portfolio, I'd update the favicon to match the project and also add a custom meta description. Companies like to see that you are actively aware of the importance of branding and SEO strategies.
@francisldn
Submitted
The focus of this project is about creating layout using CSS, in particular CSS grid. I was unable to render the heading - Modern Art Gallery in 2 different colours. Any feedback/help in this would be much appreciated.
@jNembhard
Posted
Hey Francisldn,
These pages are actually pretty clean. My advice? Build your next project with Styled Components or Sass instead of css. Some css code you write may not be compatible across all browsers and using these tools helps to keep the code consistent across all major browsers. Other than that, if you're building a portfolio, I'd definitely put this on there as it can be very eye-catching to people. Hope this helps!
@Andrewthe13th
Submitted
What is the best way to display the hero image for this webpage?
@jNembhard
Posted
Great attempt Andrew! If you want to display the image properly, one strategy would be to wrap the form content and picture in it's own container, and then wrap both those containers in a wrapper and put a flex property on the "master container." Set the picture container to have a min-width of the full size of the picture and then make the picture responsive: (width: 100% height: auto) and it will fill that space. you also want to set a property called aspect-ratio directly on the picture with css code that mirrors the width and height of the picture. This will prevent cumulative layout shift (CLS) while the picture is loading and also keep your lighthouse performance scores nice and high. Hope this helps.
Marked as helpful
@valli450
Submitted
This project did not seem very difficult to me but i had fun. All suggestions are welcome!!)
@jNembhard
Posted
Site looks good!
Couple of fixes: on the laptop layouts the About link in the footer bleeds over the Scoot logo.
When your pages get wider than 1440px, the layouts get screwed up. Set a max width of 1440px for each section and then use margin: 0 auto; to keep the page centered. at larger sizes.
The main image on the landing page only loads sometimes for some reason on my end.
To make this even better you could try playing with animations. It's not necessary but is definitely a way to make your site stand out even more. Great work though!
@Jeth0214
Submitted
Hello Guys, Is it good to have this project as my portfolio? I am just going to change those images and edit the descriptions and links. Can you guys give ideas on what I need to improve or change if I will going to use it as my portfolio.? Also, please have a code review on my solution. It will help me write my code more efficient and readable. Thanks.
@jNembhard
Posted
Hey @Jeth0214,
This a great attempt at a portfolio, but I'd suggest you re-do it completely after you build more projects.
Why? Looking at what you have now, the implementation is clean and understandable, but people who hire also like to know why you make certain design decisions and used certain coding tools. If you started with a framework, you could've cut this down to 3 static pages and one dynamic page instead of 7 static pages.
You did exactly what the instructions said, and that's a good start, but what can you do to make it yours? Clickable portfolio pictures, your own language for the projects, animations perhaps? You get the picture. Get as creative as possible!
@FNebEx
Submitted
This project helped me learn more about media queries, CSS custom variables, and using the child and sibling selectors. I got as close to the design as I possibly could. In the future, I might redo this project using Tailwind.
One thing that I struggled with was getting the image on mobile to not look so squished. I'll update it the future once I figure that out.
This was a fun project.
@jNembhard
Posted
Hey Kevin,
Great first attempt! I would suggest stepping thing up a notch after you feel you have a good handle with css to sass code. If you use something like Watch Sass in Visual Studio code, this will ensure your css code is compatible across all browser types.
Also try to make sure the object is centered in the layout for an optimal view. As for making sure the image doesn't get squished, there is a relatively new css code called aspect-ratio that you can set on the image to ensure it maintains it optimal width and height.
