drallas

Pro
@Drallasdrallas
Planet Earth
375Points

I like to πŸŠβ€β™‚οΈπŸš΄β€β™‚οΈπŸƒβ€β™‚οΈtrying to be active at least an hour each day. Currently I'm also learning modern Web-Development technologies here on Frontend Mentor!

I'm currently learning...

CSS / SASS / Javascript / React

Latest Solutions

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

    Typemaster Pre Launch Landing Page

    • HTML
    • CSS
    P
    Submitted

    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.
  • Desktop design screenshot for the Pod request access landing page coding challenge

    Pod Request Access

    • HTML
    • CSS
    • JS
    P
    Submitted

    I'm happy about the process of 'hacking' this one together.

    Getting the button inside the text field (and stay inside) was a nice challenge. I avoided almost all absolute values. Just working top down applying values from Figma seems to work for me.

    Feedback is welcome

    • The 32 dots block is absolute positioned, it look good on mobile / tablet / desktop but is outside the flow of the document; should and how can i do this different!?
  • Desktop design screenshot for the Social proof section coding challenge

    Social Proof Section - My final newbie challenge!

    • HTML
    • CSS
    P
    Submitted

    This was my final newbie challenge and I had fun again building it, more details about my process are in the readme.

    Feedback is very much welcome I'd like to learn and improve my skills! I'm curious if my approach is correct and what i should consider refactoring or doing different next challenge..

  • Desktop design screenshot for the Single price grid component coding challenge

    Single Price Grid Component

    • HTML
    • CSS
    P
    Submitted

    Submitted my v1 version for the Single Price Grid Component, it more work than it seems up front.

    My questions:

    Should the grid shrink on resize?

    Currently width and heights of the grid container is fixed is this ok, or what else is recommend to make sure the items fill up enough space?

  • Desktop design screenshot for the Four card feature section coding challenge

    Four Card Feature Section as my My Fourth Challenge

    • HTML
    • CSS
    P
    Submitted

    I managed to complete the 'Four card feature section' and this one was fun too. I wanted to use the Grid system since the four cards seemed perfect for that. Never used the Grid System before outside tutorials, so i had to read the Complete Guide on CSS Trick again.

    I think I did a good job on this more details about my choice and coding experience are in the README.md.

    Feedback would be welcome : How is my CSS, what can I do better / more efficient? Did I use the Grid system correctly?

    Thanks for any help.

  • Desktop design screenshot for the Profile card component coding challenge

    The Profile Card Component (HTML & CSS only)

    • HTML
    • CSS
    P
    Submitted

    This is my 3rd newbie challenge submit and I enjoyed the process of hacking this card component together. Building such a 'simple' card component isn't easy for a 'Newbie' and it requires some time to think over before trying to do it properly.

    Feedback would be welcome How is the responsive experience; what can / should I improve (*see Note)? I try to use BEM but still have doubt if i used it correctly Anything else that I missed or should improve.

    Note: Related to BEM I recommend this video: https://www.youtube.com/watch?v=iyR6RXUZFQ8 it's quite good and explains it in visual detail.

    Where I struggle is how should elements be named when there are multiple levels of nesting.

    <div class="card__mid">
              <div class="card__text">
                <div class="card__name">Victor Crest <span> 26</span></div>
                <div class="card__location">London</div>
              </div>
            </div>
    

Latest Comments

    • HTML
    • CSS

    Typemaster page - HTML/SASS

    3
    P
    drallas375 | Posted 6 months agocommented on Rayane's "Typemaster pre-launch landing page" solution

    Hello Rayane

    Congrats on finishing this Challenge! πŸ‘

    I think your solution looks pretty close to the Figma design with a nice transition between when you switch over to / from desktop layout. Not sure if shrinking the images itself is the best solution, i opted myself to keep them 'static'.

    I finished this one yesterday evening and used your solution as an inspiration to refactor mine. The tip for the 'mix-blend-mode property to get the "orange" effect' was very helpful since i struggled to get that right and with a linear-gradient I couldn't get it look as the Figma design. I also refactored to get rid of @import using @use now. Btw I noticed that your SCSS is showing in FF Inspector, mine isn't; how does that work?

    I used SASS for the first time this challenge and went 'all in' on structure; perhaps too much when i look at your SASS folder structure that's a bit simpler. I think it's ok to split up the SASS CSS into small components, not having to search so much to find a specific piece of code.

    I hope it helps!

    Enjoy coding the next one.

    Greetings, Drallas

    2
    • HTML
    • CSS

    Profile card component

    4
    P
    drallas375 | Posted 6 months agocommented on Zuhair.N's "Profile card component" solution

    Well done Zuhair it looks good and a nice attribution twist! :)

    0
    • HTML
    • CSS

    Movile first using pure HTML and CSS

    5
    P
    drallas375 | Posted 6 months agocommented on Diego De TomΓ‘s's "Profile card component" solution

    Hello Diego

    Nice card implementation!

    I also used absolute to place the image. You could try with margin left & top.. I Just opened my project for this and i get the picture in the center like that too. Perhaps you could give it a try and see if it works for you.

    0
    • HTML
    • CSS
    • JS

    Pod-request-access-landing-page

    2
    P
    drallas375 | Posted 6 months agocommented on Mohammad Abu-Odeh's "Pod request access landing page" solution

    He Mohammad

    You're Desktop site looks good, but your Tablet and Mobile are not showing up nice. It's easier to start Mobile first and then apply CSS exceptions for Tablet and Desktop. https://zellwk.com/blog/how-to-write-mobile-first-css/

    0
    • HTML
    • CSS
    • JS

    Using Grid

    1
    P
    drallas375 | Posted 6 months agocommented on Sven's "Pod request access landing page" solution

    Hi Sven

    Good work, I'm working on this one at the moment.

    I just flexbox (space-around) on the parent div with the logo img files. And then for each logo nth-child i set a height. Those values are all in the Figma file.

    You mobile version seems to have no BG image set!

    I hope it helps..

    Greetings. Drallas

    1