Skip to content
OverviewSolutions
7
Comments
12
Fachrezi
@Fbeye04

All comments

  • Fachrezi•200
    @Fbeye04Posted about 2 months ago

    hey bro, good job. I've seen your project and was pleasantly surprised that you applied different layouts between mobile and desktop mode and it was great. Here I just want to give some suggestions where I see from the look of your project, you seem to not add enough padding/margin between the picture and the testimonial. Other than that, I would also like to make a suggestion where I think your h1 placement is a bit off where it should be placed in the name section and then h2 should be placed for the testimonials (I know it's not formally appropriate but if you think about it h1 should be something like a title or something important). But the rest is great and I love your work, bravo!

    Marked as helpful
    0
  • Fachrezi•200
    @Fbeye04Posted 2 months ago

    hey bro, good job on the project but I see some things that you might want to add for future projects.

    • pada markup html saya merasa kamu bisa lebih merapikan penulisan dengan membaginya menjadi seperti ini <main class=“main-container”> <div class=“main-description”> .... </div>

      <div class=“section-container”>
  <section class=“section-card” id=“supervisor”>

      .... </section> <section class=“section-card” id=“supervisor”> .... </section> <section class=“section-card” id=“supervisor”> .... </section> <section class=“section-card” id=“supervisor”> .... </section> </div>

      </main>

    • use css root to remove the browser's default style so that it is easier for you to style according to your wishes. Then, to make it easier, also try to learn the css custom properties

    • for card layouts instead of using flex I recommend using a grid so that your layout arrangement is easier even for different screen types. Also learn the grid template area that will help you in structuring the layout card. Those are the things that I think you can consider adding or using in future projects. Good job bro!

    Marked as helpful
    0
  • sour413•50
    @sour413Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of that I improved in making responsive pages using bootstrap framework, The different things i could do is create more responsive pages like these and implement javascript and more media query techniques.

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

    The Only challenges I faced is alignment challenges using flex, I overcame with the help of w3c schools and help from one of the members from Frontend mentorship from my previous projects.

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

    I would like help in Web-page responsiveness, that's it, I would like to build pages for mobile, tablets and PC, I would like help for building more responsive web pages.

    Social Links Profile Responsive Page

    4
    Fachrezi•200
    @Fbeye04Posted 2 months ago

    hey bro, good job on your project this time but I want to give you some feedback that you might be able to implement to make your project better.

    • try wrapping the name and description using hgroup tag then you can change the paragraph tag to h1 tag for the name.
    • instead of using buttons, it would be better if you use list and ul tags it will be more relevant and easier in styling
    • learn and use root css so that your page is clean from the browser's default style so that it is more free for you to modify the display. In addition, apply css custom properties so that you can apply as provided from the style guide file.
    • instead of 80vh I recommend that the body use 100vh so that the display is right in the center of the page
    • you don't have to declare important on all styles because if you place the style where it should be then the style will be applied without any interference.
    • for margin, padding and width try to define using numbers like 1rem or 1em and reduce the use of auto.
    • try to learn breakpoints on bootstrap it will help you create responsive displays for various types of screens Those are the suggestions that I can give so that the appearance of your project is better, there are many things that must be improved but consistency and commitment are also required so that your skills continue to grow. Good job bro!
    0
  • Fachrezi•200
    @Fbeye04Posted 2 months ago

    hi bro, I congratulate you for successfully completing this project. But here I found something that you can improve and this is related to the media query where when on mobile the card layout does not display correctly and only leaves one card. As a suggestion try on your card-container apply grid then grid template-areas and there you can write it like this: “teal” “red” “yellow” “blue”

    and you will see the normal display on the mobile page

    Marked as helpful
    1
  • Fachrezi•200
    @Fbeye04Posted 2 months ago

    Nice work, bro, I commend how you replicated this project so well from both mobile and desktop screens. I would like to make a few suggestions you might want to consider.

    1. So first, try to wrap the main-container using the main semantic element.
    2. Use the h1 tag for the big title, then h2 for the other segment titles, if that's not enough you can use h3. You can customize in CSS if there are special cases for certain sentences so that you don't need to use h4 or even h5 tags.
    3. Compared to using class=“purple”, I think it would be better to use id because it is more specialized.
    Marked as helpful
    1
  • João Gomes•40
    @joaoeduardogomesSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Making it actually work felt really good. Maybe next time I should try using grid instead of flexbox.

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

    It was difficult to make the images change and fit the space it should like in the design images. The solution that worked was preventing the container from wrapping and changing the flex-direction to column instead.

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

    Any suggestions and critics are welcome. I would like to know specially if there is a easier way to complete this challenge. Maybe I was trying to solve it the hard way without even noticing.

    product preview card

    1
    Fachrezi•200
    @Fbeye04Posted 3 months ago

    Good job bro but I would give some suggestions like:

    • try wrapping the title both the h1 tag and paragraph tag in the hgroup tag, it will make it easier for you in styling.
    • besides that, you can also use the s tag for the initial price section, it will also be easier for you
    • for the “add to cart” text on the button, try wrapping it in the span tag.

    As for the css, everything looks good as well as the appearance. Nice work!

    Marked as helpful
    0
  • Jan•290
    @Jan-Dev0Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    It's not pixel perfect but I think I've come quite close.

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

    Challenging was only to get a pixel perfect copy.

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

    I would appreciate feedback of my CSS in general. Is there anything I can do better? Like the selector nesting or using other selectors.

    Social links profile solution - HTML, CSS, Flexbox

    2
    Fachrezi•200
    @Fbeye04Posted 3 months ago

    Good job man. I don't think there's anything I can suggest. You have implemented the right semantic elements, css reset to remove the default web formatting, use of flexbox, media query to make the display on different screens responsive. It's just probably everyone's preference, I would use section or div instead of nav to wrap the list. Overall it's really good man

    Marked as helpful
    1
  • Fachrezi•200
    @Fbeye04Posted 3 months ago

    Good design bro but there are some things that I encountered that are still not in accordance with the requested design.

    • on mobile, the image does not appear in full. Try to remove the padding: 20px;
    • there are some screen widths which can not display the entire content to copyright such as on ipad air 5 screen size
    • instead of using strong tags it would be better if you just set it in css using font weight But overall you managed to solve it. Good job!
    0
  • Fachrezi•200
    @Fbeye04Posted 3 months ago

    Nice work bro, however I have a few suggestions that might help:

    • try making the card elements static, but this is just a matter of taste.
    • Also, consider styling the focus selector to make keyboard users more comfortable.
    • Don't forget to check media responsiveness by using media queries.
    0
  • Sean Chen•170
    @chenmeisterSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    For this project, I continued to refine my CSS skills by writing efficient CSS code and completing the task myself without relying too much from outside sources. This allowed me to break out of my comfort zone and improve my CSS skills. What I hope to do next time is to keep practicing my CSS and code it without relying on guides.

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

    I've encountered some issues with aligning images and adding custom fonts. I had to refer to the MDN docs and w3schools to help me get it all set up.

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

    I would like to see how I can make my CSS code more efficient and apply some advanced techniques if possible.

    Blog Preview Card in HTML and CSS

    1
    Fachrezi•200
    @Fbeye04Posted 3 months ago

    First of all, your challenge result is good in appearance but I would like to give some suggestions such as:

    • try to use more semantic elements in html. You can use article tag to wrap the card container.
    • then, instead of float I recommend using flex because it makes it easier to organize the page layout
    • Finally, don't forget to add a media query so that it looks good on smaller screens such as smartphones.
    0
  • Fachrezi•200
    @Fbeye04Posted 3 months ago

    I can't see your solution page but it looks similar to the challenge. Good job!

    0
  • Fachrezi•200
    @Fbeye04Posted 3 months ago
    • try using height: 100vh, this will make your qr code display in the center of the page.
    • move all the css in your index.css file, it will make your code look better
    • try to add media queries so that the website can display on any screen conditions
    • lastly, try wrapping images, titles and paragraphs in a container so that it makes it easier for you when you want styling
    0