Skip to content
OverviewSolutions
22
Comments
54

Sandro

@sandro21-glitchGeorgia1,150 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

ReactJS

Latest solutions

View more solutions

Latest comments

  • Sandro•1,150
    @sandro21-glitch

    Hi There

    including the Bootstrap framework via its CDN in your HTML file is a common and convenient way to add Bootstrap to your project. It allows you to access the Bootstrap styles and functionality without having to download and host the framework files yourself. This approach is widely used and generally considered a good practice.

    As for using the built-in fetch function in JavaScript within an event listener, it's a valid approach for making HTTP requests and retrieving data from a server. The fetch function provides a modern and flexible way to work with asynchronous data fetching. It returns a Promise that resolves to the response from the server, which you can then handle accordingly.

  • Sandro•1,150
    @sandro21-glitch

    Hi Othman

    Here are some suggestions to improve the code

    Use CSS reset to standardize the default styles across different browsers.

    Use CSS variables for color values, so that it's easier to change the color palette in the future.

    Consider using CSS Flexbox or CSS Grid for layout, especially if you plan to have more elements in the future.

    Using absolute positioning to center an element has some limitations, such as not being flexible with the size of the parent container. An alternative solution is to use Flexbox or Grid layout for centering elements.

    With Flexbox, you can center an element both vertically and horizontally using the following CSS:

    .container { display: flex; align-items: center; justify-content: center; height: 100vh; /* or any desired height */ }

    .centered-element { /* styles for the centered element */ }

    With Grid, you can center an element in a similar way:

    .container { display: grid; place-items: center; height: 100vh; /* or any desired height */ }

    .centered-element { /* styles for the centered element */ }

    Happy Coding

    Marked as helpful
  • Sandro•1,150
    @sandro21-glitch

    Hi Leandro

    Here are some suggestions to improve the code

    You can use CSS to ensure that a background image fills the full screen, regardless of screen size. Here's an example:

    body { background-image: url(your-background-image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; height: 100vh; }

    In this example, background-size: cover makes sure the background image covers the entire screen, while background-position: center centers the image within the screen. The height property set to 100vh sets the height of the body to 100% of the viewport height, so the background image covers the entire screen.

    Happy Coding

    Marked as helpful
  • Sandro•1,150
    @sandro21-glitch

    Hi David

    Here are some suggestions to improve the code

    You can use CSS resets to avoid unexpected default styling.

    Add font-size and font-weight to the body class to provide a better overall consistency in the design.

    You could use CSS grid or flexbox for the layout to make the design more responsive and flexible.

    To center the card with Flex, you can use the following CSS

    body{ display: flex; align-items: center; justify-content: center; height: 100vh; }

    If you want to place the card in the center with absolute position, you can use the following example:

    .card{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background:rgb(255, 255, 255); max-width: 30.0rem; border-radius: 1.5rem; overflow: hidden; }

    you can learn Flexbox and CSS Grid on the following resources:

    MDN Web Docs , CSS-Tricks , W3Schools , FreeCodeCamp

    Happy Coding

  • Sandro•1,150
    @sandro21-glitch

    Hi Name

    Here are few suggestions to improve the code

    Add aria-labels to the buttons to improve accessibility. For example, you can add aria-label="Submit rating" to the submit button.

    Use const instead of let when declaring a variable that won't be reassigned.

    Add comments to explain what the code does.

    Happy Coding

  • Sandro•1,150
    @sandro21-glitch

    Hi Joseph

    The choice between using article or section tags versus div tags depends on the purpose of the content being marked up.

    The article element represents a self-contained composition in a document, such as a blog post or a forum post, that should make sense on its own.

    The section element represents a standalone section of a document, such as chapters, headings, or any other thematic grouping of content.

    If the content within the main tag is a self-contained composition or a standalone section, it would be appropriate to use either the article or section elements, respectively.

    If the purpose of the content within the main tag is more structural in nature, it may be more appropriate to use a div element.

    Happy Coding

View more comments