I don't like Tailwind or Bootstrap or any other useless CSS framework
What challenges did you encounter, and how did you overcome them?I don't like Tailwind or Bootstrap or any other useless CSS framework x2
What specific areas of your project would you like help with?I don't like Tailwind or Bootstrap or any other useless CSS framework x3
@YacoubDweik, my friend I feel you, I it them too...
This is my first time using JS in my code. I used to study it, but I never used it in real projects.
What challenges did you encounter, and how did you overcome them?I faced many problems in my code first the responsive design, second JS actions on the buttons, it took days to finish it. I fed up many times, but Al-hammdullah I searched more and more until I managed to set the solution.
What specific areas of your project would you like help with?Java event listener and setting the best HTML structure to get it easily using JavaScript. more than this How to arrange my steps, I mean I asked myself many questions while I doing it like: Shall I start with the mobile screen or desktop one, How can I do the active button, where to put it, How I will change it in the other screen. It was a hard one for me.
Amazing work! 🤩 You’re doing a fantastic job, and I can see how much effort you’ve put into this. Keep it up! 🎉 Here are a few tips that might help you refine your design and code:
Mobile-first approach – Every beginner struggles with the decision: should I design for desktop first or mobile? I’ve been there too! 😅 The general recommendation is to start with mobile-first design. Why? Because it’s easier to scale up for larger screens and you’ll end up writing fewer media queries overall.
**Place your `` tag. This ensures the HTML content loads first, preventing delays in rendering. This approach also improves user experience and reduces page load issues.
Group elements appropriately – Instead of using <article> for grouping, consider using semantic tags like <section> or <div> (if it doesn’t require semantic meaning). Articles are generally intended for standalone content like blog posts or news items. Using appropriate tags keeps your code clean and meaningful.
Avoid using pixels everywhere – Instead of px, use responsive units like rem, em, or percentages. These units adapt better to user settings and different screen sizes, ensuring a more flexible and accessible layout. Pixels are fixed and can make your design less user-friendly on various devices.
Remember 320px screens – While most devices have larger screens nowadays, 320px-wide displays still exist. To ensure your design works well on smaller screens, you can set the width of cards to 90% or 90vw. This prevents cards from sticking to the edges of the screen and gives a cleaner, more balanced layout.
Keep up the awesome work! 💪 The more you experiment, the faster you’ll grow as a developer. 🌟
Finally managed to get it to fit right.
What challenges did you encounter, and how did you overcome them?Was hard to make it responsive, while making sure all the content is fits in the containers. Also as the screen sizes get bigger - it starts looking slightly more awkward.
What specific areas of your project would you like help with?I'd like to know any ideas on how to make the overall design look better on larger, more awkward screen sizes.
Also, how to make text fit the container depending on the size of the container.
Amazing work! 👏 I love how much effort you’re putting into this design – it really shows. Keep it up! 🎉 Here are a few suggestions to help refine things even further:
Use relative units instead of pixels – Opt for units like rem or em instead of px. These units adapt better to different screen sizes and user preferences, making your design more flexible and accessible. For example, if someone has increased their browser’s default font size, rem and em will adjust accordingly, while px remains fixed.
Tackle font scaling on large screens – When using em, you might notice fonts becoming too large on bigger screens because em scales based on its parent. To avoid this, try using a combination of clamp for font sizes. For example:
font-size: clamp(1rem, 2vw, 1.5rem);
This allows you to set a minimum and maximum font size, ensuring it stays proportional without getting out of control.
Plan for medium screen sizes – For screens that are not too small or too large (like tablets), consider a transitional layout. For example, instead of single-column items, you could use a grid with two columns to optimize space usage and make the design look more structured:
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
This keeps your layout balanced and user-friendly across different devices.
Download and use custom fonts – It’s better to download fonts and add them using @font-face in your CSS. This gives you control over font loading speed, avoids third-party service dependencies, and ensures your design stays consistent even if the external service has issues.
You're doing fantastic work! Keep experimenting, and you’ll keep improving! 🌟
I am proud at my progress and would do nothing differently. I enjoyed the whole activity.
What challenges did you encounter, and how did you overcome them?I struggled with placing the contents of the card in center while maintaining the left side line-up but I figured it out. I also struggled with adjusting the blog image to the right width and height when it is under 1140px. It seems to do it's own thing and I don't know how to fix it.
What specific areas of your project would you like help with?I need help on how to adjust the svg blog image to match the specified width and height by figma(279 x 200), for a screen that is under 1140px.
Awesome work! 👏 I really love how clean and well-structured your design is – great job so far! Here are a few suggestions to make it even better:
Consider small screen sizes – Remember that some users may still have devices with a width of 320px. It’s a good idea to plan your design for these smaller screens as well. For example, you can set the width of your card to 90% or 90vw to prevent it from sticking to the edges of the viewport. This ensures a better user experience on all devices. 📱
Download and use custom fonts – It’s better to download fonts and add them using @font-face in your CSS. This gives you control over font loading speed, avoids third-party service dependencies, and ensures your design stays consistent even if the external service has issues. 💡
Add classes to all elements – Giving each element a class improves code readability and makes your styles reusable and scalable. It also keeps your HTML organized and avoids conflicts when styling multiple elements. Using a methodology like BEM (Block-Element-Modifier) can help create a clear and maintainable structure for your CSS. For example:
<div class="card"> <h2 class="card__title">Title</h2> <p class="card__text">Some text here</p> </div>
Use relative units instead of pixels – Try using rem or em instead of px. These units scale better for responsiveness and accessibility, especially when users zoom or have different base font sizes set in their browsers. This makes your design more user-friendly and adaptive! 🌟
Keep up the amazing work! You’re doing great! 🎉
Good training
What challenges did you encounter, and how did you overcome them?Good training
What specific areas of your project would you like help with?Good training
Great job! I'm absolutely impressed by how responsive the design is! 👏 It looks really smooth across different screen sizes. Here are a few small suggestions to make it even better:
Use relative units instead of pixels – Try using rem or em instead of px for better scalability and accessibility. This makes the design more flexible and adaptable for different screen sizes and user preferences (like zooming). 📏
Use clamp for adaptive font sizes – You can use clamp() to make your font sizes adjust fluidly depending on the screen width, ensuring the text remains readable on both small and large screens. For example:
font-size: clamp(1rem, 2vw, 1.5rem);
This approach is great for responsiveness! 📐
Consider using downloaded fonts – If you're using custom fonts, it's often better to download them (using @font-face), instead of relying on web font services. This way, you control the loading speed and avoid dependency on third-party services. 📥
Keep up the great work! 🎉
I am glad i was able to start the project and complete it.
What challenges did you encounter, and how did you overcome them?i encountered some challenges with wrapping the text like it looked like in the design
What specific areas of your project would you like help with?Gladly i was able to complete all so i am good
Hey, great work! 🌟 You're doing awesome, and I love seeing your progress. Just a couple of small tips:
Instead of pixels, try using relative units like em, rem, or percentages—they're more flexible and adapt better to different screen sizes. For example, rem scales beautifully with the user's default font size, keeping things consistent.
Since 320px screens are still a thing 📱, consider using 90vw or 90% for your cards on smaller screens. This way, they won’t stick to the edges of the window and will look more polished.
Keep it up! You're nailing this! 🚀
I believe I have a largely accurate page that gets dimensions right and is minimally responsive.
What challenges did you encounter, and how did you overcome them?Trying to figure out how to lay out elements on the page, things like centering a div vertically and horizontally inside of a container.. also importing and working with google fonts. I am still getting used to figma files.
What specific areas of your project would you like help with?I made classes for every bit of text so I have full control over positioning, font weight, etc... but I am wondering if a better approach exists.
You're doing fantastic—seriously, great work! 👏✨ I love seeing how much effort you're putting into this. Here are a few suggestions to refine your approach even more:
1️⃣ Instead of pixels, try using relative units like em, rem, or %. They make your design more flexible and responsive to different screen sizes, which is essential in modern web development. 🌍
2️⃣ When naming your classes, following the BEM (Block-Element-Modifier) methodology can be super helpful. For instance:
<div class="card"> <div class="card__header">Header</div> <div class="card__body">Content</div> <div class="card__button card__button--active">Button</div> </div>
This keeps your code clean, easy to understand, and scalable. Future-you will appreciate it! 🙌
3️⃣ I noticed you have some inline styles in your HTML. These are great for quick tests, but if you already have a separate CSS file, move them there or delete them for cleaner, more organized code. 🧹
You're on the right track—keep it up! Your projects are going to look incredible! 🎉
Clean Layout and Design: I successfully implemented a visually appealing layout that closely matches the design provided by Frontend Mentor.
Improved CSS Skills: I gained confidence in using CSS properties like border-radius, padding, and layout techniques.
Project Completion: I’m proud to have completed the challenge and learned new techniques along the way.
Add Media Queries: I would enhance responsiveness by adding media queries to better adapt the design to different screen sizes.
What challenges did you encounter, and how did you overcome them?I initially wanted to use only the box model to structure the layout, avoiding modern layout techniques like Flexbox. However, aligning and centering the elements within the container using just the box model proved difficult. I found it challenging to achieve the desired vertical and horizontal alignment across different screen sizes.
How I Overcame It:After experimenting with the box model, I decided to use Flexbox for centering the content within the container. Flexbox made it much easier to align elements both vertically and horizontally, while maintaining a clean and responsive layout. This switch helped me save time and produce a more consistent result, even though it meant stepping away from my original intent of using only the box model.
What specific areas of your project would you like help with?I would really appreciate help with understanding Flexbox more deeply. While I used it for centering elements in my layout, I’m still not fully confident in how to apply its full range of capabilities. Specifically, I would love more clarity on:
Flexbox Container Properties: How to effectively use properties like justify-content, align-items, and flex-direction to create flexible and responsive layouts.
Flexbox Item Alignment: Understanding the different ways to align individual flex items within the container, particularly in more complex layouts.
Flexbox vs Grid: When to use Flexbox vs CSS Grid, and how to determine which one is best suited for different layout scenarios.
Any guidance or resources that explain these concepts in detail would be greatly appreciated!
You're doing awesome! Your effort and attention to detail really shine through—keep it up! 🌟
Here are a couple of tips to take your work to the next level:
1️⃣ Instead of using pixels, consider using em, rem, or %. Why? They adapt better to different screen sizes, making your design more responsive and user-friendly across devices. 🚀
2️⃣ Always assign classes to your elements! This makes your code easier to manage and avoids confusion. Following the BEM (Block-Element-Modifier) methodology can make it even better. For example:
<div class="button button__icon button__icon--active"></div>
With BEM, your code stays neat, scalable, and easy to update. Trust me, future-you will thank you! 💡
Keep going—you’re making amazing progress! 🙌🎉
As a beginner, I created several divs and CSS selectors on my first attempt. I realized that this approach was inefficient, so I decided to read and watch tutorials on HTML and CSS. On my second attempt, I managed to reduce the number of lines by grouping elements more efficiently.
What challenges did you encounter, and how did you overcome them?I am not yet familiar with CSS variables, so I ended up going back and forth with the style guide to ensure accuracy and achieve a pixel-perfect design. If I had used CSS variables, it would probably have sped up the process. I’ll make sure to implement CSS variables in my future projects.
What specific areas of your project would you like help with?So far, I have not encountered any major issues in this project. However, with my limited knowledge, this path feels a bit unclear, and I’m not sure what questions to ask yet. I’ll continue to explore and learn so that I can seek feedback and guidance on specific areas in future projects.
Your work is looking fantastic—seriously, keep it up! 🌟 Every step forward shows your dedication.
Here are a few pointers to make it even better:
1️⃣ Pixels? Try switching to em, rem, or % instead. They’re way more flexible and adapt beautifully to different screen sizes. This helps your designs stay consistent across devices. 📱✨
2️⃣ On smaller screens, set your card width to 90vw or 90%. This keeps it clean and prevents it from sticking awkwardly to the edges. It’s a game-changer for responsive layouts! 🖼️
3️⃣ Always give your elements classes! It makes your code more manageable and readable. Plus, following the BEM (Block-Element-Modifier) method keeps everything structured. Example:
<div class="card card__image card__image--highlighted"></div>
BEM keeps your styles clear and scalable, especially as your project grows. 🚀
Keep up the amazing work—you’re absolutely smashing it! 💪🎉
I am proud of having finished it with quality in less time than the previous ones, even without having the Figma file.
If I were starting now, I would probably use CSS Grid combined with Flexbox because it would make positioning the elements easier and faster.
What challenges did you encounter, and how did you overcome them?It was a layout that was essentially in lines. I challenged myself to use only Flexbox to solve it. I had to watch some classes and consult references on how Flexbox works. I asked questions in the GPT Chat mainly about how relative measurements work. Several sources of reference.
What specific areas of your project would you like help with?This particular project is pretty straightforward. I think I just need to practice more by doing other projects.
Your project is coming along great—seriously, amazing work! 🎉 It’s awesome to see your progress and dedication.
Here are a few tips to keep leveling up:
1️⃣ Quality > Speed, every time. It’s better to take your time and nail it than rush and miss details. 🚀
2️⃣ Stick to the design! Following the layout for sizes, placement, and functionality not only builds your skills but also pushes you to think like a pro designer. 🎨
3️⃣ Pro tip: Even without Figma files, the screenshots of the original design are gold. Use them wisely to match element sizes and spacing. 📐
4️⃣ Ditch the pixels! Opt for responsive units like em, rem, or %. They’re more flexible and help your design shine on any screen size. ✨
5️⃣ For smaller screens, try setting the card width to 90vw or 90%. It’ll keep things clean and prevent that awkward sticking-to-the-edges look.
Keep going—you’re crushing it! 💪🌟
For my first attempt, i think i did a good enough job of replicating the website. Though, my usage of excess divs. and questionable ways of positioning elements might need work in the future.
What challenges did you encounter, and how did you overcome them?My biggest challenge was positioning the elements, using flexbox and positioning , i managed to make it generally the same as the preview.
What specific areas of your project would you like help with?I'm dissatisfied with the way i positioned the elements, though they get the job done, they feel very inelegant and forced.
Your work is looking awesome! 🎉 It's clear you’ve put a lot of effort into this, and it’s paying off.
Quick suggestion: it seems like the preview isn’t showing the card properly because the repository link you shared doesn’t point to the latest version of your project. 🖼️ Try sharing this link instead and upload a fresh screenshot of your work. This will ensure your amazing design gets the spotlight it deserves. 🌟 Keep rocking it!
I am proud of how fast I was able to complete the challenge.
What specific areas of your project would you like help with?Any feedback is gladly welcomed!
Absolutely love what you've done here! 🚀 Your creativity shines through, and the effort you’ve put in is crystal clear.
One tip though — consider adding a new screenshot of your work. 💡 Remember, screenshots are like the face of your project; they give the first impression. Right now, the system preview isn’t showcasing your card as intended, so a fresh screenshot would really help it stand out and do justice to your awesome work. 😊 Keep it up!
