Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Sakthivel Ramesh• 150

    @sakthivel155

    Posted

    Hi @Steven-Ang,

    I suggest optimizing your code by using the classList.toggle() method instead of individually adding or removing classes. This approach simplifies the code and enhances readability.

    0
  • Sakthivel Ramesh• 150

    @sakthivel155

    Posted

    Hi @DevEmmy001,

    • Avoid Using IDs for Styling: Replace IDs with classes for more reusable and maintainable code.
    • Place Media Queries at the Bottom: Move the media queries to the end of your CSS file for better organization and to ensure styles are applied correctly.
    • Meaningful Class Names: Ensure your class names clearly describe their purpose, making your code easier to read and maintain.
    • Avoid Element Selectors: Refrain from styling elements like * directly, as it can lead to unintended consequences. Use classes instead.
    • Structure the :root Pseudo-Class Properly: Move the :root selector to the top of your CSS to define your CSS variables clearly.
    • Remove Unused Fonts: Clean up your CSS by eliminating any unused font styles to reduce unnecessary code.
    • Add Essential Properties to body: Include vital properties (like margin, padding, and background-color) in the body selector and avoid applying media queries directly to it. Instead, target specific classes or elements within your layout.

    Marked as helpful

    0
  • Sakthivel Ramesh• 150

    @sakthivel155

    Posted

    Hello @J-Jawad,

    Great job on the code! A couple of suggestions:

    1. Avoid using global styles like display: flex; align-items: center; justify-content: center; flex-direction: column; on the body tag—it can cause issues later on. Consider applying these styles to a more specific container.

    2. Class names should reflect their purpose, not content. Instead of using names like karma-card or team-builder, opt for something more descriptive of their function, like card-container or layout-flex. Also, if you don't style these classes in CSS, it's better not to include them.

    Hope this helps!

    Thank you.

    0
  • Sakthivel Ramesh• 150

    @sakthivel155

    Posted

    hello brother! your code is excellent keep up and move to next level to separate css file

    • important css rule don't use body as parent and use this { display: grid; place-content: center; }
    • there should contain this don't use grid in body it problem later period . body { font-family, font-size, background-color, color, line-height, text-align }
    • line no : 42 in html file the img tag doesn't have (alt="") value . check it out if need give some value for alt or clean that (alt = "")
    0
  • thaArcadeGuy• 90

    @thaArcadeGuy

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of learning how to make a div element ignore the padding of its parent when the screen is resized to a smaller screen using CSS media queries. What I would do differently is making sure at least I can style CSS the right way without having to be mechanical.

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

    I struggled with resizing the image to behave like in the mobile design but I was able figure it out after doing some web searching.

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

    I want to understand more about Media Queries, then BEM; I would like to know if my code follows the BEM guidelines

    Responsive Recipe Page

    1

    Sakthivel Ramesh• 150

    @sakthivel155

    Posted

    hello brother !

    • The Html code very clean easy to read but i saw one unwanted mistake ":</strong> " in your html code line no: 52
    • and the subheading line no:49 <li><span>heading</span>text</li> don't need span style separate style like this{color: hsl(30, 10%, 34%); font-weight: bold; } simply use <li><b>heading</b>text</li> just change it's bold and also color was change no need css

    Marked as helpful

    0
  • Sakthivel Ramesh• 150

    @sakthivel155

    Posted

    Responsive is not good for laptop don't give % value on width because when the screen is large it response for that screen

    • i give one idea first do mobile-first design then use flex to center a div give fixed width and height : auto (or) max-content ;
    • it's automatically align for 1440 px screen no need to use @media here : )

    Thinkyou, frnd I thing I give my best !

    0
  • Sakthivel Ramesh• 150

    @sakthivel155

    Posted

    hai bro! you do great job but do it again slit the part step-by-step .

    • the title of the blog card it overflow so first go from mobile first design it make more easy
    • box-shadow : (x-axis) (y-axis); = box-shadow: 16px 16px ;
    • outline : 1px solid black; make good layout when develop then use this tool pesticide web store on browser it's show the layouts
    0
  • Sakthivel Ramesh• 150

    @sakthivel155

    Posted

    1)let use <main> tag after body 2)let style directly to img tag not parent element .qr-code-img { display: block; // img default inline so we change that into block it take entire hight width: 100%; border-radius: 10px; }

    • may be img not look good then use {object-fit:cover; }

    don't over do this: .qr-code { background-color: #2c7dfa; //don't do padding: 20px; //don't do border-radius: 15px; //overwrites } .qr-code img { width: 100%; border-radius: 10px; //overwrites }

    Tip : keep follow the layout use Pesticide webstore tool to view layout with outline

    Marked as helpful

    0