Skip to content
OverviewSolutions
10
Comments
7
P
Zakhar Polikarpov
@ZPolikarpov

All comments

  • Kamran Kiani•1,110
    @kaamiikSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I encountered many problems in both CSS and JS, which I was able to solve a lot of them by searching, and I have to ask about some others. Overall, Poly was beneficial and helped me a lot.

    What challenges did you encounter, and how did you overcome them?

    Well,

    • one of the challenges was that I had never created a tab list before. I used a very good resource here, the link of which I have provided, and it helped me a lot.
    • Another challenge was that there were some cards on this page that had to act like a link. That is, when the mouse hover on it or when it was focused, it had to be clickable like a link. I also read this link about this, which helped me a lot.
    • To observe the points related to accessibility, I also used this link.
    What specific areas of your project would you like help with?

    Please take a look at the different parts of my code and if you see any issues, give me feedback so I can improve. Thank you.

    Time Tracking Dashboard

    1
    Zakhar Polikarpov•260
    @ZPolikarpovPosted 4 months ago

    Hello there! Good job on completing the challenge. Your solution looks very good, there are only some small point and ideas that I think would make your project a bit cleaner:

    Instead of using a ::before on your li you could just use your li as the background by setting it's background-color and background-image. This way you have less elements in your document and don't need to play with position:absolute as much.

    I suggest using buttons instead of links for the timeframe selection. By using links the whole document reloads on click, which looks weird because the images on the color stripes are flashing. For bigger projects and documents that would also impact performace, since you'd need to load everything again.

    There's a weird cursor visual, where you color stripe on your card displays a cursor:pointer; but doesn't show any visual cue because it doesn't have a :hover state. As a user I would be unsure if clicking on the stripe would open the card itself as if I'd be clicking into the content below or an entirely different window. If you don't want it to be clickable you should remove the cursor:pointer on it. If you want it to do the same as clicking inside of the card content you should display the :hover effect of the card. If you want it to do something different, then you'd need a :hover effect on the color stripe to indicate a different function.

    0
  • Zakhar Polikarpov•260
    @ZPolikarpovPosted 4 months ago

    Hello there!

    Good job on finishing the challenge. Here are some ideas of scss that you could implement to make your code cleaner:

    Try to group your scss by the classes you create. I see that your first scss block looks a lot like your HTML structure. This makes it harder to look through your code, as card__title and card__text are in different "blocks". Usually if you want to change something about your card it's easier when all the associated classes are in their own block or document. As a rule of thumb: When you start nesting your 5th class in scss you should consider creating a separate scss block for your code.

    Since you're already using double underscores in your classes, you could use & to refer to the wrapping selector

    .card {
 &__title{
  font-size: 3.4rem;
  font-weight: 700;
 }
}

    sets the class .card__title with the according font-size and font-weight.

    Look into @mixin. Scss provides lots of code like functionalities that prove very useful. In your solution (and likely in many others you'll make) it would be nice to shorten @media only screen and (max-width: 758px) to something like @include mq(758px). You could combine it with variables to have fixed breakpoints based on what you think the different screen sizes are like @include mq($tablet)

    Marked as helpful
    0
  • Xqgoji•120
    @JhinDanzoSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    First app done with react.

    What challenges did you encounter, and how did you overcome them?

    Responsive design of share component and using react overall

    What specific areas of your project would you like help with?

    all advices will be appreciated

    Article preview, sass, react

    1
    Zakhar Polikarpov•260
    @ZPolikarpovPosted 4 months ago

    Hello there. Well done on completing the challenge. There are a couple of things you can do to add more functionality and to use more of Reacts capabilities.

    FIrst of all instead of using straight up images on the "Share tooltip" wrap them in Links. This way you can navigate via the link by pressing on the image.

    While having a "show" property on your Sidepage can certainly be useful in more complex applications, you could shorten this by using conditional statements to render that part { isShareOpen && <Sidepage ... }. Since you've unpacked the Button image and used the SVG code directly: instead of assigning a class to change the button of the image you could instead change the fill property itself, which would change the color in a more apparent and quicker way: fill={color}

    Marked as helpful
    0
  • Zakhar Polikarpov•260
    @ZPolikarpovPosted 9 months ago

    Hey Rodrigo,

    Well done on completing the challenge. As for code structure you're usually looking for patterns and scalability, as well as how easy files are to find in your project. On smaller projects like this one this usually isn't a problem, but once you start getting bigger you'll have troubles finding the files you need if you put all of them in a single folder. There are a lot of structures for files and all of them have good ideas behind them. I'd recommend you start by creating a folder called "Components" in which you can put components that you create (Like the QRCodeComponent.tsx). Once you start working with multiple pages you can consider creating a "Views" folder to put your pages in (like your App.tsx in this case). Another thing to consider are your .css files. You could have a dedicated "css" or "styles" folder where you keep all of your .css files or you could always keep them close to the files they are used in.

    As you can see there are quite a lot of options already. Try some out and look what works best for you.

    Happy Coding!

    Marked as helpful
    0
  • denise•230
    @moncadadSubmitted 9 months ago

    When y'all build these projects how do you usually go about determining what a good name for classes, id's, variables etc ? Additional question what is your favorite framework / libraries to use and why ?

    Social Links Profile

    3
    Zakhar Polikarpov•260
    @ZPolikarpovPosted 9 months ago

    Hey there!

    When naming things, you usually go by the idea of "If someone else were to read this code and continue working on my project, would he understand what is happening here?". There are many possibilities of naming things, best you try sticking to known conventions. Remember, the "someone else" looking at your code might be the you in a couple of months :) .

    Libraries and Frameworks are tools that you use for a specific purpose (usually saving time). Why would you build something from scratch when you can use a framework? What you need to consider is the purpose behind using the framework, the upsides and downsides and view it relative to the scope of your project. A big and fickle project where requirements often change and that has a lot of "extras" to it would probably require a more flexible framework that is easier to customize compared to a simple landing page that won't get touched for a couple of years. As Danny said if you're learning how to code it's mostly beneficial to first understand the basics, so it's probably best to start off without using frameworks or libraries unless you already know which one you'd use as your main library in the future. What I do recommend is trying out SASS/SCSS instead of css. I think it helps with structure and overview a lot especially once you get to larger projects with hundreds of classes.

    As for your project it looks great. One thing I would change is using links <a> instead of <div>s for your social profile links, as it improves accessibility and is also easier to implement the desired logic to via the href = "https://yourwebsite.com" property that will forward you the the website on click.

    Happy Coding!

    Marked as helpful
    0
  • Zakhar Polikarpov•260
    @ZPolikarpovPosted 9 months ago

    Hey, I've noticed you use margins to get your objects in the right position. This can get very tiring and messy, especially when working on bigger projects and projects that might change their requirements later.

    For example instead of using

    .photo img {
    //...
    margin-left: 100px;
    margin-top: 25px;
}

    you could use

    .photo {
    //...
    display: flex;
    justify-content: center;
}

    This will horizontally center your image (and all other content) inside of the div.

    Alternatively there is also a way to center objects by assigning automatical margins like:

    .photo img {
    //...
    margin-inline: auto;
}

    This will horizontally center your image by creating margins that fill out the space to the left and the right of it.

    PS: I noticed you tried to use align-items: center; on your .photo class. This property doesn't work, because your div is displayed as a block display: block;. You can enable it by making your div either a flexbox display: flex; or a grid display: grid;

    Happy coding!

    Marked as helpful
    0
  • Zakhar Polikarpov•260
    @ZPolikarpovPosted 9 months ago

    Hey, nice job on completing the challenge. As timodn pointed out using percentages does certainly help. Here are some techniques you can look up as well, that help with varying screen sizes:

    • Use clamp(...) for smooth transitions between values. There are some clamp generators online that help you find the correct values.
    • Use mediaqueries for different screen sizes @media only screen and (max-width: ...)
    • You can use functions like max(...) min(...) and minmax(...) to have a lowest or highest value that something should have.
    • Try to not use "magic numbers" where it's not necessary. Look for a way to have your numbers be relative to something. Usually you would use somehting like 100% values or 100vw or 100vh

    Tell me if you have any further questions. Making responsive sites might be quite challenging, so experimenting with these concepts will definitely add some tools to your repertoire. Good luck coding!

    Marked as helpful
    1