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
Not Found
Not Found
Not Found
Not Found

Submitted

Typemaster Pre Launch Landing Page

drallasβ€’ 375

@Drallas

Desktop design screenshot for the Typemaster pre-launch landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was a nice project, a bit more time consuming than I expected before starting.

Perhaps also because it was the first project that i used SASS; never used it before.

Feedback is welcome:

  • How can the responsiveness be improved, i struggle a bit deciding when to break!
  • Any tips on my SASS Usage.
  • I couldn't get the orange overlay exactly the same as the design, how can it do it different.
  • Any tips what how to improve the site in general.

Community feedback

Raymart Pamplonaβ€’ 16,090

@pikapikamart

Posted

Hey, there is an issue about the structure.

  • Okay, when I visited it, there seems to have 2 scrollbars on the right, the and I inspect your element and the overflow-x: hidden causes this that was declared on your .wrapper selector. I tried removing it and it fixes it.

  • Another issue, a big issue is that, there is a huge white blank spaces in your layout, in different sections there is. As I look in your grid, since you used grid in here, and saw your row grid-template-rows: 100% 100% 100% styled like this. Okay now this is a big problem like, since you are getting 100% but from where? At this instance, it is from the viewport since your grid, have no parent container. You could just remove this if you are just placing them in rows right or your declare it like this one grid-template-rows: repeat(3,auto);. That way, they are placed in different rows, and the size of the rows varies according to the height of the item that will be placed, hence auto.

  • I look into your sass and it seems okay, though when using scss it is better to use @use instead of @import so that there will be a namespace added to them, and them treating them as a module. But it's fine for now, I too use @import in scss since I cannot use other @ methods of sass since I am just using live sass compiler in vs code, but when I do my freelances, I go in best practices and uses my gulp for it.

Refactoring those codes will be a great idea^^

2

drallasβ€’ 375

@Drallas

Posted

@pikamart

Thank you for taking the time to look at my challenge and give feedback.

I can't reproduce (2 scrollbars) and (huge white blank spaces) in my layout but i tried to refactor a bit. The overflow-x: hidden i moved to the Body since i need to prevent 'vertical scroll'.

This was supposed to be a grid challenge, but somehow i made a grid and then was pulled into using Flexbox. I completely removed the Grid and only needed a justify-content: center; on the .features container to make it look as before.

I'm glad to hear my SASS look okay.. I'm still a little bit lost on @use and build tools (gulp / / Grunt /Parcel), tried to research it but it doesn't click yet!

Noticed that if I change @import to @use the VSCode plug-in won't compile it? After some research i switch to Glenns Live Sass Compiler that's derived from ( ritwickdey) orignal and maintained and supports Dart SASS with @use. Had to refactor the SASS a bit, but no more @imports.

Thanks for pointing it out, going forward i start using @use!

1
Raymart Pamplonaβ€’ 16,090

@pikapikamart

Posted

@Drallas Glad to hear that you made it worked and yes, I don't know why the sass compiler can't handle @use only @import . Well goodluck on future challenges and to using sass^^

1
drallasβ€’ 375

@Drallas

Posted

@pikamart You can use @use in VSCode if you ise Glenns Live Sass Compiler that's derived from ritwickdey's version he couldn't maintain anymore. | "I'm sorry but I'm now super busy, If you want to be a maintainer of the project please feel me to contact me! You've to be passionate about programming".

Gulp and other build tools i'm not using yet! :)

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