@YasminYasmin421Submitted about 1 month ago
Vincin Christmas
@VincinChristmasAll comments
- @VincinChristmasPosted about 1 month ago
good effort.
it is always a good idea to do the css in a main.css file
to link it to the css yoou can use this line of code:
<link rel="stylesheet" href="main.css">just make sure the index.html and main.css are in the same folder. Otherwise it will not work. Don't give up. Keep trying !
0 - @clickglueSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Again took more time then I estimated. Many complex details (background color of button changing when pressed but only in desktop version...complicated). Finally did SVG design in HTML code. Fun.
What challenges did you encounter, and how did you overcome them?Keeping focussed and going, also when small details require a lot of time.
What specific areas of your project would you like help with?I have the feeling I make CSS way to complicated. How can I do KISS ?
@VincinChristmasPosted about 1 month agoAh....good effort but not quiet write. give me a chance to look at a bit more in detail later. The desktop version doesn't seem to be here and the JavaScript looks tricky. I will dive in and give you feed back soon.
0 - @Fatma-TawfeekSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
- Using Grid CSS and make responsive design with it.
- I won't set grid-row-template property I will let the grid items take height from its content
- The challenge I faced was creating a responsive grid layout that adapts well to different screen sizes. In particular, one grid item needed to span two rows on the desktop, while all items had to stack in a single column on mobile, adjusting their heights to fit the content. Additionally, the grid items had varying amounts of content, making it tricky to keep the layout balanced and aesthetically pleasing on all devices.
-I'd appreciate help refining the grid's responsiveness, especially when it comes to ensuring the layout remains visually appealing on a wider range of screen sizes, like large desktops or tablets. I'm also looking for advice on optimising the grid for accessibility, particularly regarding the reading order of the items when they stack in a single column on smaller screens.
-Additionally, I’d like to explore how to implement a fallback for older browsers that don’t fully support CSS Grid, ensuring a seamless user experience across different browsers.
@VincinChristmasPosted 2 months agoYours look perfect, unlike mine. I will take a look at your code and go back and review grid on my own
1 - @LaurentiuMihaiNicutaSubmitted 3 months ago@VincinChristmasPosted 3 months ago
great job
perhaps using a body tag in css is not needed though
0 - @Halima584Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
At first, I had a hard time trying to get a url, I wasn't getting the github navigation but eventually I persevered and got it. I am so proud of myself for not giving up because I was discouraged and nobody was giving me the answers I want.
What challenges did you encounter, and how did you overcome them?Getting a url on github. I was asking everyone but nobody seemed to get my point. AI came through for me and I am so happy I could go through with this
@VincinChristmasPosted 3 months agoGood job!
It is recommended to use rem instead of px.
There is a small trick that a lot of people use to make sure elements and everything stay in place even when the screen is being zoomed in or out. Maybe something like this:
display: flex; justify-content: center; align-items: center; padding: 0 30px; border-radius: 12px;
also you should always use a CSS reset. Most people on here use this one:
www.joshwcomeau.com/css/custom-css-reset/
0 - @Halima584Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
At first, I had a hard time trying to get a url, I wasn't getting the github navigation but eventually I persevered and got it. I am so proud of myself for not giving up because I was discouraged and nobody was giving me the answers I want.
What challenges did you encounter, and how did you overcome them?Getting a url on github. I was asking everyone but nobody seemed to get my point. AI came through for me and I am so happy I could go through with this
@VincinChristmasPosted 3 months agoGood job!
It is recommended to use rem instead of px.
There is a small trick that a lot of people use to make sure elements and everything stay in place even when the screen is being zoomed in or out. Maybe something like this:
display: flex; justify-content: center; align-items: center; padding: 0 30px; border-radius: 12px;
also you should always use a CSS reset. Most people on here use this one:
https://www.joshwcomeau.com/css/custom-css-reset/
0 - @thungan1909Submitted 3 months ago@VincinChristmasPosted 3 months ago
Looks good. I couldn't find anything to critic about it
0 - @JerryIrawan14Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
n/a.
What challenges did you encounter, and how did you overcome them?n/a.
What specific areas of your project would you like help with?n/a.
@VincinChristmasPosted 3 months agojust giving small feedback and sharing some opinions. In my opinion, there is a little bit more code than need especially when using flexbox. I am not even sure if flexbox was needed at all for this small project being that it is only one big container. Perhaps you could have just put display flex on on big container and then aligned individual elements? Also, there are no hover states on your site. The assignment asked us to do some hover states if you want to do that
0 - @JoshuaOluboriSubmitted 3 months ago@VincinChristmasPosted 3 months ago
the mobile looks fine, but on desktop, it doesn't meet the design requirements or look like the desktop design at all. Also, why did you use JavaScript in this project? If CSS can do it, it is best not to use JavaScript to do things that are easily handled by CSS. The assignment did not require the use of JavaScript as well, perhaps you may have done it for your own experimentation?
Sorry, I can't provide an critics about your use of grid, because I haven't learned it yet. I used flexbox for mine. also, I notice you are using flex and grid. Does it make more since to just use one?
0 - @TCO932Submitted 3 months ago@VincinChristmasPosted 3 months ago
Looks good. But it almost looks like it doesn't work? Is it better to apply the media query a little earlier? like at min-width 700px?
other than that, it works fine. This is just my opinion
1 - @tushar-RuhelaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I have most proud on maded a responsive web page and add all thing that should be given and next i will focusing making webpage is more goodlooking
What challenges did you encounter, and how did you overcome them?The challenges should i encounter like added google font to css add or give color to the bullets of the lists.
What specific areas of your project would you like help with?the most speacific area of code that i can share with every first one how to google fonts and second adding a color to the bullets of the lists
@VincinChristmasPosted 3 months agolooks good.
Should recipe have a bigger width on mobile? When I see it on mobile, there is a gap on the left side
0 - @Ineke84Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of how I incorporated quite some concepts that are relatively new to me: css properties, clamp().
Next time I should read the challenge a bit better (at first I missed the challenge to not use media query for font-sizes untill I wanted to submit the challenge). Also I want to look more indepth at the designs, this time I kept finding extra things to add (like different font-sizes for devices and multiple changes on hover)
What challenges did you encounter, and how did you overcome them?Most challenging is the alignment of the blog preview and the attribution at the bottom. At the moment I fixed it with flex-box, but I'm not sure if that's the best option.
Also using clamp() is still challenging. I read/watched quite some things about it and copied some things from those posts and it's working. But I need some more practice.
What specific areas of your project would you like help with?I would love to hear if there's another/better solution for the positioning of de blogpreview and the attribution at the bottom. I want the card vertically centered in the middle and the attribution at the bottom of the screen as longs as this would fit. If the blogpreview gets to big with a narrower screen only then the attribution should move further down so you would need to scroll down to see it just below the card. At the moment I fixed it with flexbox and height with clamp(). But I'm not really sure about it.
Any other feedback is also very welcome.
@VincinChristmasPosted 3 months agoThis seems perfect. I have never really heard of clamp until now
0
