Skip to content
OverviewSolutions
18
Comments
15
Andi Gashi
@Andigashi1

All comments

  • Ronan•310
    @CannyRoSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to have finished this challenge (and also to have deployed it... I fought for it! and I did it). If I had to do things differently, I wouldn't change a thing... because the main challenge for me was to do this project with Angular 18 to familiarize myself with it, relearn the basics, see the Signals and their power.

    What challenges did you encounter, and how did you overcome them?

    Each step was a difficulty in itself... or rather a learning experience. Thanks to the documentation... especially the documentation and a little help from ChatGPT to explain what I didn't understand, and don't worry, ChatGPT didn't do this challenge for me because he doesn't know Angular 18, or 17 for that matter... a version from which the framework has changed enormously, the documentation is on a different site, that's saying something...

    What specific areas of your project would you like help with?

    Nothing in particular, but always open to comments and criticism that will help me improve.

    Responsive Mobile-first product list with cart (Angular 18)

    2
    Andi Gashi•410
    @Andigashi1Posted about 1 month ago

    Hi there and great job finishing this project!! I wanted to leave a comment to let you know that the layout in mobile view is not properly centered.

    1
  • Joshdefleur•110
    @JoshdefleurSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Im proud that i got it to look the same using more semantic html like sections and also cutting down on the amount of divs I use. Also having shared classes and unique classes for most elements

    What challenges did you encounter, and how did you overcome them?

    The stepped pattern of some of the divs using relative positioning

    What specific areas of your project would you like help with?

    when should i put media query breakpoints for mobile and desktop

    Responisve social proof section

    2
    Andi Gashi•410
    @Andigashi1Posted 2 months ago

    Hi there, the site looks amazing, and I have 2 suggestions to make it better, in my opinion.

    1. Increase the font size a little bit.
    2. Add a max-width to the div that contains all the elements at the mobile media query breakpoint because they get very stretched. Wish you luck in the next projects.
    Marked as helpful
    1
  • Gerardo Garcia•170
    @GGSWEngineerSubmitted 12 months ago

    Hi everyone!

    I thoroughly enjoyed working on this project, particularly because it provided more opportunities to create backgrounds with solid colors and strategically placed images.

    I have a few questions:

    Is the code below considered good practice for setting the background? I want to ensure that I am following best practices as projects become more complex.

    .container { width: 375px; height: 1000px; margin: auto; position: relative; background-color: var(--bg-color); /* Set your desired background color */ color: #fff; padding: 5.5rem 1.5rem 4.25rem; }

    .container::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("images/bg-intro-mobile.png") center center/cover; /* Set the path to your faint image */ opacity: 0.75; }

    Regarding responsiveness, are my media queries well-implemented, and is the project truly responsive? Can I do more to enhance its responsiveness?

    I would greatly appreciate your thoughts on these matters.

    Thank you for your time,

    Gerardo Garcia

    Intro-Component-With-SignUp-Form

    2
    Andi Gashi•410
    @Andigashi1Posted 12 months ago

    Hey there regarding the solution, the form works as intented and its well designed however there is a problem. You put the bg image in the .container instead of body and that leads to the image not applying to the entire body but only to the containers width instead. Put both the bg image and bg color at the body and you'll have a perfect solution. Great job otherwise!

    Marked as helpful
    0
  • Andi Gashi•410
    @Andigashi1Posted 12 months ago

    Hey if you want to change the placeholder color you should do this

    .element::placeholder{
     The styles go here
}
    1
  • Kevork Lepedjian•370
    @kevorklepedjian1Submitted 12 months ago

    🚀 Exciting News: Completed Another Frontend Mentor Project! 🚀

    Hey Frontend Mentor community! 👋 I'm thrilled to share my latest achievement - successfully wrapping up the Bookmark Landing page challenge. 🎉✨

    🛠 Tech Stack:

    ReactJS: For building a dynamic and interactive user interface. Vite: The fast and efficient build tool that keeps development smooth. Tailwind CSS: Crafting a beautiful, responsive design effortlessly. 🔄 Highlights:

    Higher Order Components (HOCs): Delving deep into HOCs for enhanced code reusability and maintainability. Tailwind Mastery: Gained a more in-depth understanding of Tailwind CSS, unlocking its full potential for streamlined styling. Reusable Components: Created a library of reusable components, ensuring a consistent and efficient development process.

    🎥 Behind the Scenes: Catch a detailed walkthrough in the YouTube demo https://www.youtube.com/watch?v=KvvKdg40awc. I'll share insights into my approach, design decisions, and the magic of using HOCs and Tailwind CSS for a more polished project. Subscribe to my channel to stay updated!

    💡 Lessons Learned: This project provided an opportunity to deepen my knowledge of HOCs and Tailwind CSS, unlocking their true potential in creating modular, maintainable, and beautifully styled components.

    🙏 Thank You: A big shoutout to the Frontend Mentor community for the incredible support and the continuous opportunity to grow and improve. Let's keep pushing the boundaries of web development together!

    Stay tuned for the YouTube walkthrough, and let's keep coding! 💻🚀

    #FrontendMentor #ReactJS #ViteJS #TailwindCSS #WebDevelopment #HOC #ReusableComponents #CodingJourney #OpenSource #GitHub #CodeNewbie #DeveloperLife #TechCommunity #WebDevMagic

    Bookmark Landing page- React+Vite | Tailwindcss- with the use of HOCs

    1
    Andi Gashi•410
    @Andigashi1Posted 12 months ago

    Hey, i really like your project. I only noticed 2 small errors while i visited the site. There is a little arrow on top ">", and when you open the menu from the mobile view there is 2 logos, one in the background and on with the menu and it doesnt look good as the look stacked on top of eachother. However i loved everything else. Happy coding!

    Marked as helpful
    1
  • Andi Gashi•410
    @Andigashi1Posted 12 months ago

    Hey, instead of using the margin to position your div in the middle consider using flex. The better way to use border-radius is to use it on the .all div instead of each one of them. Also in mobile view the texts overflows out of the divs. Please check my solution if you need any help

    Marked as helpful
    1
  • Andi Gashi•410
    @Andigashi1Posted 12 months ago

    Hey the site looks great, however its missing 2 things. The background image and the button shadow. I also suggest that you space out the elements in the card a bit more with margin or padding for a cleaner look. Hope this helps and see you around!

    Marked as helpful
    0
  • Diksha Bhat•10
    @Diksha192001Submitted 12 months ago

    • I am not sure if i did the prefered/correct way for keeping a square inside a rectangle. Can anyone please check?

    • And also in general tell me if there are any major beginner mistakes that i have done, which could have been avoided or done in a better way.

    Desktop QR Code Solution using HTML and CSS

    2
    Andi Gashi•410
    @Andigashi1Posted 12 months ago

    Hey i'll do my best to help with the experience i have. Firstly i suggest that you separate the css from the html by writing it in a separate file. Second, instead of creating the .square div, it would be easier to put the img directly in the html not in the css and giv it the margin there. And lastly in order to use the correct colors, the zip files provides you with a styles-guide.md which contains all the colors, font sizes and families.

    Marked as helpful
    0
  • Andi Gashi•410
    @Andigashi1Posted 12 months ago

    Hi there. There is a file on the zip you download when you start a project which tells you the color codes, font sizes, font families etc. You can find the bg color there and change it. Also consider putting a fixed or min-width on the div because on mobile view because it collapses. Happy coding!!

    0
  • Gabriel Garcia•60
    @garbiruSubmitted over 1 year ago

    What I find difficult:

    1. Centering things the way I want and the most effective/correct way is still hard, I'm still learning how to use flex correctly, so I just end up using flex almost everywhere.
    2. I didn't end up making things responsive, besides a scuffed flex-wrap for the numbers, I ended up having a problem with the sizing of the overall "form", so I used a fixed width. Even though know I could've used max/min width to make it easier.

    I will eventually redo this whenever I get more experience in React and CSS.

    Not so Responsive Rating Form

    1
    Andi Gashi•410
    @Andigashi1Posted over 1 year ago

    The best way to center elements is to give flex or grid to the body. I usually use flex:

    body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh
}
    1
  • Andi Gashi•410
    @Andigashi1Posted over 1 year ago

    Hey, i suggest you to use seperate files to write the HTML & CSS so it looks less complicated. And in order to center the item properly you can use display: flex in the body: body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 100vh;

    1
  • Andi Gashi•410
    @Andigashi1Posted over 1 year ago

    Hey, the solution is great except that you forgot to add the image hover effect. It was a bit hard for me too but if you need help check out the solution in my page. Happy coding

    Marked as helpful
    1