Skip to content
OverviewSolutions
29
Comments
13
Johnny
@johnnysedh3lllo

All comments

  • Johnny•470
    @johnnysedh3llloPosted 8 months ago

    hey @Anastasia Ermolova l, i just looked at your implementation and it's amazing. please if i may ask, how were you able to get such an almost pixel perfect implementation?

    0
  • Adriano•38,250
    @AdrianoEscaraboteSubmitted 12 months ago

    👨‍💻 Hello everyone!

    I thoroughly enjoyed working on this project and using gitflow for the first time. The organizational structure it offers is compelling, making me feel more confident in developing branches with specific goals. I plan to invest more time in mastering gitflow to enhance my skills.

    As for the project, I'm pleased with the outcome. Despite not being a highly complex app, the experience was rewarding and beneficial. It allowed me to revisit Next.js concepts, contributing significantly to my professional growth.

    Technologies used:

    • Next
    • Typescript
    • TailwindCSS
    • Redux
    • Jest

    If you have any suggestions for code improvements, please feel free to share!

    Thanks! 😊

    Frontend quiz app w/ (Next + Tailwind + Typescript) 👨‍💻

    2
    Johnny•470
    @johnnysedh3llloPosted 9 months ago

    just tried you app, everything works well and looks good. great Job!

    0
  • Lucas 👾•104,340
    @correlucasSubmitted about 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the Fylo Landing Page With Two Column Layout challenge.

    This was a quick challenge and I did not customize it. I'm in my journey to finish all HTML and CSS only challenges now I miss only 6. I'll customize only the last 3 one that are really amazing premium solutions!

    🍚Follow me in my journey! Gotta Catch ’Em All

    PS: I'm aware of the accessibility errors but this time I'll skip it and go to the next challenge. 🥱

    Happy to hear any feedback and advice!

    Fylo Landing Page With Two Column Layout

    9
    Johnny•470
    @johnnysedh3llloPosted about 2 years ago

    heyyy Lucas, good job finishing your solution. such a coincidence that i just submitted the same one 😅. good one bro

    1
  • Lucas 👾•104,340
    @correlucasSubmitted about 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the challenge Product Preview Card.

    🎨This is an old old old solution and the first one that I've applied some customization. I did some improvement in the code but there are many things to improve, but I was just lazy to change the html structure to use the proper tags like the picture for the image, because I was afraid to have to write again the grayscale effect on it. 🤭

    • 👨‍🔬 Custom Images + Grayscale/Saturation Hover Effect
    • 🧚‍♀️ Intro Zoom Out Animation (I need to study it more to make smooth transitions).
    • 🎨 Gradient

    Feel free to leave any feedback about my design chances and help me improve my solution or make the code clean!

    Product Preview Card (Vanilla CSS and Custom Hover State on Hero)

    10
    Johnny•470
    @johnnysedh3llloPosted about 2 years ago

    great job my friend, absolutely splendid 👏🏼

    1
  • Xavier•140
    @xavCSSubmitted over 2 years ago

    I won't lie this one was a bit more challenging because there was so much you have to make on your own (you can even see where I got lazy and just gave up). In total, I think I left out maybe 3 things but the design is still almost fully faithful. Had a weird issue with the background image things not scaling properly, if anyone sees it and has a fix would be appreciated - the bottom 0 creates a gap if the viewport gets short enough.

    Otherwise, this was generally a decent build.

    Chat app CSS illustration solution

    1
    Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    great job man. you're not alone, i also thought this one was a little bit complicated. almost gave up too 😂

    0
  • Plinsinga•310
    @codedforfreeSubmitted over 2 years ago

    So this was a fun one to try. To be honest. I think this wasn't especially hard to do. This is mainly because the phone (in this case) doesn't need a lot of responsive work. Probably if you needed (or created) a responsive version of the phone it would be different story.

    So for this, I used my tool of choice, Tailwind, and have to say it works well. It's so easy to use custom values and write them directly in your HTML.

    I'm wondering if I missed something that makes this an intermediate challenge because, as I said, didn't think it was really hard to do. Other challenges are more difficult IMO. Like the 'Interactive card details form' which is a junior challenge.

    So, I hope you like it and feedback is always welcome and much appreciated.

    Chat app with CSS & HTML

    1
    Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    bro, your solution is spot on. will definitely be learning from this, great job man.

    1
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution to the Four Card Feature Section.

    😎 I had a lots of fun doing the challenge and doing some custom design improvements.

    This is a solution that I've finished before but I decided to update it, when I saw a solution of guy Yefry Sanchez where he applied an hover effect on the card where the icon flips while hovered, so I tried to apply something similar to mine inspired on what he did. Here's is his profile @y25sanchez . Nice solution bro!

    👻 I added some features 💀

    • 🎨 Text Gradient on main heading.
    • 🥃 Glassmorphism on card hover.
    • 🎨 Custom background.

    Feel free to leave any feedback.

    4 Card Feature Section (Vanilla CSS + Custom Design + Glassmorphism)

    13
    Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    intuative as always. great job, Lucas. 👏🏼

    1
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the Stats Preview Card

    Last month I learned a lots stuff giving feedback and fixing my old solution. You guys don't have idea how much code I've cleaned just by deleting unnecessary divs, fixing responsivity issues cause by elements with fixed width and many other stuff like that, more I study more I realize how noob I am with CSS/HTML. But was really good to see how bad was the old solution and how I was able to fix it with the knowledge I get by giving feedback and looking the others code.

    I had to update this challenge because my friend @Adriano Escarabote told that my older solution wasn't not good enough and that was not responsive on his Nokia 3310 and also in his Apple Watch. So I paid a lots of attention in order to fix the responsiveness issues and now the solution seems a little little little better. Thank you Adriano!

    🎨 I've added some custom features:

    • 👨‍🎨 Custom Gradients
    • 🎨 Highlighted Text Animation
    • 👾 Gradient Overlay Effect

    😎 I saw multiple solutions with the exact some custom design and animations details I've add, this doesn't bother and I don't want the credits or attribution.

    😲 My advice is that instead of just copy and paste it, improve it, you can use these lines of code and improve your solution by customizing it, opening Figma and playing with your design, you'll learn a lots of stuff and possible even better results than mine, just paste and copying some lines of codes will not teach you nothing unless you try to customize it by yourself. So don't limit yourself by using a poor code and design, improve it.

    ❤️ For those who just copy the code/design and claimed that were an original solution, its fine, this shows that both of us have a good taste for design and like to customize out solutions.

    And please, feel free to leave any feedback and help me to improve my solution!

    Stats Preview Card (Vanilla CSS - Custom Design + Text Animation)

    9
    Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    amazing job, lucas!!!!, very initiative as always.

    1
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the QR Code Component.

    Making this challenge again was something really amazing for me, first because going back through my past challenges I was able to fix some issues and clean my code and then because was my first time using JS (yes I'm a newbie) 😂

    I added some features:

    • 🎨 Dark and Light mode button
    • 👾 Custom QR Code image
    • 🧚‍♂️ A little bit of color customization
    • 👨‍💻 Custom image hover state

    I'll be happy to hear any feedback and advice!

    QR Code component (Vanilla CS + JS + Dark-Light Mode) 🌞🌚

    18
    Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    this is amazing 😢. i admire your level of intuition.

    1
  • Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    hey, i was just scrolling and saw your solution. i think yours is nearly there. if you add 3rem of padding to your "card" class it will set it off. and i would advice you set the padding in "rems" instead of pixels. pixels are a bit static if you are looking toward responsiveness. hope this is helpful to you.

    .card { 
     padding: 3rem;
 }
    0
  • Oxe.dt•10
    @LabrazoneSubmitted over 2 years ago

    i used flexbox and position to do this challenge let me know your overview

    3-column flexbox

    1
    Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    hey man, it seems there's a problem with your site link.

    0
  • Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    hey, really nice one for submitting the challenge.

    i do have some comments though, i hope that's okay.

    • i notice you used flexbox. although, your card isn't centered. you can add this to make the page a full page and place the card at the center.
    • i also noticed you didn't use the specified font in the style-guide.md. you can do that by opening the file inside your text editor then follow the link to google fonts.
    body  {
width: 100%; 
min-height: 100vh; 
display: flex;
justify-content: center;
align-items: center;
}
    0