@daniellambertiSubmitted almost 3 years ago
Alex
@CaplexWAll comments
- @CaplexWPosted about 1 month ago
Good job! Here’s some tips to make it easier:
- You can use utility classes. instead of creating repeated classes like ‘card1’ and ‘card2’ and repeat all the css in it, you can create a single class ‘card’ and whrite there all the code that suppose to be in every card. And then you can create utility class like ‘red-line’, ‘cyan-line’ etc… and write there code that declares the colors.
- Margin-auto to position elements. When you need to position single element, you can create a flex-parrent or also you can giv the element ‘display: block’ (if it hasn’t already) and ‘margin-inline: auto’ to center it or ‘margin-right/left’ to send the element to start/end of the block. It’s also better to use ‘margin-inline: auto’ or ‘margin: 0 auto’ to prevent unexpected inheritance.
- Simplify grid. Sometimes it’s needed to specify columms and rows, but when it possible it’s better to let algorithms deside. Here’s video of Kevin Powell with some smart grid manipulations.
0 - @anamaydevSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have completed the project in under two hours
What challenges did you encounter, and how did you overcome them?The only challenge I encountered was reading the Figma file, as it was a bit messy and the measurements were inconsistent.
What specific areas of your project would you like help with?I would appreciate feedback on my code to ensure it's clean and efficient. Any suggestions for improvement are welcome!
@CaplexWPosted about 2 months agoHello Anamay! Well, at first - it's a good job. Every thing is in it's place and according to design. It work exactly as intended, so there's not much to say except "it's a good job!". But I'll try to highlight some concepts, you might find usefull in the future.
- Semantic HTML markup. When we use
divs it gives us all the block-element behavior, and an ablity to make it look like we want. But when we use semantic tags for headers (like h1, h2, etc...), special programs like screen-reader can now understand that it's a header of the section. - Alt text for
<img/>tag. Continue the acessability topic, alt text is also explaining to screen readers what is displayed on the image to people who can't see it for themselves or search engines. For this reasone it's kinda usless to add "An image of..." or "[some object] picture" to it. You can read more about how to make better alt text in this article. - HTML is a content, and CSS is the look of the content. We can use CSS to control what is displayed on the screen. We can hide content and show it when certain conditions are met. But it's considered the best practice to decide what content should be displayed on the html side when it's possible. For example we can use tags
<picture>and<source>with a regular<img/>to set what image we will display, based on screen size or other properties. This article from Web.dev explains in detalis how we can make media, adaptive and what's the reasoning behind such aproach. - rem size is browser dependent. Using
reminstead ofpxconsidered a best practice, because it helps to build responsive layouts. But we also should remember, that it means thatremis not always a default 16px. It can be changed by user who's trying to adjust font-size for his needs, or even some browser extantions. So if I'm making a breakpoint in 37.5 rem assuming it's around 600px - it actually might work in a different places for different users. That's something to keep in mind.
Keep up the good work, keep getting better. Cheers!
Marked as helpful0 - Semantic HTML markup. When we use
- @abhi-zeroSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
This is the first time I am using Grid in CSS. Before this project, I always used Flexbox. It's easier for me to use Flexbox, but Grid is also good for dividing a section equally. It's not easy, but I think it's good to learn about Grid because it's so useful. From now on, I’m going to work with grids.
What challenges did you encounter, and how did you overcome them?Working with grids is the toughest challenge for me, but it's worth it.
Where am I stuck on a problem? -The main problem I encounter is that the content section overflows out of the right column and goes to the bottom.
How do I overcome this problem? -Honestly, I used ChatGPT, but this problem was solved after five prompts."
@CaplexWPosted about 2 months agoHello Abhi! You did a great job! Here's some minor adjestments I wanted to advice, that might improve your work in the future:
- Try to avoid setting
widthandheightinpx. The reason is - it is an absolute units and it will make maintaining responsivness of you site much harder. Instead you can use responive units likeemandrem. You can dive deeper in the topic in this article. - Try to avoid setting specific
heightto content elements at all costs. Setting any specificheight(inpxorrem) will mostly likely kill the responsivnes of you site. You can pickup some good practices of working withheightin this Web Dev Simplified video. - Don't leave body as a row. If you have to put
display: flexon abodyelement, make itflex-direction: column. It won't matter in this project, but in more complexed sites it will save you a lot of enegry. - Consider using
svhordvhfor document height. It's not bad at all to usevh, but you might consider usingsvhinstead cause it's taking in account UI element on the screen, slightly improving mobile experience. You can dive deeper by watching this video of Kevin Powell. - You can use
letter-spacing. It's small one. In this challenge, word 'PERFUME' is slightly modified with space between letters. You can achive the same result with css by usingletter-spacingproperty.
And don't be ashamed to use ChatGPT in you work, it's a greate tool of knowledge as long as you use it to ask questions and understand what you've missed instead of just copy-pasting suggested solution without understanding how it work. Good luck with a future work!
Marked as helpful0 - Try to avoid setting
- @BluordeSubmitted 2 months ago@CaplexWPosted 2 months ago
Not bad! But I'd like to point out one thing that can improve your pages in the future: Try to avoid using
pxunit at padding, margin, font-size, ... etc. It will limit resonsivness because it's an absolute unit. Instead you can use responsive units likeemorrem. You can dive deeper in this topic by reading this article.0 - @nerywstSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I was very glad that I was able to make a very similar design to the exercise.
@CaplexWPosted 2 months agoGood job! Though, you probably forget to make an 'active-state' of design to buttons. You can do it using pseudo-class
:hover, but I see you already know that trick. You can also improve resposivnes by avoiding using absolute unit likepxand instead using responsive unit likeremorem.Marked as helpful1 - @hieutran249Submitted 2 months ago@CaplexWPosted 2 months ago
It's a good job! But I'd like to highlight a few things that might become an issue in the future:
- Try to avoid using
px. It's an absolute unit, so it may cause problems in a responsive design. Instead, you can use responsive units likeremorem. You can read more about this in this article: Why you shouldn't use pixels for font-size. - Consider replacing or experimenting with
vhandvwwhen you use them inheightandwidth. It might sound good to display content depending on a screen's height and width; however, it might act unpredictably while the screen size changes. If you open your page in DevTools and play with the screen width, you'll see that the layout acts probably not like you expected it to. Giving a.containerpropertyheight: 100%;(100% from parent height) and using responsive unit likeremto declare elements size, should solve the problem with changing screen size.
0 - Try to avoid using
- @longentySubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I was able to use CSS to center the component
What challenges did you encounter, and how did you overcome them?Initially I couldn't vertically align the QR component, but after learning about flex box , I was able to do it.
