Skip to content
OverviewSolutions
6
Comments
7

Alex

@CaplexW120 points

Hey! My name's Alex, and I love programming! I'm here on FM because I started learning JS, TS, and React. At some point, I realized that I couldn't create proper layouts for the apps I develop, so I came here to learn CSS. I also got the idea to make my layouts as accessible as possible.

I’m currently learning...

Right now I'm digging into responsive design. I dream of mastering the non-media-query approach that Andy Bell presented on 'Hey!'. I was always trying to draw my layouts, but Andy showed a way of kinda programming them, declaring the important stuff and letting the browser handle the gory details.

Latest solutions

Latest comments

  • Alex•120
    @CaplexW

    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.
  • P
    Anamay•470
    @anamaydev
    What 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!

    Product preview card component

    2
    Alex•120
    @CaplexW

    Hello 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.

    1. 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.
    2. 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.
    3. 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.
    4. rem size is browser dependent. Using rem instead of px considered a best practice, because it helps to build responsive layouts. But we also should remember, that it means that rem is 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 helpful
  • Abhi•490
    @abhi-zero
    What 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."

    Product card |HTML & CSS|

    1
    Alex•120
    @CaplexW

    Hello Abhi! You did a great job! Here's some minor adjestments I wanted to advice, that might improve your work in the future:

    1. Try to avoid setting width and height in px. 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 like em and rem. You can dive deeper in the topic in this article.
    2. Try to avoid setting specific height to content elements at all costs. Setting any specific height (in px or rem) will mostly likely kill the responsivnes of you site. You can pickup some good practices of working with height in this Web Dev Simplified video.
    3. Don't leave body as a row. If you have to put display: flex on a body element, make it flex-direction: column. It won't matter in this project, but in more complexed sites it will save you a lot of enegry.
    4. Consider using svh or dvh for document height. It's not bad at all to use vh, but you might consider using svh instead 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.
    5. 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 using letter-spacing property.

    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 helpful
  • Alex•120
    @CaplexW

    Not bad! But I'd like to point out one thing that can improve your pages in the future: Try to avoid using px unit at padding, margin, font-size, ... etc. It will limit resonsivness because it's an absolute unit. Instead you can use responsive units like em or rem. You can dive deeper in this topic by reading this article.

  • Nerywst•30
    @nerywst
    What 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.

    Social Links page using Unordered Lists

    2
    Alex•120
    @CaplexW

    Good 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 like px and instead using responsive unit like rem or em.

    Marked as helpful
  • Alex•120
    @CaplexW

    It's a good job! But I'd like to highlight a few things that might become an issue in the future:

    1. 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 like rem or em. You can read more about this in this article: Why you shouldn't use pixels for font-size.
    2. Consider replacing or experimenting with vh and vw when you use them in height and width. 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 .container property height: 100%; (100% from parent height) and using responsive unit like rem to declare elements size, should solve the problem with changing screen size.
View more comments