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
Log in with GitHub
OverviewSolutions16Comments17

All comments

  • Ollie• 580

    @ohermans1

    Posted

    Very swish! I really like it :)

    Marked as helpful

    0
  • P
    Christopher Adolphe• 580

    @christopher-adolphe

    Submitted

    Hello there!

    This is my 1st challenge on Frontend Mentor and I really enjoyed it. I am pretty much satisfied with the final result.

    Major challenge(s):

    • The custom-styled select was a bit challenging. I used a list of radio button inputs to mimic the list of options and wired that with JavaScript to handle the events. While I this was a great opportunity to practice my JS skills, I still wonder if some of you have found a simpler approach for this feature.

    Unsure of:

    • When I validated the compiled css, I noticed that some of my sass variables went being output as well. I'm not sure if there is an issue with my breakpoint mixin or if it is because I recently switched from @import to @forward and @use in my .scss files. I'd be grateful if you could point out what I'm doing wrong here.
    • The accessibility validation notified me of 3 contrast errors, I chose to ignore them and stick to the design. Would you have done same ?

    Bonus features:

    • The signup form shakes to display the invalid state and flips to display a success message when valid.
    • I added some animations using GSAP and the ScrollTrigger plugin.

    Your feedback would be much appreciated.

    Thanks in advance. 🙏

    Officelite website | HTML, CSS, JS

    #gsap#sass/scss#webpack#typescript

    1

    Ollie• 580

    @ohermans1

    Posted

    Hey Mate

    Just want to say that this is awesome! I really like the shake on invalid for the form - I'm gonna give it an idea in a future project!

    I'm looking forward to seeing what you do next!

    Ollie

    0
  • Kaung Zin Hein• 720

    @K4UNG

    Submitted

    This was a very challenging and fun challenge. I learned a lot about more array methods and got to practice my state management skills. For the drag and drop feature, I couldn't do it for mobile touch. Other than that, I'm happy with what I got. I'd love to hear your feedbacks and suggestions on how I can improve further or implement the drag and drop feature with touch. Happy Coding!

    Todo app with drag and drop feature using Vanilla JavaScript

    #accessibility#sass/scss

    1

    Ollie• 580

    @ohermans1

    Posted

    Wow this is awesome! You managed to get the fully functionality in! Well done!

    1
  • Dogan Saglam• 350

    @dsaglam94

    Submitted

    Hello guys!

    I continue my learning journey. I really liked the design of this project so I wanted to make it and put it in my portfolio. Added some personal touches.

    I really love to hear your opinions and recommendations.

    Happy coding y'all!

    Mobile First - Responsive Landing Page

    #sass/scss#bem

    2

    Ollie• 580

    @ohermans1

    Posted

    Nice work! Love the extra touches!

    1
  • Ollie• 580

    @ohermans1

    Posted

    Wow! For a first project, you have done an awesome job!

    The only minor issue I can see is the incorrect font and font alignment above the learn more buttons. Also, adding a little padding to these boxes would make the header text and paragraph text look a little closer to the original.

    Where you have the classes .transform-brand, .standout etc, it may have been better to make one class, as the styling is the same across these? You could then just add a text-align right, a padding of about 3 rem and correct the font color and you'll be good to go!!

    Anyway, great job overall! Looking forward to seeing your next project!

    Marked as helpful

    0
  • 👾 Ekaterine Mitagvaria 👾• 7,640

    @catherineisonline

    Submitted

    Hello, Frontend Mentor community! This is my solution to the Sunnyside agency landing page.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Sunnyside agency landing page

    11

    Ollie• 580

    @ohermans1

    Posted

    Nice work! You've done a very good job on this one!

    0
  • Abrosss• 440

    @Abrosss

    Submitted

    My biggest challenge here was that round underline in links and navigation bar on mobile:D The first time using javascript too.

    Landing page(flexbox)

    3

    Ollie• 580

    @ohermans1

    Posted

    Great work on the JS! Very tidy for a first attempt.

    Out of interest, is the white space around the page a design choice? I notice that it goes away for mobile view, but is there for desktop and the screenshot?

    Nice job overall!

    Ollie

    1
  • Mark Robbins• 30

    @mrobbins0422

    Submitted

    Had trouble scaling the entire component. Since I knew the text was fixed at 15px and a font-weight of 400, I boxed it in and scaled everything else to fit. Is there a better way? I am still having trouble geting my repository to show up as a github pages. Does anyone have any cheat sheets on the topic? Any feedback would be appreciated. I'm gonna go look and see how everyone else did it. :-)

    QR Code Component

    2

    Ollie• 580

    @ohermans1

    Posted

    Hey Mark - Great work on this one!

    One suggestion - I would take a look at using rem instead of px for all measurements. The rem unit means everything is linked to the root font size in your document (which is 16px), therefore 1rem = 16px.

    Its a little tricky to explain, but if you set your root font-size to 62.5% - this will mean that every REM is 10px, so its easy to convert. A plus of this, is that if you use REM for every measurement, when you go to do your media queries, you can change the root font-size to a different % for different screen sizes to scale the entire project.

    Sorry if my explanation is a little rough, but take a look into it :) https://www.aleksandrhovhannisyan.com/blog/respecting-font-size-preferences-rems-62-5-percent/ This blog might help!

    Marked as helpful

    0
  • Ollie• 580

    @ohermans1

    Posted

    Hey! Take a look at this for changing the SVG colours (in this case your footer logo).

    https://codepen.io/sosuke/pen/Pjoqqp - basically you apply a filter to the SVG that changes the color. It works best if the SVG is black, so I usually first go into the SVG file and change this (you'll see the hex code in there with the current color.). The filter method works for hovers and everything.

    Marked as helpful

    0
  • Ollie• 580

    @ohermans1

    Submitted

    I really enjoyed this project - it is my second using React, and involved a lot more props and other behind the scenes react then my last project to get the slider etc working. I also used SCSS as I much prefer it over standard CSS.

    The initial app was created using create-react-app, and was built and added to github pages using gh-pages.

    I am really happy with the end result, but of course, appreciate any feedback!

    Est time: 4 hours | Total time: 6 hours

    Second project using React

    #bem#react#sass/scss

    2

    Ollie• 580

    @ohermans1

    Posted

    This comment was deleted

    0
  • Zero• 50

    @ZeroBl21

    Submitted

    I really don't know how to do the light box without repeat all the carousel with Vanilla CSS and Vanilla JS, By proxy I could do it, but I would not like to see the result, I am already quite uncomfortable with the normal JS result.

    PD: Sorry if I write something wrong, English is not my native language.

    E-Commerce Product Page - Mobile First | Vanilla JS and CSS

    1

    Ollie• 580

    @ohermans1

    Posted

    Looking Awesome!

    For my carousel I just used a counter, that went up as you clicked right and down as you clicked left. I then used this to create the file name. For instance, if you were on image 2, the file name would be "image-product-" + counter + ".jpg". Each time you clicked, it would change to a new file name :) - Not sure if this is the best solution, but its an idea

    0
  • Nasim Reja• 220

    @nasim67reja

    Submitted

    It was too hard for me 😢.I tried my best.You must check the slider and tab component. I have added some animations on cart icon and the tab component. Don't forget to give feedback. Any feedback will be appreciated 😊

    E-commerce product page

    1

    Ollie• 580

    @ohermans1

    Posted

    Take a look at my shadow-box / slider. I just used a counter, that went up as you clicked right and down as you clicked left. I then used this to create the file name. For instance, if you were on image 2, the file name would be "image-product-" + counter + ".jpg". Each time you clicked, it would change to a new file name :)

    Nice work though! Looking super close to the original.

    1
  • Ollie• 580

    @ohermans1

    Posted

    Awesome work! Super close to the original.

    0
  • bunee• 2,060

    @buneeIsSlo

    Submitted

    Wow! I severely underestimated this challenge, trying to create the card flip animation consumed a lot of my time. Not particularly proud of the code on this one, but with some help, I got there in the end.

    Features

    • Added particles effect instead of the static stars background.
    • Added animations on page load.

    Questions

    1. Is the particles effect smooth on your device?
    2. At the moment, canvas does not resize along with the viewport. Do you know how to fix it?
    3. Did you find any bugs?

    of course, I'd be happy to receive any kind of feedback you have for me.

    Acknowledgment

    • I'd like to thank @tediko for his solution to this challenge. After studying his code, a lot things became apparent to me.
    • Also shout out to this one person on slack(I'm sorry I lost their username) for showing me this useful codepen

    Click here to view the live site

    Click here to view the code

    P.S. If you have any questions for me, Feel free to comment or message me on slack :)

    ⏳Launch Countdown Timer | HTML-CSS-JavaScript | Canvas | Webpack

    #accessibility#webpack#node

    2

    Ollie• 580

    @ohermans1

    Posted

    Was just looking through a few of these solutions to see how other people have done the flip board and came across yours! Love it, def my favourite.

    Also, the particles are super smooth on my device (Win 11, Chrome) - how did you do them?

    Also cheers for sharing the countdown codepen!

    Marked as helpful

    0
  • Ollie• 580

    @ohermans1

    Posted

    Awesome work! Super close to the original!

    Marked as helpful

    1
  • Hum Bruno• 230

    @humbruno

    Submitted

    • I initially struggled with centering the card vertically on the page and after some researching, I found out that by applying min-height: 100vh to the body could accomplish this.
    body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

    I'm not entirely sure why exactly this works and if there are any more effective or clean ways to achieve this effect, I would love to know alternative ways to accomplish this!

    • This project was also a great to get into the habit of writing CSS variables for properties that I thought I would have to re-use throughout the code.

    After reading about it on MDN, their recommendation was to apply these styles directly to the :root pseudo-class. Where do you apply your CSS variables?

    :root {
  --white: hsl(0, 0%, 100%);
  --lightGray: hsl(212, 45%, 89%);
  --grayishBlue: hsl(220, 15%, 55%);
  --darkBlue: hsl(218, 44%, 22%);
}

    QR code component solution using HTML and CSS

    1

    Ollie• 580

    @ohermans1

    Posted

    Hey Mate

    Looking awesome, well done!

    Regarding your two questions:

    1. Centering - that seems like as good an approach as any. If you think about it, the main body needs a height, otherwise, what will the container know to centre too. So giving it a height of (at minimum) 100% of the view height allows it to know where it is centring.

    2. When using just plain old CSS and not a preprocessor (I use SASS/SCSS) it is good practice to put the variables in :root. I would recommend taking a look at a preprocessor like SASS, because it gives you the power to have a whole separate sheet dedicated to variables + much more powerful variables, like background-color: rgba($color-black, 0.7); for instance if you wanted a transparent version of a variable color you already have stored. There is a course on udemy call Advanced CSS and Sass which I found super helpful!

    Cheers and keep up the good work.

    Ollie

    Marked as helpful

    0
  • Ollie• 580

    @ohermans1

    Posted

    Hi Mate

    This might not be the best solution to your tooltip problem, but I will have a go.

    I would move the share-tooltip div in your html so that it sits at the same level as card__photo and card__text. Then for the media query just flick it to position: relative; and width:100%; Then you can display: none; your card__footer-share.

    You will need to adjust the absolute positioning for the non-mobile version, but this should give you a good start!

    Awesome effort by the way!

    Ollie

    1