Frontend Mentor | Designo with SCSS architecture, CSS grid and reusable components coding challenge solution

Solution retrospective

Hi Community!

Second project. Picked this one to practice SCSS architecture, reusing components and just generally writing SCSS as well as possible. Honestly it was a blast, I learned more about HTML + CSS in this project than anything else I've done to date in the last 12 months!

Feedback would generally be criticism of the code. Semantic HTML, SCSS. I tried to fill out every single alt attribute this time round but perhaps I missed some, we shall see 😁.

These are big asks so I don't expect anything, but if someone is curious enough about my code go nuts!

The form page has some custom code where the 'placeholder' (it's actually a label) text moves upwards with reduced size and opacity when the input is either selected or filled.

Happy Coding :)

Community feedback

The Burrito Doggie• 1,260

@BurritoDoggie

Posted about 3 years ago

hello Rafal Potasz,

I don't know what to say. It is amazing. I just love it. I thinks its really cool that when your mouse hovers over the pictures they turn pink.

I don't so much about programing so I can't find any mistakes I just really wanted to complement you.

I would say so much more but I want to keep this short.

I also think this is really cool because like I said I am not good at programing and it is really hard for me and takes me a long time. So when I see this I just can't imagine how long it took you.

Whether it took you long or not I still think you are pretty cool and great.

Keep Coding 🙃

                    (@@)
                     \__/

Rafal• 1,395

@grizhlieCodes

Posted about 3 years ago

@BurritoDoggie Thanks for the kind words. Took me a fair while. I ended up rewriting this to structure SCSS completely differently. Overall it took roughly 500 lines of code less with the second attempt in the final CSS file, was a good learning experience, albeit taking a while :)

Akindeji• 60

@Sharpmind015

Posted about 3 years ago

Hey Rafal, I really like your solution. How do you make yours pixel perfect to the design. The spacing is perfect, did you get the figma design links?

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Hi, Rafal Potasz! 👋

Great job on this challenge! 👍 This quite a large project and you've done well in building each page and making it all responsive! 👏 I like the micro-interactions you added to the labels of the form (I actually did the same thing, too, when completing a recent challenge). 😆

I'd like to suggest,

Adding a heading to each <section> tag that you use to identify that section and clear up the HTML issues on your solution report.
Adding a <title> tag to each of the inline SVGs to identify them and clear up the accessibility issues on your solution report.
Adding overflow-x: hidden to the body to prevent horizontal scroll bars from appearing along the bottom of the page on the "Home" page and the "Our Company" page (I think the overflow of the background shapes on those two pages is causing that issue).

Keep coding (and happy coding, too)! 😁

Rafal• 1,395

@grizhlieCodes

Posted about 3 years ago

@ApplePieGiraffe Awesome feedback, greatly appreciated. Am implementing it as we speak.

Also, blood hell, just saw your portfolio, busy bee > giraffe 😁!

I have a follow up question seeing the sheer amount of content you have under your belt, what non-server-lang templating solution would you recommend (if any) for things like headers and footers? Currently looking at handlebars but i feel a lack of knowledge. Wondering if I'm trying something too out of reach, too quickly.

Oh man - I just saw the ToDo solution using Svelte, I'm practically jealous 🙄. Svelte looks incredible to work with.

Thanks for the help APG. Think I'll be scouring the solutions from people to spread some missing gaps in knowledge like you did for me.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@grizhlieCodes

Thanks, Rafal! Glad to help! 😊

I'm afraid I won't be able to recommend anything about templating because I actually hadn't really heard of that! From the little research I've done, however, I guess Handlebars seems to be well-recommended, so it might be a good option. 🙂

Svelte is pretty awesome and you should check it out if you're interested and have some extra time! I think it's quite easy to make the jump from HTML, CSS, and JavaScript to Svelte and it makes things much easier (and I think, more intuitive) when building larger websites. 😀

Giving feedback to others on Frontend Mentor is a great idea! It's helped me learn a lot, too, so definitely give it a try! 👍

Rafal• 1,395

@grizhlieCodes

Posted about 3 years ago

@ApplePieGiraffe Ended up finding a £13 course (that's also 13h long) on Svelte, on Udemy.

So far it's fricking awesome. I'll probably end up trying that to-do app with Svelte at some point 😎. You are 100% right, it is so intuitive. The component-driven methodology of writing code makes sense to me, pretty sure it's how most complex (and good) things are built.

Thanks for the help and guidance 👍

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@grizhlieCodes

Awesome! 👍

kumar dev• 335

@dev691047

Posted about 3 years ago

nice

Designo with SCSS architecture, CSS grid and reusable components

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community