Skip to content
OverviewSolutions
7
Comments
9
Pickle
@Augurk66

All comments

  • Ramon-Alvez•420
    @Ramon-AlvezSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I was really very proud of the result of this, not only because of the ease and speed but because of the code itself. I thought I managed to organize myself better and also organize the structure of both HTML and CSS

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

    Nothing in particular, it was smooth from beginning to end.

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

    I am open to suggestions, tips and feedback :D

    | HTML5 e CSS | #17 | #2 Junior | Testimonials grid section

    1
    Pickle•220
    @Augurk66Posted 28 days ago

    Nicely done!

    Very cool that you made a neath readme for the project on github. Only thing I can mention at the first glance is that the font colour of the two white cards is too dark. In my case, I used opacity of 70% on the <p> element and the names, just like on other cards. For the rest very good job.

    Keep coding and good luck on the next one!

    Marked as helpful
    1
  • Pickle•220
    @Augurk66Posted 28 days ago

    Hi there! Good job on this project! I see that your image is not loading. You need to delete the slash at the beginning of your src. So instead of:

    <img src="/assets/images/image-omelette.jpeg" alt="Omellette">

    Delete de slash:

    <img src="assets/images/image-omelette.jpeg" alt="Omellette">

    That will make it work :)

    Good luck and keep coding!

    Marked as helpful
    0
  • Jocelyne Teles•180
    @JocelyneTeles98Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I think I did a good job with responsiveness. I tried to find the most suitable options to solve the challenge. Also, I went a little bit more far, and create by myself a design for tablets in portrait mode with 2x2 grid which it seems to fit very well to these sizes.

    The next time, I hope to have more present the idea of use relative sizes instead of fixed ones. I started using fixed sizes and I noticed that it doesn't work for all devices (even if they're inside of the same media breakpoint).

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

    As I explained a little bit in the last question, the most challenging part was to find the correct sizes that work for multiple screen sizes. I used the grid-template-columns property to create the space to place the cards, and each one of them I put 100% of width to cover corresponding space.

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

    As I challenged myself and I set different design for tablets and small screens, I would like to know if my solution is good. Basically, I arranged the middle cards position with a span to fix them in the middle of the grid, but I hide this span and repeat the cards div outside the span for tablets screen sizes. I don't know if it is the only way or if there is another better one. Please, let me know if you have a suggestion and I will be grateful 😉

    My Four Card Feature Section Solution

    1
    Pickle•220
    @Augurk66Posted about 1 month ago

    Very good job on this one!

    I took another approach. You can get the same result by starting by building mobile first. You can make the mobile lay out by declaring only a grid with a gap. Next declare three columns for the grid for lager screens within the @media. And to center the left and the right cards on the bigger screens you can use the properties:

    #supervisor {
    grid-row: 1 / 3;
    align-self: center;
  }

#calculator {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    align-self: center;
  }

    This way the card will center itself between the rows. This was my source: https://gridbyexample.com/examples/example26/

    Hope this helps :)

    Keep coding!

    Marked as helpful
    0
  • Pickle•220
    @Augurk66Posted about 1 month ago

    Very good job on this one!

    You can save a lot of lines of code in your CSS by declaring media queries once. It is possible to declare @media (max-width: 635px) { } once an write all your CSS in that declaration.

    Even better is to start building mobile first without declaring anything and eventually adjust some CSS with a media query for bigger screen. But it can also be a personal preference. Check out Kevin Powell on YouTube, I think he can explain this topic more in detail.

    A tip on details: the crossed out price and button text has Montserrat as Font-Family.

    Good luck on the next one!

    Marked as helpful
    0
  • Pickle•220
    @Augurk66Posted about 1 month ago

    Compliments on this project! Almost a copy of the original. You even made the component change when shrinking the browser on desktop, very nice! The comments in your code are very useful and make the code very readable. Only thing I can say is that the mobile version has no rounded corners on the component and the image.

    Keep coding!

    0
  • Pickle•220
    @Augurk66Posted about 2 months ago

    Very good job on the design!

    I see you also use flexbox. You can shorten your CSS by making a class which once declares to center your elements with flexbox. For example:

    .flex-center { display: flex; justify-content: center; align-items: center; }

    .. and just add .flex-center class to the HTML elements which you want to center. In your case that will be only two elements. But I think if you start to get used to this method, it will save you a lot of lines of code in the future projects.

    Also it would be cool to add actual links <a> to your buttons.

    Good luck and keep coding!

    Marked as helpful
    0
  • Pickle•220
    @Augurk66Posted 2 months ago

    Great job on completing this assignment!

    • It is handy to have a fallback font in your CSS in case that the Google font doesn't work. You can just add a second font. Such as:

    font-family: "Figtree", sans-serif;

    • Accessibility is very important , especially for those how are using screen readers. Your page needs a <main> element which wraps your page content. As is says, it is the main content of the page. Wrap your .container in a <main> tag.
    • There is a date on the card, HTML has also a special element for time. This is also very important for those who are not able to visually see the page. Wrap the date in a <time> element and give it the correct date. I used a <div> to wrap the content and it should look like this:

    <div class="date">Published <time datetime="2023-12-21">21 Dec 2023</time></div>

    • Give your .container a box-shadow. I used 10px on right and on the bottom.
    • Your label needs some rounded corners.
    • I also made a mistake by not giving the .container a hover. Add .container:hover and change the colour of the heading.

    I strongly recommend to add the improvements to your project after feedback of others. There are very professional members on here which can provide good feedback. For me this is the best way learn and to improve my skills.

    Good luck with your next projects!

    0
  • Pickle•220
    @Augurk66Posted 3 months ago

    Good job Adib! I love the simplicity of your code and I like your comments in your CSS code. This makes the code very readable for everyone.

    • I see that you use both px and rem for your font-size. Using rem for all the font sizes improves the accessibility . I also used 15px for the text. Simple trick is to divide px by 16. In this case the paragraph would we approximately 0.9 rem.

    • You don't need to use font-weight of 400 for your paragraph, as 400 is set by default.

    • In the HTML you are missing the <main> element which is wrapping your content. Wrap the <div> in a main tag. I also made this mistake and now I am spreading this wisdom.

    Marked as helpful
    1
  • Sulaimon Abdulrahman•10
    @AbdulrahmanololadeSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that i was able to get the css styling in one go.

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

    The challenge i encountered was when i had to add the background color. I had to check meny times just before i can get the something close to the one in the image given.

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

    I'm not really sure if there is any where in the code where it need to be improved and if there is one, then i'm definitely willing to learn more.

    QR-code solution using css grid, box shadow and flexbox

    1
    Pickle•220
    @Augurk66Posted 3 months ago

    Nice work Sulaimon! You can find the background colour in the style-guide.md file. Which is in the package you have downloaded to start this project. I used the "body" tag to give the background the desired colour. The colour for this background is hsl(212, 45%, 89%).

    body { background-color: hsl(212, 45%, 89%); }

    In the style-guide you can also find the specific font of this component. This component uses Google Fonts. You can add those by using the @import url('https://fonts.googleapis.com/thisisanexamplelink') tag in your css.

    However using CSS within your HTML file is handy, I strongly recommend you to use a separate .CSS style file. With this method you separate your languages and it makes the code more readable.

    Keep it up!

    Marked as helpful
    1