Skip to content
OverviewSolutions
14
Comments
16
chamackstone
@yannmarc

All comments

  • chamackstone•470
    @yannmarcPosted about 1 year ago

    Hello, my friend! You've been doing an excellent job so far. I would like to offer you a few pieces of advice that I believe can be helpful.

    • Your <footer> .info of section .two and your section .four doesn't look good on mobile. By employing media queries, you can enhance the mobile optimisation of your work and elevate the user experience to new heights. Here you can maximise the full potential of your flexbox

    You can use the article from Fedmentor to lean more about media-queries

    Marked as helpful
    0
  • Saša Taušan•360
    @Sasa-TausanSubmitted about 1 year ago

    If possible, i would like feedback from more experienced developers. I used react and i think that my css and my approach of building the project is not the best but since I am a beginner and still learning I would be grateful to see different approach to creating a project. I also made a countdown timer.

    Responsive Officelite two page site, with countdown timer using react

    1
    chamackstone•470
    @yannmarcPosted about 1 year ago

    Great job, your solution is lit 🔥

    • Let your countdown timer be initiated and controlled by the server, this will make it more independent of the client's system clock. This helps prevent discrepancies that can occur due to variations in the client's device time or potential time zone differences. It provides a more reliable and consistent countdown experience for all users.

    Happy hacking, You rock! 🤘🏾💯

    Marked as helpful
    0
  • chamackstone•470
    @yannmarcPosted about 1 year ago

    Great job dude 💯✨ Your solution rocks 🤘🏾 below are few recomendations to make it a banger:

    • Do well to prioritise the mobile-first approach for your frontend projects.

    • Your component-container class doesn't look good on mobile, here's a quick fix to make it awesome 😉 @media (max-width: 424px) { body { padding-inline: 24px; } .component-container { width: 100%; } } to make it more subtle on mobile viewports.👌🏾

    • To ensure optimal display on desktop and tablet views, it is recommended to utilise the max-width property instead of setting the width to a specific percentage, such as width: 50%. This approach ensures responsive and adaptable rendering across different screen sizes.

    Overall your code is neat, well connected, a masterpiece. Keep hacking, you're amazing!

    Marked as helpful
    1
  • Samuel Johnson•200
    @JohnsonSamuel324Submitted about 1 year ago

    This is the first project when trying to make webpage responsive to both desktop and mobile. Let me know if there's anything I could've fixed or recommendations :) Is adding the <main> tag redundant to the <body> tag?

    Responsive Product Preview Card

    2
    chamackstone•470
    @yannmarcPosted about 1 year ago

    Hi friend 👋🏾 Great job 💯

    Let me provide you with a comprehensive explanation to address your concerns regarding the use of the <main></main> tag alongside the <body></body> tag.🤓

    • In HTML5, the use of semantic elements is highly encouraged as it helps convey the structure and meaning of a webpage to both browsers and search engine crawlers. The <body> tag serves the purpose of indicating where the visible content of your website begins. It encompasses all the content that users can see and interact with, such as headings, paragraphs, images, and other elements.

    • On the other hand, the <main> tag has a specific semantic meaning. It is used to mark the primary or most important content of a webpage. By using the <main> tag, you are explicitly telling the browser and search engines that the content enclosed within it represents the core information or focal point of your webpage.

    • By employing the <main> tag, you are not duplicating the functionality of the <body> tag. Instead, you are providing additional information about the structure and significance of your webpage's content. This can be beneficial for search engine optimization (SEO) purposes, as it helps search engines understand and index your content more accurately.

    Hope you find this useful. Happy hacking, you're amazing!

    0
  • ldonnianni•130
    @ldonnianniSubmitted about 1 year ago

    I would like to know how to approach the desktop and mobile design approach. I am not sure how to resolve that. I was given specific size for desktop and mobile (1440 px and 375px) but I didn't know what to do with them.

    What it would have been in this case the best practice to center the QR card. I use position absolute and transform. Or it would have been better to use Flex?

    Thanks

    QR Code Component using HTML and CSS

    2
    chamackstone•470
    @yannmarcPosted about 1 year ago

    Hello there! Great job on your solution! I'd like to provide some feedback to further enhance your work:

    HTML Semantics: Consider adding a description to your images using the alt attribute. This will not only improve the accessibility of your page but also provide alternative text for users who may have trouble viewing the images. You can use the syntax alt="alt text" to achieve this.

    Container Styling: Instead of using a fixed width for your container, I recommend using max-width: 250px to ensure that it remains within a reasonable size on smaller viewports. Additionally, setting width: 100% will make your container card more responsive, adapting well to different screen sizes.

    Body Section: To create some breathing space around the corners on smaller viewports, consider adding padding-inline: 24px to your body section. This will introduce a bit of white space and improve the overall visual appeal.

    Container Image: To ensure that the image within your container fits the width of its parent, you can apply width: 100% to the container img style. Additionally, adding margin-inline: auto will centre the image horizontally within the container.

    By implementing these suggestions, your solution will become even more polished and user-friendly. Keep up the great work! 🤓

    Marked as helpful
    0
  • chamackstone•470
    @yannmarcPosted over 1 year ago

    Hi @sorrasak-code!

    Great solution 🎊

    • You should try and follow the mobile first approach and use more of (min-width: breakpoint)
    • Also try to reduce some properties as the breakpoint decreases, .container { padding: 1.5rem }; can be reduce on breakpoints < 370px to make the spacing more mature.
    Marked as helpful
    0
  • chamackstone•470
    @yannmarcPosted over 1 year ago

    Hi @karthikeyan13121999! Your solution looks good in my opinion.

    Here are some modifications to make your code killers:

    File System / Structure

    • First and foremost, organize your files correctly. You should keep your project's assets in a public folder. It will be challenging for web crawlers to index your file system's content as it develops.

    CSS

    I like your CSS, but it could use a little more work.

    • Use CSS variables; they offer additional flexibility in terms of value and scoping accessibility. Therefore, use variables to make your CSS code **banger! ** :root { --variable-name: variable-value;

    • DRY This approach to coding is crucial. Utilize the idea of utility classes to incorporate this into your CSS. To accomplish this, incorporate patterns into your design and create a ".utility-class" to hold them.

    • Using CSS Resets the browser's style and some HTML elements will make your life much more easier * -- Optional*

    • It's not advisable to do this .box div{ padding: 8px;} because you can accidentally target create a layout where the above styling may apply, and may result in bugs. Rather use this: `.box .add-a-class-to-div {padding: 8px}

    • For responsive design there's a pattern or approach called: mobile first so using max-width but mobile first gives more flexibility.

    Marked as helpful
    0
  • Dellenar•160
    @dellenarSubmitted over 1 year ago

    Hello There,

    It's been a month since i start learning how to code. If you have a time please review my code and let me know if something i should look into or if there is any method that I'm using wrong.

    Thank you in advance !

    Order-Summary-Compenent HTML+CSS

    1
    chamackstone•470
    @yannmarcPosted over 1 year ago

    Hi Friend!

    • Your code looks pretty good and semantic in terms of HTML.
    • Your CSS Code can be improve greatly,
      • Using :root to define your CSS variables like colours, fonts, e.t.c
      • You can use or create your own utlity classes to avoid repeating yourself to speed up your development.

    That's all what I got for you, Great job. Keep Up. Regard

    Marked as helpful
    0
  • chamackstone•470
    @yannmarcPosted over 1 year ago
    • Your solution Semantically right in my opinion as far as HTML is concerned.
    • Accessibility is well respected in my opinion, but for your images you can use ` <picture> <source media="(min-width:your-breakpoints)" srcset="your image"> <img src="your image" alt="image alt" style="width:auto;">

    </picture>` to ensure the good responsiveness of your images

    • Check your layouts at breakpoints = 320px, and add some padding or 1rem to make it portable.
    • For the background image issues, use the property backgroud-size: contain. This applicable to svg images (background) and for jpg's use background-size: cover
    Marked as helpful
    1
  • chamackstone•470
    @yannmarcPosted about 2 years ago

    Good job friend!!

    Try including container your div's in landmarks or semantic HTML tags. This should solve the accessibilities issue of your work. For landmarks use this:

    <div class="my-div" role="sectionmydiv"> </div> This should solve your issues.

    Try comment your code also, which are signs of good practices (write meaningful comments).

    Avoid styling the tag element itself, rather use a class for it. Which is also good practices.

    Note The classes should be self descriptive.

    0
  • chamackstone•470
    @yannmarcPosted about 2 years ago

    Hello Friend!

    You Rock!!

    Your code suffers from accessibility issues and HTML semantics.

    • Try wrapping your sections into a main tag.

    • Thinking about screen readers your accessibility must be good, so for this, try adding alt labels to your images. This gives them a description.

    • For landmarks issues try adding role to your attributes to your section. Example `role= 'contactinfo'.

    • For your layout, responsiveness is not that good across the different viewports. Follow the mobile first approach to your work, and this should solve it.

    0
  • chamackstone•470
    @yannmarcPosted about 2 years ago

    Hello 👋🏼

    I love your work.

    But I got some few remarks to make:

    • Your HTML is not semantic which is probably why you are getting some accessibilities issues with your work. To cover this up, try using landmarks for; your container div should have a role = main or container like wise for any sections of your code to give it some semantic for screen readers.

    • Your layout looks big on big screens, I went through you CSS code and your body has a max-width: 1440px which should be applied to the container. unlike other CSS library this container has max-width: 1100px

    • Your code structure is good but try commenting where necessary it can be useful to us reading your code.

    • Try using CSS resets to ease your workflow example img { width: 100%; object-fit: cover; }

    Marked as helpful
    0