Skip to content
OverviewSolutions
6
Comments
18
MrLanter
@MrLanter

All comments

  • Sebastián Márquez•140
    @sebamarquesSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I liked using grid areas, i didn't know they existed, they are marvellous, it was really fun what they can do, and you don't have to think a lot, just how you want your page to be structured and that's all, if i did it wrong or there's a better way using it please comment it! . Also i started doing mobile first, and i can tell you it's more easy doing it that way, i always read that you should do mobile first but it's the first time i did it this way, and it was really easy to complete this challenge, i changed really little things so i can assure it looks good in a big screen

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

    The how to make the layout, i never used grid or if i used it was for really little things, just for making columns, this is the first time i really induced my mind in trying to comprehend grid

    Responsive four card feature grid areas and media queries

    1
    MrLanter•220
    @MrLanterPosted about 1 month ago

    Hi, I hope you are doing well. The project you made is very well done!

    • The design is well done, just for the grid you must have made a mistake because you swapped the "karm" and "calculator" cards.
    • You could instead download the "Poppins" font from google fonts, then insert it into the project assets and finally import it from the css with font-face. It is quite long to do but it is a good practice because it can improve performance.
    • I recommend you to use SCSS, a really useful preprocessor. With it, you can put your CSS files in an organized tree and you will have additional code options. (You can also use stylus, less or many others )
    • I saw that I used a media query to change the text size on smaller screens but if you are interested there is a way to gradually reduce the text size in one line of code: font-size: clamp(1.1rem, 1.3rem + 1vw, 1.9rem);

    I hope this can help you, have a nice day!

    1
  • Antônio Alves Cataldo•30
    @TonyzCataldoSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Hello, in this challenge i try to use less "px" in images and similar things... i try use some semantic HTML... i am proud of my work... and I accept you give me tips on how to improve my codes... :)

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

    hmmm i have difficult in manipulate the image... in my opinion, his dimensions are small... i dont know too much about

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

    every tip or recomendation... your experience can help to much beginners like me. :)

    Blog preview card Challenge using only HTML & CSS

    1
    MrLanter•220
    @MrLanterPosted about 1 month ago

    Hi, I hope you are doing well. Congratulations for the effort put into the project!

    I could give you some suggestions:

    • Text sizes should be in rem and not in px because some people enlarge the size in their browser. Putting in px would not respect their preferences. Here is a detailed guide

    • The text font is not the right one, yet it has been imported into your CSS. I think this is because you should put this line of code at the very top of the file, before any style: @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

    • You use a figure tag to put the image directly in the index.html. I would recommend instead to replace it with the img tag and import the svg that is in the project assets. Here is an example: <img class="img-article" src="./assets/images/illustration-article.svg" alt="Article illustration"> And you can now change the image size in CSS, for example with width: 100%.

    • Use more descriptive class names than "p1" or "p2". In this context you can replace them with "date-publication" and "description".

    These tips will help you improve SEO, accessibility, readability and code maintenance. I hope it helped you, have a nice day!

    Marked as helpful
    1
  • Abiola Daniel•50
    @Africa4795Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    proud of using flex and media queries

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

    few challenges on the responsiveness on smaller devices

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

    Feedback is Welcome!

    Responsive product card. using Flex

    2
    MrLanter•220
    @MrLanterPosted about 1 month ago

    Hi, I hope you are doing well. Congratulations for the efforts put into the project!

    I would like to offer you some suggestions:

    • You use a div with the class main, except that there is a better way to do it. You can use HTML semantic tags such as <main> in this case, or <footer>, <header>, ... to improve SEO, readability and code maintenance.

    • You use a div.page that contains two images, one for the desktop version and the other for mobile and a media query to choose which one to display. Instead, learn to use the picture tag that allows you to display the right image depending on the user's screen size. Here is an example code:

    <picture>
    <source srcset="images/image-product-mobile.jpg" media="(max-width: 48em)">
    <img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum bottle">
</picture>

    And there is no need for CSS in this example!

    • Text sizes should be in rem and not in px because people increase the font size in their browser and it might not respect their preferences. Here is a well-detailed explanation

    I hope this all helps, have a nice day !

    0
  • MrLanter•220
    @MrLanterPosted about 2 months ago

    Hi, I hope you are doing well. This is a great project.

    The CSS seems correct to me, but it is mainly for the HTML that I suggest improvements:

    Correct tags: the container tag does not exist in HTML. It is therefore important to use recognized tags, for better readability, maintenance and SEO. You can use a semantic tag such as main, or article instead.

    Text font imports: you import the font from the HTML, which is acceptable. But since there is an assets folder with a fonts subfolder that contains the project's fonts, I advise you to use them. Just to get into good habits.

    HTML organization: It is important to group important sections in the HTML in section or div tags (or other tags). For example: create a div tag that contains Jessica Randall's profile and then another one for the links to her profiles.

    I hope this all helped you, have a nice day!

    Marked as helpful
    0
  • MrLanter•220
    @MrLanterPosted about 2 months ago

    Hi! I hope you are doing well. This is a great project.

    I highly recommend using Semantic HTML. You used a div tag with the class "header", but there is a much simpler way! Use the header tag like this:

    <header>
content here
</header>

    But that's not all. You can also use the <main> tag, which works the same way, but for the main content of the page. You can contain your div.container in it.

    With Semantic HTML, you improve code readability, maintenance, and SEO.

    I hope this helped you. Have a nice day!

    0
  • MrLanter•220
    @MrLanterPosted about 2 months ago

    Hello! I hope you are doing well. You did a good job on the project.

    Well-organized HTML is essential for readability, and especially maintenance. I recommend that you follow best practices. Many online resources exist such as articles or tutorials on Youtube.

    Frontend Mentor offers a learning path that starts with simple projects, and becomes more and more complex. You will gradually learn best practices and tips. I highly recommend it! Here is the link

    Good luck for the future!

    0
  • MrLanter•220
    @MrLanterPosted about 2 months ago

    Hey there, I hope everything's going well for you! Great job on your project.

    I have a few suggestions that might help improve it :

    Text : I highly recommend putting text in a <p> tag, instead of using <div>. This improves readability and maintenance.

    Text Colors : Check the text colors specified in the style-guid.md, the title and paragraph do not have the correct colors.

    HTML Semantic: Using semantic tags is recommended for readability, and SEO. Start using them by inserting tags such as <main>, <header>, <footer>, <article>. a detailed resource on this topic

    I hope this helps! Have a nice day

    Marked as helpful
    0
  • MrLanter•220
    @MrLanterPosted about 2 months ago

    Hi, I hope you are doing well! Congratulations for the efforts put into the project.

    I could give you some suggestions for improvements:

    Text size: I recommend using rem for text sizes. People changing the default text size in their browser. Using px does not respect their preferences. Explanatory resource

    Fonts: The fonts that should be used are Montserrat, and Fraunces (If you chose other fonts on purpose, forget what I said). There are no fonts directly in the project, so you can go to Google Fonts and download the fonts.

    Responsive: It is best to have a page that adapts to screen sizes. In the image folder of the project there are 2 images, one desktop, and one for mobile. Learn how to use the HTML tag picture which chooses the image to use based on the rules you define for it. Explanatory resource

    I hope all these suggestions have helped you ! Have a nice day !

    0
  • MrLanter•220
    @MrLanterPosted 2 months ago

    Hi, I hope you are doing well. Congratulations for this great work and the efforts that have been put into it!

    I would like to give you some suggestions for improvement:

    I strongly recommend that you use the <p> and <h1> tags for the text. This is important for readability, maintenance, and for SEO of the page on a browser. Here is some code that could improve this part:

    <h1 class="title">Improve your front-end skills by building projects</h1>
<p class="description">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>

    In the CSS file, from line 1 to line 13, you put a lot of selectors. There is a quick way to select all elements in the document, which should be much more convenient:

    * {
  	margin: 0;
	padding: 0;
        /* other styles */
}

    Text sizes should always be in rem and not px, because some people enlarge the text size in their browser settings and it might not respect their preferences. Here is a detailed explanation on this

    I hope these suggestions were helpful, have a nice day!

    1
  • Extendo99•110
    @Extendo99Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I tried to set the dynamic width of the container in percentages, but I found that a rigid assignment of the container width would be better in this case. I would definitely start positioning the elements differently next time.

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

    I had a problem with the responsiveness of the container but I used media queries.

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

    I definitely need help in creating responsive designs that will look good on various screens.

    Blog preview card using Flexbox

    1
    MrLanter•220
    @MrLanterPosted 2 months ago

    Hi, congratulations for this great work!

    I am far from being a pro in responsive, but I can give you some other advice:

    Text sizes: Text sizes should always be in rem. Some people enlarge their text size in the browser settings and putting this size in px would not respect their preferences. Here is a clear explanation on this subject

    HTML indentation: It is recommended to follow a good indentation of the HTML code for better readability. I do not know if it is intentional, but it is difficult to understand the code when the child elements are not aligned.

    Semantic HTML: Using <div> repeatedly can sometimes be complicated for readability. I advise you to use semantic tags such as <main>, <article>, <footer>, ... This can also improve the page's SEO for the browser.

    I hope these tips have helped you! Have a nice day!

    1
  • MrLanter•220
    @MrLanterPosted 2 months ago

    Hi, congratulations for this nice work and for the efforts that have been made!

    I think I can give you some suggestions for improvements:

    For centering elements, you’re using absolute positioning, which works, but I recommend trying Flexbox for a simpler solution:

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

    I noticed you’re using rem for text sizes, which is great. However, I saw a px size for <p> elements. If this was intentional, ignore this note:

    body p {
    font-size: 15px;
}

    I hope this helps! Good luck with your project and have a great day!

    Marked as helpful
    1
  • MrLanter•220
    @MrLanterPosted 2 months ago

    Hi, I hope you’re doing well. Congrats on your project and all the hard work!

    Here are a few suggestions for improvement:

    • Semantic tags: Using more semantic HTML tags like <main>, <article>, and <footer> instead of <div> can improve both code readability and SEO.

    • Class names: Consider using more specific class names like card instead of container. It makes the code more maintainable and avoids conflicts in larger projects.

    • Font import: I noticed you import fonts from Google Fonts, but it might be more efficient to use the fonts in the project’s assets folder. This can improve performance and give you full control. Here's an example to help:

    @font-face {
  font-family: 'font-name';
  src: url('path-to-your-font') format('truetype');
  font-weight: 400;
  font-style: normal;
}

    I hope this helped you, good luck and have a nice day!

    Marked as helpful
    0