Skip to content
OverviewSolutions
6
Comments
41
Sadeesha Jayaweera
@SadeeshaJayaweera

All comments

  • Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations & all the Very Best in Completing the Challenge ✌️. Happy Coding!

    1
  • Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations on completing the challenge & all the very Best ✌️

    It sounds like you were trying to center a <div> container that holds your content by adjusting the margin-left property. While this approach can work in some cases, it may not be the most responsive and flexible way to achieve centering, especially for mobile views. There are more modern and responsive techniques you can use for centering content. Here's a better approach:

    1. Flexbox Centering: One of the most popular and responsive methods for centering content is using flexbox. To center a <div> horizontally and vertically, you can apply the following CSS to the container:

      .container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
}

      This will work well for various screen sizes, including mobile, without having to set specific margin values.

    2. CSS Grid Centering: CSS Grid is another powerful tool for layout control. You can use it to center content as well. Here's an example:

      .container {
  display: grid;
  place-items: center;
}

      This will center the content both horizontally and vertically within the container.

    3. Margin: 0 auto for Block-Level Elements: If you want to center a block-level element (like a <div>) horizontally, you can also use the margin: 0 auto; technique. This method is useful when you want to center a block horizontally within its parent container.

      .container {
  margin: 0 auto; /* Center horizontally within parent */
}

      To center vertically as well, you can combine this with flexbox or grid as mentioned above.

    For responsiveness, it's also essential to consider using media queries to adjust your layout for different screen sizes. Media queries allow you to apply different CSS styles depending on the screen width, ensuring your content looks good on both desktop and mobile devices.

    Here's a basic example of a media query for mobile responsiveness:

    @media (max-width: 768px) {
  /* Your mobile-specific CSS styles go here */
}

    In this query, styles inside the block will apply when the screen width is 768 pixels or less, allowing you to customize your layout for mobile devices.

    0
  • Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations on completing the Challenge ✌️. I Hope this might be helpful for you.

    Re-learning and mastering positioning in CSS is a valuable skill for web development. Properly understanding and using CSS positioning can help you create complex layouts and responsive designs with ease. Here's a brief overview of the different positioning methods in CSS to get you started:

    1. Static Positioning (default):

      • Elements are positioned in their normal flow.
      • The position property is set to static by default.

    2. Relative Positioning:

      • Elements are positioned relative to their normal flow position.
      • You can use top, right, bottom, and left properties to offset the element from its normal position.
      • Useful for fine-tuning element placement within its containing element.

    3. Absolute Positioning:

      • Elements are taken out of the normal flow and positioned relative to the nearest positioned ancestor (an ancestor with position other than static) or to the initial containing block.
      • Useful for creating overlays, tooltips, or absolute positioning within a relative or absolute container.

    4. Fixed Positioning:

      • Elements are positioned relative to the viewport (browser window) regardless of scrolling.
      • Commonly used for fixed navigation bars, modals, or elements that should stay in a fixed position while scrolling.

    5. Sticky Positioning:

      • Elements are initially in the normal flow but become fixed once they reach a specified scroll position.
      • Useful for creating elements that stick to the top of the page as the user scrolls down.

    6. Flexbox and Grid Layout:

      • CSS Flexbox and Grid Layout provide powerful and responsive layout options without the need for complex positioning.
      • Flexbox is great for one-dimensional layouts (e.g., rows or columns), while Grid Layout is suitable for two-dimensional layouts.

    7. Centering Elements:

      • To center elements horizontally and vertically, you can use techniques like flexbox (justify-content and align-items), CSS Grid, or the margin: 0 auto; trick for block-level elements.

    8. Media Queries:

      • Use media queries to make your layouts responsive, adjusting the positioning of elements based on screen size and orientation.

    To master positioning, it's helpful to practice by building layouts and experimenting with different positioning techniques. CSS can sometimes be tricky, but with practice and a solid understanding of the fundamentals, you'll become more confident in your ability to create beautiful and responsive web designs.

    Marked as helpful
    1
  • Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    It's great to hear that you're continuing your React journey and finding concepts like useState and the react-router-dom library fascinating! React is a powerful and popular library for building user interfaces, and learning how to use these fundamental concepts is a significant step in becoming proficient with React.

    Here are a few points to consider as you continue your React journey:

    1. useState: The useState hook is a fundamental part of React's state management system. It allows you to add and manage state within your functional components. As you gain more experience, you can explore more complex state management techniques like using Redux or the Context API for global state.

    2. React Router: react-router-dom is a vital library for handling routing in your React applications. It enables you to create navigation, route-specific rendering, and dynamic page updates. Understanding how to use it effectively is crucial for building complex, multi-page applications.

    3. Error Handling: Handling errors gracefully is an essential skill when building robust applications. In React, you can use error boundaries to catch and display errors without crashing your entire application. Make sure to explore and implement error handling practices as your projects become more complex.

    4. Component Architecture: As your projects grow, you'll want to pay close attention to your component structure and organization. Consider using reusable components and adopting best practices like prop drilling or using state management libraries when needed.

    5. React Ecosystem: React has a vast ecosystem of libraries and tools that can help you with various tasks, such as form handling, data fetching, and styling. Explore these libraries to make your development process more efficient and enjoyable.

    6. Testing: As your projects become more significant, incorporating testing becomes increasingly important. Learn about testing frameworks like Jest and testing libraries like React Testing Library to ensure the reliability and maintainability of your code.

    Remember that learning React is an ongoing process, and there's always more to discover and explore. Keep building projects, experimenting with new concepts, and referring to the React documentation and community resources to continue improving your skills. Happy coding!

    1
  • coinfilip•130
    @coinfilipSubmitted about 1 year ago

    Hello. Here's my solution to Challenge #10.

    Notes: First time using ::after pseudo-element for the hover state, and I hope I made a good implementation of it somehow. Swapped the <img> element that has the equilibrium image to <section> as MDN states that <img> doesn't support ::after.

    NFT preview card component using Flex

    1
    Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Using the ::after pseudo-element for hover states is a creative way to enhance your web design. Swapping the <img> element for a <section> element to support the ::after pseudo-element is a valid approach. However, it's essential to ensure that your implementation works effectively and maintains accessibility. Here are a few points to consider:

    1. Accessibility: Make sure that the content you're swapping is still accessible. If the image you replaced conveyed meaningful content, ensure that this content is accessible to users who rely on screen readers or cannot view images. You might use the aria-label attribute to provide a text description.

    2. Semantic Structure: Ensure that the use of a <section> element is semantically appropriate for the content you're representing. Semantically correct HTML improves accessibility and SEO.

    3. CSS: Verify that your CSS implementation for the ::after pseudo-element is effective and works as intended on various browsers and screen sizes. Cross-browser testing is crucial.

    4. User Experience: Test your implementation thoroughly to ensure that it enhances the user experience and doesn't introduce any usability issues.

    5. Performance: Consider the impact on page load times. Depending on the size and number of images you're replacing, this technique may have performance implications. Ensure that it doesn't significantly slow down your website.

    In summary, using the ::after pseudo-element for hover states and swapping the <img> element for a <section> element can be a valid approach, but it's important to pay attention to accessibility, semantics, CSS compatibility, user experience, and performance to ensure a successful implementation.

    Marked as helpful
    1
  • coinfilip•130
    @coinfilipSubmitted about 1 year ago

    Quite satisfying to finish this one, although conflicted whether adding images thru CSS instead of HTML tags will be helpful when it comes to accessibility. Please let me know of your thoughts, thank you.

    Product preview card component using Flex

    1
    Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Adding images through CSS instead of HTML tags can have advantages and disadvantages, and it depends on the specific use case and context. Here are some considerations:

    Advantages:

    1. Control Over Presentation: By using CSS to apply images as background images, you have more control over how the images are presented and styled. This can be useful for decorative or background images where the image is purely presentational and doesn't convey important content.

    2. Reduced HTML Bloat: If you have many decorative images, using CSS can help reduce the amount of HTML code, making your HTML cleaner and easier to maintain.

    Disadvantages:

    1. Accessibility: The biggest drawback is accessibility. When you add images using HTML <img> tags, you can provide alt text, which is crucial for screen readers and users with disabilities. Alt text describes the image's content or purpose, making your content more accessible. When using CSS background images, there is no direct way to provide alt text, which can be a significant accessibility issue.

    2. Content Semantics: HTML is designed to provide semantic meaning to the content. Images are part of the content, and using HTML tags properly reflects this semantic structure. Using CSS for images can break the semantic structure of your content, making it less understandable for both users and search engines.

    3. Printing: If users want to print your webpage, CSS background images may not be included by default. This can lead to a poor user experience when trying to print content that relies on background images for presentation.

    Recommendations:

    1. Use HTML for Content Images: For images that convey meaningful content or provide essential context to your web page, always use HTML <img> tags. Be sure to include descriptive alt text for accessibility.

    2. Use CSS for Decorative Images: If an image is purely decorative and doesn't convey essential information, then it's more appropriate to use CSS for styling. In such cases, make sure your HTML remains semantic and accessible, and the decorative image should not be vital for understanding the content.

    3. Consider Responsive Images: For responsive design, use the <img> element's srcset attribute to provide different image sizes for different screen resolutions and sizes. This ensures that your images adapt to different devices and screen sizes.

    In summary, it's generally best to use HTML for content images and reserve CSS for styling and decorative images. Prioritize accessibility by providing proper alt text for all content images, and ensure that your web design is responsive to cater to various devices and screen sizes.

    Marked as helpful
    1
  • coinfilip•130
    @coinfilipSubmitted about 1 year ago

    Hello. Here's my solution to Challenge #10.

    Notes: Something about using 5 divs for the 5-star image part doesn't feel right to me. So I appreciate if you have any suggestion or feedback on that. Thank you.

    Social Proof Section using Flex + Grid

    1
    Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations on completing the Challenge its almost same as the design. I wish you all the very best & Happy Coding ✌️

    1
  • ugiagbe wellington•70
    @UgiagbewellingtonSubmitted about 1 year ago

    i always love coding ,so any part of it that was difficult for me was an advantage for me to learn more . THANKS

    html and css only

    1
    Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations on completing the Challenge & all the Very Best ✌️

    0
  • Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations on completing the challenge & all the very Best ✌️

    It sounds like you were trying to center a <div> container that holds your content by adjusting the margin-left property. While this approach can work in some cases, it may not be the most responsive and flexible way to achieve centering, especially for mobile views. There are more modern and responsive techniques you can use for centering content. Here's a better approach:

    1. Flexbox Centering: One of the most popular and responsive methods for centering content is using flexbox. To center a <div> horizontally and vertically, you can apply the following CSS to the container:

      .container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
}

      This will work well for various screen sizes, including mobile, without having to set specific margin values.

    2. CSS Grid Centering: CSS Grid is another powerful tool for layout control. You can use it to center content as well. Here's an example:

      .container {
  display: grid;
  place-items: center;
}

      This will center the content both horizontally and vertically within the container.

    3. Margin: 0 auto for Block-Level Elements: If you want to center a block-level element (like a <div>) horizontally, you can also use the margin: 0 auto; technique. This method is useful when you want to center a block horizontally within its parent container.

      .container {
  margin: 0 auto; /* Center horizontally within parent */
}

      To center vertically as well, you can combine this with flexbox or grid as mentioned above.

    For responsiveness, it's also essential to consider using media queries to adjust your layout for different screen sizes. Media queries allow you to apply different CSS styles depending on the screen width, ensuring your content looks good on both desktop and mobile devices.

    Here's a basic example of a media query for mobile responsiveness:

    @media (max-width: 768px) {
  /* Your mobile-specific CSS styles go here */
}
    Marked as helpful
    1
  • Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations on finishing the challenge. All the Very Best and Keep up the Good Work Bro ✌️

    0
  • Donovan Romero•100
    @nsvonod12Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    See that my studies are working

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

    So far, I didn't have any complications, everything went very well.

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

    how to use Saas for my code

    QR Component using CSS and HTML5

    1
    Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations on finishing the challenge & all the very best ✌️

    1
  • Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted about 1 year ago

    Congratulations on finishing the challenge & all the very best ✌️

    Marked as helpful
    1