P

drallas

@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

All Solutions

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

    Typemaster Pre Launch Landing Page

    • HTML
    • CSS
    4
    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
    3
    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
    4
    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
    9
    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
    7
    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
    6
    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>
    
  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge

    The Huddle Puddle of Responsive CSS

    • HTML
    • CSS
    4
    P
    Submitted

    This was my 2nd project on Frontend Mentor and it was easier than the first 'Ping' Project. I also like the design the purple isn't boring and keeps me motivated! :)

    Some feedback would be helpful on : How is the responsive layout / what can I improve? Social Icons on Safari / iPhone XS are not centred in Firefox on the XS it looks good, why is this?

    I enjoyed this challenge, but still only using basic HTML / CSS and no SASS or Frameworks yet.

  • Desktop design screenshot for the Ping single column coming soon page coding challenge

    PING! First one done (HTML / CSS with BEM / Vanilla JavaScript)

    • HTML
    • CSS
    • JS
    3
    P
    Submitted

    This was my first Frontendmentor Challenge and this is also the first solutions i submit. I tried to be as close as possible to the design without obsessing about pixel perfectness. Perhaps it's completely off since i struggled extracting the correct sizes from the jpeg files.

    Some Feedback would be welcome on the project in general.

    What is also weird is that the Media Queries seem the kick in a bit later / earlier than the value i set. I have no idea why this is.

    PS : I have some (prf) HTML experience from the mid 90's; almost completely useless now i see! Then tables where abused for layout, CSS didn't exist (yet) and JavaScript was just invented still competing with VBScript for relevance.