Frontend Mentor
Login with GitHub
OverviewSolutions15Comments373

darryncodes

@darryncodesdarryncodes
Wiltshire, United Kingdom
5,170Points

An aspiring front-end dev. Professionally a direct marketer and CMS specialist.

I’m currently learning...

🍦 JavaScript

Latest Solutions

  • Desktop design screenshot for the Fylo data storage component coding challenge

    Fylo data storage - HTML, SCSS, JS, Flexbox, mobile-first & @keyframes

    #accessibility#bem#sass/scss#semantic-ui
    • HTML
    • CSS
    6
    darryncodes5,170
    Submitted

    Hi everyone 👋

    Good to be back after having a few weeks off over the holidays.

    I used this challenge to learn more about accessibility, focusing on:

    • semantic mark up and use of interactive elements
    • custom focus states
    • use of aria-label
    • making sure i removed animations and transitions for people that prefer not to see them

    I also had a play around with some animations which was great practice!

    Any feedback that could help me to improve my understanding of accessibility would be very welcome!

    Happy coding 🤙

  • Desktop design screenshot for the Interactive pricing component coding challenge

    Pricing component - HTML, SCSS, JS, Flexbox, Grid, BEM & mobile-first!

    #bem#sass/scss#semantic-ui
    • HTML
    • CSS
    • JS
    4
    darryncodes5,170
    Submitted

    Hi everyone 👋

    Wow what a challenge - I took my time with this one and finally relinquished the desire to complete as many challenges as I can in as little time as possible.

    I probably learnt the most from this one project than all the others so far. Forcing myself out of tutorial hell, I didn't copy and/or use code I didn't understand and I used google/MDN to work through the solution however difficult or time consuming.

    It was worth all the effort.

    🐛 However I do have one little bug to squish - the discounted price when toggled doesn't persist once the html range input is slid back and forth.

    If you could suggest a resolution or have any thoughts, it'd be great to hear from you!

    Happy coding 🤙

  • Desktop design screenshot for the Huddle landing page with curved sections coding challenge

    Huddle landing page - HTML, SCSS, JS, Flexbox & mobile-first!

    #sass/scss#semantic-ui#bem
    • HTML
    • CSS
    0
    darryncodes5,170
    Submitted

    Hi everyone 👋

    Great practice using pseudo-elements and positioning curved sections.

    Any thoughts welcome!

    Happy coding 🤙

  • Desktop design screenshot for the Space tourism multi-page website coding challenge

    Space tourism multi-page website

    #accessibility#sass/scss#semantic-ui
    • HTML
    • CSS
    • JS
    2
    darryncodes5,170
    Submitted

    Hi everyone 👋

    I'm not looking for feedback on this one as it was a follow along!

    However I would like to say thanks to Frontend Mentor providing this excellent learning opportunity alongside Scrimba and Kevin Powell - perfect timing in my development! Being able to cross over from theory/tutorials to see how development works in the real world is invaluable.

    My biggest takeaways are:

    • The design system and how Kevin builds out all the components in the design files before starting the site build
    • Using utility classes, css variables and the alternative approach to customisable inline styles
    • Accessibility - learning more about ARIA
    • The JS in general and hiding/showing content using html attributes
    • Having access to professional design files and getting closer to the real world development process

    Happy coding 🤙

  • Desktop design screenshot for the Sunnyside agency landing page coding challenge

    Sunnyside agency landing page - HTML, SCSS, Grid, JS & mobile-first!

    #accessibility#bem#sass/scss#semantic-ui
    • HTML
    • CSS
    • JS
    0
    darryncodes5,170
    Submitted

    Hi everyone 👋

    It's about time i kicked it up a notch and levelled up to the Junior challenges. I think i will stick to the HTML/CSS one's until I make significant progress with learning JavaScript.

    It was fun to build out a whole page not just a specific component. Overall i'm happy with the result but definitely feel I could have re-factored / approached some elements differently.

    Any thoughts welcome!

    Happy coding 🤙

  • Desktop design screenshot for the Intro component with sign-up form coding challenge

    Intro component with sign-up - HTML, SCSS, Grid, JS & mobile-first!

    #bem#sass/scss#semantic-ui
    • HTML
    • CSS
    • JS
    2
    darryncodes5,170
    Submitted

    Hi everyone 👋

    This turned out to be a fun one.

    Another great opportunity to practice JavaScript and client-side form validation. I learnt some big lessons from the base apparel challenge and it's really motivating to see small progressions on each challenge.

    Any thoughts welcome!

    Happy coding 🤙

View More Solutions

Latest Comments

    • HTML
    • CSS

    Responsive Card using CSS flex box

    2
    darryncodes5,170 | Posted about 15 hours agocommented on Thomas Caldwell's "NFT preview card component" solution

    Hi Thomas,

    Welcome to FEM, good to see you've completed your 1st challenge.

    I think you've nailed the centre align icons and text. display: flex and align-items: center; usually does the trick. I think margin-bottom: 0.7em; on .equilibrium + .days in your .cost div is messing up the alignment there.

    You should swap <div class="container"> with <main class="container"> to clear your accessibility report. Using descriptive/semantic html is really important

    Happy coding!

    0
    • HTML
    • CSS

    Testimonials Grid Section using HTML, CSS, Grid, Flexbox, Media Query

    1
    darryncodes5,170 | Posted about 16 hours agocommented on Genesis Gran's "Testimonials grid section" solution

    Hi Genesis,

    Great work with grid here, well done!

    I'd encourage you to clear down your accessibility report. Swap <div class="container"> with <main class="container"> and <div class="attribution"> with <footer class="attribution">. You could consider using <section> and headings in this challenge. Using the most descriptive html for the job is really important and the correct heading structure

    You could consider including a screen reader only <h1>, this snippet will help you do it:

    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
    0
    • HTML
    • CSS

    Order Summary solution, using CSS only.

    4
    darryncodes5,170 | Posted about 17 hours agocommented on Esteban Reyes's "Order summary component" solution

    Hi Esteban,

    I really like your solution, it's a good match!

    • I'd recommend updating background-size: 100% auto; and remove: background-position: 0 -280px; to match the background to the design
    • You could clear your accessibility report if you swap <div class="main"> with <main class="main"> and make your <h4> a <h2>, headings shouldn't skip levels

    All the best!

    1
    • HTML
    • CSS

    Stats preview card component with CSS3 and HTML5

    1
    darryncodes5,170 | Posted about 18 hours agocommented on StrigZ's "Stats preview card component" solution

    Hi Strigz,

    Awesome work, looks like your perseverance has paid off!

    I always find the challenge more challenging than you think haha.

    • as an alternative option to the overlay approach you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this will help achieve a closer match to the purple in the design
    • you would also need to explore background-blend-mode. (multiply usually does the trick)

    All the best!

    0
    • HTML
    • CSS

    Oder Summary Card Challange

    3
    darryncodes5,170 | Posted about 18 hours agocommented on Viktoria Bors-Pajuste's "Order summary component" solution

    Hey Viktoria,

    Welcome to FEM, good to have you here - it's the best place to learn (imo)!

    To answer your question i'd add Flexbox to your <body> like this: display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;.

    If you've set a max-width on the card you could use margin: 0 auto; to centre horizontally but flex is best in this case!

    Here are some really useful resources that might help:

    Keep coding!

    0
View More Comments