Skip to content
OverviewSolutions
3
Comments
11
Yakub
@Yakub-Egamnazarov

All comments

  • Aneta•180
    @anetaanetteSubmitted almost 3 years ago

    I couldn't figure out what I was doing wrong with the media queries in scss. The website isn't responsive, I tried different things. Could you please guide me and tell me what I'm doing wrong?

    Testimonials grid section

    1
    Yakub•260
    @Yakub-EgamnazarovPosted almost 3 years ago

    Hi, congrats. About your responsiveness issue: I think the problem occurs when you just used your media query, you just re-specified grid-template-columns, but didn't specify grid-template-areas for new width. I think, inside the same media query you should also specify grid-template-areas for mobile layout and add media query for each element inside the grid (cells) specifying grid-area. That would help. let me know if you succeed.

    Marked as helpful
    1
  • Yakub•260
    @Yakub-EgamnazarovPosted almost 3 years ago

    First of all: congrats, the layout works well in both device widths. However, in order to solve some accessibility issues, you could use <main> element instead of div, in your code it is <div> with "all-cards" class. You can follow the frontend validator to solve those issues. Secondly, in order to place all your grid in the middle, you could apply flexbox centration (e.g. align-items and justify-content) for the <div> element with "all-cards" class. The main container.

    0
  • Yakub•260
    @Yakub-EgamnazarovPosted almost 3 years ago

    It seems for the main container you could use flexbox centering, justify-content, and align-items to center. Other parts are solid. Congratulations.

    0
  • MKGIT•160
    @menokemoSubmitted almost 3 years ago

    Hello 👋 nice challenge made with grid any suggestions are welcome thx Meno

    CSS grid

    1
    Yakub•260
    @Yakub-EgamnazarovPosted almost 3 years ago

    Congrats

    0
  • Yakub•260
    @Yakub-EgamnazarovPosted over 3 years ago

    Hello Tomas, congratulations on completing the challenge. Regarding your solution I would like to point out the animated arrow, which is made very good and give good user experience. Overall your solution seem very good both in quality and responsiveness. Links are also dynamic. However, I would like suggest adding to your state changing elements, e.g. links, social network icons, some transition, so they would change their state smoothly. About mobile version, I really like how the menu popup comes from the right with animation and hamburger menu turns into X button. Very good. Overall solution is very good. Will see you next challenge. and happy coding.

    1
  • Yakub•260
    @Yakub-EgamnazarovPosted over 3 years ago

    Hi Carlos, congrats on the completion of the project, and here is few comments from my side.

    1. on the learn more it is been used div element for the line, I think it is ok with that, but in my opinion, it would be better if you used ::before or ::after pseudo-element, and manipulate its opacity, rather than just scaling up the entire btn-div-wrapper, however, you can ignore that.
    2. in the graphic design section, the tex-block seems misaligned vertically, I think it is better to adjust by margin or padding.

    Overall, it seems the solid solution. Good job, keep coding, cheers

    Marked as helpful
    0
  • Gustavo•25
    @GustavoSziSubmitted over 3 years ago

    Hi. I'm in the first steps of my web developer career, and I'm practicing html, css and JavaScript for now. If someone has any opinions about my webpage, I'd be glad to hear it

    Responsive SunnySide landing page

    2
    Yakub•260
    @Yakub-EgamnazarovPosted over 3 years ago

    Hi Gustavo, congratulations on completing the project, and wish you luck and passion for your future career and your new beginning.

    Regarding the solution, it seems that you didn't put :hover effect of your elements, like the nav button, LEARN MORE links, and links for social networks in the footer. On the design, you can see variants for the active state, and you can add those states for your solution.

    Happy coding. Cheers

    Marked as helpful
    1
  • Yakub•260
    @Yakub-EgamnazarovPosted over 3 years ago

    Hi Rileyyy, congratulations on completing the project. Everything in your solution seems solid without any problem. However, I would add some transition properties to smoothen the hover effect on Learn More buttons. Secondly, the arrow in the header on the desktop view seems a little bit lower than the center. You could use transitionY property on this element. I saw you used only transitionX(-50%), you can also use it for Y axis.

    Cheers, and happy coding.

    Marked as helpful
    0
  • Yakub•260
    @Yakub-EgamnazarovPosted over 3 years ago

    Hey Sodja, congrats on completing the project, it looks consistent in the required display width. Besides that, I would suggest using mixins in your SCSS files to include media queries for your CSS code, this will improve the speed of your project building. To visually improve your solution I would suggest using the transition CSS rule for a button or link elements when changing state, this would add a smooth transition. Cheers and happy coding.

    Marked as helpful
    0
  • Matěj Svoboda•265
    @SvobyyySubmitted over 3 years ago

    Hello, I tried to make it the most responsive I could, any feedback would be good. I think I should use image instead of background in TRANSFORM and STAND OUT sections.

    Responsive mobile / PC version, SCCS

    1
    Yakub•260
    @Yakub-EgamnazarovPosted over 3 years ago

    Hi, congratulation on your completion of the project, when checking online, I noticed several issues with the desktop and mobile versions.

    1. You could add some dynamic active states as in the design for the desktop version, it is basically made via <<:hover>> effect in CSS. For example, the contact button in the header's navigation bar, and learn more button in the transform section. This would add some dynamic effects to the page. Also in the footer section, all the links and social network links could be made with a hover state.
    2. For the mobile version it's been made a great job, and like the animation with the menu button, how it is turning to X. However, it seems there is some problem with learning more btn, when the display's width 375px. In order to make a yellow (and red) line under the link, you created a div element, however, it would be better is :before pseudo-element used, it is easy to control, and it belongs to the links themselves.

    Good luck and cheers my friend.

    Marked as helpful
    2
  • Yakub•260
    @Yakub-EgamnazarovPosted over 3 years ago

    Hi Ben Wasonga, you did great job, however there are minor issues:

    1. on header section try to center the blocks with heading and arrow with the help of flexbox css, or you can use position properties, use top=50%, left=50%, and after that perform transform : translate(-50% , -50%), hope this would help
    2. In my opinion the contact button on the navbar needs some background coloring and hover effect
    3. you can adjust white spacing in footer properly

    Hope this suggestions would help you, any other questions should be raised, pleas let me know. PS: For reference you can check my solution, may be you can leave some feedback too. Would be appreciated.

    Marked as helpful
    0