I tried to learn about Bootstrap as I had only used it occasionally without fully understanding it. In my project, I added the Bootstrap framework by including its CDN in my HTML file.
Apart from that, I used the built-in fetch function in JavaScript within an event listener. I'm not sure if this is considered a good practice, so any feedback would be appreciated.
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.
If you have any advice to improve my solution, don't hesitate to send feedback.
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
I'm struggling to deal with background position. In wide screens the background image doesn't fill 100%.
Feedbacks are welcome!
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
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
3rd Project
This is an Interactive rating card component that uses flexbox and DOM
1.Are there any accessibility tweaks that I can improve?
2.Any bad coding in my javascript?(Because I'm not still much familiar with js. still learning...)
solution URL: Git-hub-repo
Live Site URL: Site
Thank you! 😊
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
Should I use article or section tags instead of div as children of my main tag?
This was my first time using Sass. Am I nesting when I probably shouldn't or doesn't it actually matter? I really like how nesting makes my stylesheet look so clean.
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
I Wish It can like You
Hi Abdokhalil
Here are a few suggestions for improvement
Use semantic HTML elements: Consider using semantic HTML elements such as header and footer to improve the accessibility of your code.
Make class names descriptive: Consider using class names that accurately describe the purpose of the element, such as card-header instead of photo.
Add alt text: Make sure to add descriptive alt text to the images in the code.
Add hover effects for the card: To make the card more interactive, you can add hover effects to change the background color or add an animation effect on hover.
Happy Coding
If someone has any tips or advice for me, I accept.
Hi Dev_Ruan_Alexandre.S
Here are some suggestions for your code
Use semantic HTML elements: You can improve the accessibility of your code by using semantic HTML elements (e.g. header, article, nav, etc.). In this case, you could wrap the heading and description in a header element and the "Order Summary" section in an article element.
Consider using CSS classes with descriptive names: This can make your styles more readable and maintainable. For example, you could use class names like "hero-img" instead of "img".
To make your code more scalable and to reduce the chance of conflicts, consider using CSS class names that are specific to the component and avoid using tag selectors.
Happy Coding
¿Qué encontraste difícil mientras construías el proyecto? No me pareció difícil este reto, estuvo bastante fácil
¿Tiene alguna pregunta sobre las mejores prácticas?
Me gustaría obtener sugerencias, consejos o criticas constructivas de como podría mejorar mi CSS o mi HTML
Hi Ower
Here are some suggestions for your code
Use semantic HTML tags: Instead of using div tags, you can use appropriate semantic HTML tags like header, section, and footer for the different sections of your code.
Consider using a CSS reset to ensure that all browsers display the elements in a consistent way.
Use rem units for font-sizes instead of px, so that your text resizes proportionally with the user's browser font-size setting.
Use class names that are more descriptive, for example, instead of "general", you can name it "card-container".
Use CSS shorthands for multiple properties with the same value, for example, instead of "margin-top: 5%; margin-bottom: 15%", you can use "margin: 5% 0 15%".
Happy Coding
i finished my fourth project and i am waiting for any feedback guys
Hi MOHAMED
Here are a few suggestions for your code
Use semantic HTML tags such as header, section, and footer, instead of just a main tag to give structure to your HTML.
Use meaningful class and id names, like "order-summary-container" instead of just "container".
You could use CSS variables for storing common values like colors and fonts, which will make it easier to maintain and update your styles.
For the button, you could consider using a pseudo-element for the button text to avoid the need for an additional p tag.
Overall, the CSS is well-structured and follows a consistent style, with appropriate font sizes, colors, and spacings for various elements.
Happy Coding
Any advice will be helpful.
Hi Nino
Here are some tips to improve your code
Use semantic HTML elements: You can use HTML elements like header, nav, section, etc to give meaning to your code and make it more accessible to users.
Use descriptive class and id names: Instead of using generic names like box, content, input, etc, you can use descriptive names like rating-container, rating-text, rating-input, etc.
Consider using CSS variables for values that are used multiple times throughout your code, such as colors.
Use appropriate font-size values for different devices, such as using 'em' or 'rem' instead of 'px'.
Use const instead of let for values that won't change in JavaScript.
Happy Coding
Hi Eddy
Use semantic HTML elements where appropriate, such as header, main, and footer for their respective sections.
Use descriptive and meaningful class and id names, such as img-card instead of just img.
Use CSS variables for repeated values, such as the background color and font family, to make it easier to maintain and change styles in the future.
Consider using CSS flexbox or grid for positioning elements instead of using floats.
Use descriptive class names, such as ".card-header" or ".card-body", to make your CSS code easier to read and understand.
Remove unused CSS styles to make the code cleaner and faster.
Use media queries to adjust styles for different screen sizes to ensure the layout is optimized for different devices.
Use shorthand properties, such as "margin: 10px" instead of "margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;", to make the code more concise.
Happy Coding
