P
@monika-webdeveloperSubmitted 1 day ago
Yacoub AlDweik
@YacoubDweikAll comments
- P@LamoDevSubmitted 4 days agoWhat specific areas of your project would you like help with?
I've been busy learning React concepts lately, so I'm back to practicing my front-end knowledge. I kind of forgot how to handle details and what the best practices in CSS are, so any notes are more than welcome 🤗
@YacoubDweikPosted 4 days agoGood job!
No need to media queries, u can use something like width: min(95%,500px) with margin: 0 auto.
Also this is not right, using div div div, you should use semantic HTML like <main> <section> and some others, keep it up!
Marked as helpful0 - @alexiaramalhoSubmitted 10 days ago
- @CthoNikiSubmitted 16 days agoWhat are you most proud of, and what would you do differently next time?
I was proud to have designed this myself, while fairly quick I think it still gives it a bit more personality.
What challenges did you encounter, and how did you overcome them?I struggled trying to remember mobile-first with my media queries and with the absolute positioning, especially in tablet sizes.
What specific areas of your project would you like help with?If there is a better way to set absolute positioning, I would absolutely love to know. or an alternative that would work in this circumstance.
- @Yaciine19Submitted 16 days agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of implementing skeleton loading for the page because I found it unreasonable for the content to appear suddenly on a blank screen. To enhance the user experience, I decided to use skeleton loading, ensuring a smoother and more visually appealing transition while the data is being fetched.
What specific areas of your project would you like help with?I'd love for you to check out my code and share your feedback! Your insights would be greatly appreciated.
- @Tereza-SenoSubmitted 17 days agoWhat are you most proud of, and what would you do differently next time?
I’m proud of making good progress on the project, but next time, I would set the margins more efficiently, especially the left margin. I realized it could be done once and then adjust the height, rather than repeating it.
What challenges did you encounter, and how did you overcome them?One challenge I faced was with responsiveness. My solution is hardcoded, which works for now, but it's not ideal for more complex projects. It was the quickest fix for this stage.
What specific areas of your project would you like help with?I really need to work on responsiveness overall and finally start using more flexible elements (I know, I said this last time too).
@YacoubDweikPosted 17 days agoGood job!
Can I ask you for a favor? just 1- get rid of any media query you have & the scale as well 2- change that width for the container and make it max-width instead of "fixed" width, make it like this: max-width: 380px 3- change the margin for that <img> to a padding + give it a width of 100%.
After doing all these things let me know how you feel :)
0 - P@angie-createSubmitted 18 days agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of how I was able to create a responsive and visually appealing product preview card. The project allowed me to apply my knowledge of HTML, CSS, and flexbox, ensuring that the layout adjusts smoothly across different screen sizes. I’m also happy with how I managed to structure the project efficiently, keeping the HTML and CSS code clean and easy to follow.
What challenges did you encounter, and how did you overcome them?One challenge I faced was ensuring that the layout remained consistent and properly aligned across different screen sizes. Flexbox helped me a lot with this, but I had to iterate a few times to get the spacing and alignment just right. I also encountered some issues with the image responsiveness, especially with different aspect ratios on mobile screens.
To overcome these, I used object-fit for the image, which ensured that it would scale well in its container. I also tested the layout thoroughly on various devices to identify any specific areas that needed adjustments, using media queries for better responsiveness.
What specific areas of your project would you like help with?I would appreciate help with improving the accessibility of the project. While the card looks great and works on most devices, I'm not sure if it's fully accessible for users who rely on screen readers or keyboard navigation. I’d love feedback on how to improve things like ARIA roles and attributes. Additionally, any tips on optimizing my CSS for even cleaner code would be appreciated!
@YacoubDweikPosted 18 days agoGood job!
You should use <h1> then <h2> and not as here <h2> then <h1> no this is wrong!
Also the prices aren't <p> at all, you can use <strong> or <span> elements for the current price, it depends on how important you want to show this, personally would go with <strong>, for the previous price I'd use <del> element.
For that cart icon on the bottom you MUST use an empty alt like this, alt="", this tells SR to ignore this image as it's just a decorative, take it as a general rule, if the image is part of your content and you want blind people to have an idea about it then describe it using alt="bla bla bla", but if it's only for styling purposes then go with alt="".
Just FYI, you don't need ARIA when you don't have interactivity, just use the right HTML elements and that's enough, but if you have let's say some updates or dropdown menus or accordions or these stuff then you need ARIA at that time.
Marked as helpful0 - @pauliecodeSubmitted 19 days agoWhat are you most proud of, and what would you do differently next time?
It was really fun to go back to the basics and do something using vanilla HTML and CSS!
What challenges did you encounter, and how did you overcome them?Sometimes going back to the basics can be challenging as we barely ever actually do stuff like this at work, so it can be surprisingly challenging sometimes or I at least noticed that I wasn't 100% sure of how to do some stuff that I would've expected to know.
@YacoubDweikPosted 19 days agoGood job! would only suggest to use more semantic HTML elements like main & section instead of div, keep it up!
1 - @ysagohhSubmitted 24 days agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how my solution looks quite close to the design.
What challenges did you encounter, and how did you overcome them?I didn't know where to start, so my initial solution was all over the place. I kept making changes until I lost track of them and I couldn't center the div vertically.
I then got advice that I should start from the largest elements first and work from the outside in. I started over with a blank CSS sheet and finally got it working.
What specific areas of your project would you like help with?I positioned the
.attributionclass at the bottom of the page usingposition: absolute, which looks fine on devices with enough height. But if I resize the browser to make it shorter, it then overlaps with the card. I want to make it inline so that it stays under the profile card.I've tried different things but I haven't found the answer. I think I'm supposed to add a media query:
@media only screen and (max-height: 580px) { .attribution { } }@YacoubDweikPosted 24 days agoGood job just don't forget using more semantic HTML elements like main & section.
You don't need media queries here you can use width: min(100%,350px) to change the width of the card according to the screen.
About the attribution I would not recommend using your way by position, flex-box is much better + cleaner when you resize or zoom in or out + use min-height instead of height.
Marked as helpful0 - @Sarai2100Submitted 24 days ago@YacoubDweikPosted 24 days ago
Good job just don't forget using more semantic HTML elements like main & section
0 - @Ayako-YokoeSubmitted 25 days ago@YacoubDweikPosted 25 days ago
Hey! Good job!
Everything is clean and nice, just make sure that no tip will be calculated when I still didn't enter the number of people, or you can make it 1 by default as it's 1 rn by default but the input itself shows 0 (or maybe it's the place holder).
Also make sure to limit the tip, the max should be 100%, otherwise I can ruin the design if I entered 100000000000.
Keep it up and I really liked your portfolio.
Marked as helpful1 - P@oryanhachSubmitted 29 days agoWhat are you most proud of, and what would you do differently next time?
This project took me a lot more time than I innitially estimated... I had many challenges, as it is my first time working on a responsive design. Overall I am very proud of my self for not giving up and finishing this project.
What challenges did you encounter, and how did you overcome them?I had many challenges planning the layout as I am very new to using Flex/Grid. Also had many challenges with working on a responsive design with different units and such. I overcame it with just taking my time, and instead of trying to just fix everything temporary, I tried to learn about everything I do not know. As in, I never used Grid, so I was looking at Grid tutorials to learn the basics for this project.
@YacoubDweikPosted 29 days agoGood job!
Let me say first that almost everything is good you got the design nice and clean the only issue is with positioning things, this needs a bit more touches to be perfect, you talked about grid but you never used it, this is the best place to use grid instead of flex, take a look you have 2 rows 2 columns in desktop that become into 1 column 4 rows in mobiles, we're taking about 2D in desktop and 1D in mobiles.
Using flex led to writing much more code in each media queries and that led for you to forget to reset the width for some cards, that's why you would see some cards in full width and some others take 377px in tablets (screens around 600px).
You're doing a great job and you are putting effort but I think as I said before you might need to focus on one thing at a time, understand it completely then move on to the next lesson, do not do this -> "trying to learn about everything I do not know", Instead, you already know flexbox, code this design using flexbox and make sure you understand the lack of control that you have when using flexbox, then move on to grid and recreate the layout again using grid, remember that with flexbox you can control things horizontally OR vertically but with grid it's gonna be both at the same time.
As I told you before maybe the resource you are learning from is not good enough, check this video out and I'd highly recommend this channel in general:
https://www.youtube.com/watch?v=xPuYbmmPdEM
One last thing, do not give classes like this:
product__card product__card--supervisor|| this should be only like this:product__card supervisor|| using BEM does not mean to repeat yourself , keep it up!Marked as helpful1 - @AilaFelixxSubmitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
I had a lot of trouble with the height of the main element. I had to set a fixed value to make the page look nice because otherwise, the background would only go as far as before the first section started.
Besides that, there were small details I couldn't figure out, like increasing the distance between list bullets and the start of the sentences, changing the color of the bullets, and aligning the text inside lists so that the second line starts at the same point as the first. I think this last part might be confusing. For example:
I couldn't get it to look like this:
- XXXXXX
XXXXXX
Instead, it turned out like this:(ignore the "_", it's just a space)
- __XXXXXX
XXXXXX
Anyway, I struggled, but I managed to make it work.
I’d love any advice—it's very welcome! 😊
@YacoubDweikPosted 30 days agoHey! good job!
Solving Your HTML & CSS Issues
1. Fixed Heights: Never ever set a fixed height to a container like the way you did here, because right now the content is out of the body & main, because what works in your screen does not always work for others, instead if you don't set a fixed height then it's gonna be fit-content and that's what you want right? I don't see any benefit of setting a fixed height, BTW you can use min-height in some cases where you really need kind of fixed height, it is like say your height is gonna be a range from min-height to fit-content, so no overflow and no height below min-height.
2. Semantic HTML Elements
Semantic elements improve readability and accessibility. Here's when to use them:
<main>: The main content of the page (one per page).<section>: Groups related content within a page (e.g., a services section).<article>: Represents a standalone, self-contained piece of content (e.g., blog post, news).<aside>: Side content (ads, related links).<header>: Introductory content (titles, navigation).<footer>: Footer of a page or section.
Example:
<main> <section> <article> <h2>Blog Post Title</h2> <p>Content of the article...</p> </article> </section> <aside> <p>Related links or ads</p> </aside> </main>
3. Customizing
<li>Bullet PointsYou can change the bullet style using
list-style-typeor completely replace it with a custom icon.Example:
ul { list-style: none; /* Remove default bullets */ padding-left: 0; } ul li { position: relative; padding-left: 20px; /* Space for the custom bullet */ } ul li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; /* Bullet size */ height: 8px; background-color: brown; /* Brown color */ border-radius: 50%; /* Makes it a circle */ transform: translateY(-50%); /* Centers it vertically */ }
4. Fixed Space Between Two Words:
To position words on opposite sides, use
flexbox.flex-container { display: flex; justify-content: space-between; }<div class="flex-container"> <span>Left</span> <span>Right</span> </div>
5. General Advice for Responsive Web Apps
-
Use Relative Units (
%, vh, vw, em, rem)- Avoid fixed pixels for widths/heights.
- Example:
width: 80%;instead ofwidth: 800px;.
-
Use
max-widthInstead of Fixed Widths- Example:
max-width: 1200px; margin: auto;.
- Example:
-
Use Flexbox & Grid for Layouts
- Example:
.container { display: flex; flex-wrap: wrap; gap: 10px; } -
Make Images & Videos Responsive
- Use:
img { max-width: 100%; height: auto; } -
Test on Different Screen Sizes
- Use Chrome DevTools (
Ctrl + Shift + I→ "Toggle Device Toolbar").
- Use Chrome DevTools (
-
Use
remandemfor Font Sizes- Keeps text responsive.
-
Apply
@mediaQueries for Responsiveness@media (max-width: 768px) { .container { flex-direction: column; } }
Hope this helps! 🚀 Let me know if you need further clarifications.
Marked as helpful1 - XXXXXX
- P@aysenurtatliSubmitted about 1 month ago@YacoubDweikPosted about 1 month ago
Good job!
Glad to see you excelling in React & Tailwind! 😃
Just give that main div min-height and not height, try to zoom in to see what the problem with height only.
Also use more semantic HTML elements for better accessibility and keep it up!
Marked as helpful0 - @FernJBatistaSubmitted about 1 month ago@YacoubDweikPosted about 1 month ago
Good job!
Everything is good, just when I enter the bill then there's kind of default tip that applies even though I did not select anything, also the number of people can be negative values, keep it up!
Marked as helpful0 - P@oryanhachSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am most proud of myself for coming back to this project. It was very hard for me, and i stopped for a few weeks after feeling frustrated. Came back three weeks later to continue, started over and finished it!
@YacoubDweikPosted about 1 month agoGood job!
I don't want to make you upset, but I believe this is the best way for you to get better and improve your skills.
Look, your design looks exactly like the original design, like pixel perfect design, this is amazing, but this is only valid on screens larger than 770px, your design is not responsive and therefore it's not good on mobiles, and man it's easy to tell why is that, because you simply kill the flexibility of the elements by giving them fixed heights and widths, forget about width: bla bla or height: bla bla, use max-width and min-height instead, in your way you tell the design to be always 730px let's say so on mobiles (360px let's say) you will see a portion of your design only.
You have used some HTML elements in a wrong way, the ingrediants are not <p> or paragraphs they are only <span> or <strong> if you want to emphasize them, also it's not right to give them fixed width just to get the exact space between them, the idea is to give the whole container div or section a 100% width (which is the default of any block element) then you have a div that contains two spans, fat and 22g then you give that div a flex space between and here you go, keep it up!
** BTW you should not feel frustrated cuz u r in your beginning but I gotta say that maybe it's the source that u r learning from, if u don't feel comfortable till now then YouTube is there!
Marked as helpful1 - @Yaciine19Submitted about 1 month agoWhat specific areas of your project would you like help with?
If you have time, I would appreciate it if you could review the solution and code and give me some feedback.
@YacoubDweikPosted about 1 month agoGood job!
Just give the html over-flow hidden, because you have an overflow in your design right now due to the button of sharing the article.
I'd suggest that you position that small box in a way that it's gonna be inside the view and not outside it like now, keep it up!
** I am talking about screens around ~ 800px || Also for Tailwind, you used the after pseudo element, but I'd suggest you stick to something else, which is this, this is from the Tailwind docs:
' It's worth noting that you don't really need ::before and ::after pseudo-elements for most things in Tailwind projects — it's usually simpler to just use a real HTML element.
For example, here's the same design from above but using a <span> instead of the ::before pseudo-element, which is a little easier to read and is actually less code'
example:
# The normal way: <blockquote class="text-center text-2xl font-semibold text-gray-900 italic dark:text-white"> When you look <span class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500"> <span class="relative text-white dark:text-gray-950">annoyed</span> </span> all the time, people think that you're busy. </blockquote> # The readable way: <blockquote class="text-center text-2xl font-semibold text-gray-900 italic"> When you look <span class="relative"> <span class="absolute -inset-1 block -skew-y-3 bg-pink-500" aria-hidden="true"></span> <span class="relative text-white">annoyed</span> </span> all the time, people think that you're busy. </blockquote>Keep it up :)
Marked as helpful1 - @lutfiismail52Submitted about 1 month agoWhat specific areas of your project would you like help with?
Is it better to use the CSS property
display: grid;to achieve a better design or can this design also use the CSS propertydisplay: flexbox. Because I useflexboxinstead ofgrid, would it be easier to just use the CSS propertydisplay: grid;?For those of you who took the time to give me feedback, I say thank you and appreciate it. 😊
@YacoubDweikPosted about 1 month agoFlexbox is easier for 2D things ( row or column ) while if you want to take control over 3D ( row and column ) at the same time then go with grid.
Whenever you need some help use AI like Chatgpt, this will help you a lot!
1
