Looking to hire developers?
@sandro21-glitch
@Aysha-py
Submitted
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.
@sandro21-glitch
Posted
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.
@OzmanGh
Submitted
If you have any advice to improve my solution, don't hesitate to send feedback.
@sandro21-glitch
Posted
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
@Leandr0SmS
Submitted
I'm struggling to deal with background position. In wide screens the background image doesn't fill 100%.
Feedbacks are welcome!
@sandro21-glitch
Posted
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
@DAVIDS2405
Submitted
@sandro21-glitch
Posted
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
@Mr-jaw
Submitted
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! 😊
@sandro21-glitch
Posted
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
@josr13
Submitted
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.
@sandro21-glitch
Posted
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
@Abdokhalil11
Submitted
I Wish It can like You
@sandro21-glitch
Posted
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
Marked as helpful
@ruanalexandreS
Submitted
If someone has any tips or advice for me, I accept.
@sandro21-glitch
Posted
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
Marked as helpful
@OwerAndres
Submitted
¿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
@sandro21-glitch
Posted
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
Marked as helpful
@sniper23403
Submitted
i finished my fourth project and i am waiting for any feedback guys
@sandro21-glitch
Posted
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
Marked as helpful
@Ninunutsi
Submitted
Any advice will be helpful.
@sandro21-glitch
Posted
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
Marked as helpful
@eddy-t
Submitted
@sandro21-glitch
Posted
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
Marked as helpful
@amelia2802
Submitted
Developed the QR code design using HTML and CSS while maintaining "Mobile First". Any feedback is appreciated.
@sandro21-glitch
Posted
Hi Amelia
Here are a few suggestions for improvement your code
Use CSS reset to standardize the default styles across different browsers, this can help you avoid cross-browser compatibility issues.
Consider using CSS variables to store values that are reused throughout the code. This makes it easier to maintain and update the styles.
Consider using CSS Flexbox or CSS Grid for better layout control and improved responsiveness.
Happy Coding
Marked as helpful
@sandu-motelica
Submitted
@sandro21-glitch
Posted
Hi Sandu
Here are a few suggestions for improvement on your code:
Consider using CSS variables to store values that will be reused throughout the code, such as colors or font sizes.
Use CSS Flexbox or Grid to control the layout of the elements and make it easier to adjust the layout in the future.
Flexbox:
You can use the CSS Flexbox layout to center a div both horizontally and vertically. For example:
.parent { display: flex; align-items: center; justify-content: center; height: 100%; }
.child { width: 300px; height: 200px; }
Grid:
You can use the CSS Grid Layout to center a div both horizontally and vertically. For example:
.parent { display: grid; place-items: center; height: 100%; }
.child { width: 300px; height: 200px; }
Consider using a CSS reset to standardize the default styles across different browsers.
Make sure the font-family is imported or available to avoid unexpected results in different browsers.
Happy Coding
Marked as helpful
@akhilchary08
Submitted
I used css grid for structuring the html. For fetching data from the api endpoint axios has been used. There are 224 advice slips in advice slip api. For every click from the user a function is called. In the function call a random number is generated using Math.random() function of javascript which ranges between 1 to 224. for every random generated number serves as an Id and using the Id corresponding advice is fetched. I hope learn further from others solutions. 🙂
@sandro21-glitch
Posted
Hi akhilchary
Here are a few suggestions for improvement on your code:
Use semantic HTML elements where appropriate, such as <header>, <nav>, <main>, <article>, <aside>, and <footer>.
Provide alternative text for the <img> elements using the alt attribute, to make the content accessible for people using screen readers.
Use CSS variables to store values that are used repeatedly throughout your styles, such as colors or font-sizes. This will make it easier to make global changes to your styles.
Try to avoid using inline styles and instead use CSS classes for styling.
Use descriptive and meaningful class names, such as .advice-card instead of .main to make your code more readable and understandable.
Use CSS Flexbox or Grid for layout instead of position absolute where possible, as they are more versatile and easier to use for most layout tasks.
Happy Coding
Marked as helpful
@kareemIsWebDevelper
Submitted
hi, i am so confused about choosing between varouis frontEnd frameworks can anyone help me selecting the best?
@sandro21-glitch
Posted
Hi Kareem
Here are a few suggestions for improvement your code
Use proper indentation to make your code more readable and easier to maintain.
Instead of using inline styles, you can write your styles in a separate CSS file and link to it in your HTML file.
Use semantic HTML elements:
Consider using semantic HTML tags like header , section , article , footer instead of div for better accessibility and structure of your code.
Using pixels (px) in CSS is a common practice for setting element sizes, font sizes, and other layout-related styles. However, using px can cause issues with accessibility and responsiveness, as the sizes set in px will not change based on the size of the viewport or the device being used.
a better idea for a responsive and accessible website design is to use relative units like percentages (%), viewport units (vw, vh), or em/rem units. These units are relative to the size of the viewport or font size, respectively, and provide a more flexible and scalable approach to layout.
Happy Coding
Marked as helpful
@mahmudofficial1
Submitted
reply to help me make this better in any way Thanks
@sandro21-glitch
Posted
Hi Mahmud
Here are some suggestions to improve your code
Use semantic HTML elements:
Instead of using a <section> element for the card, you could use an HTML5 semantic element such as <article> or <figure> which would better describe the purpose of the element.
Use CSS classes effectively:
You have used the same <br> tag multiple times to create spaces, instead you can use CSS classes to control the spacing.
Use CSS reset:
Instead of writing the CSS reset code manually, consider using a popular CSS reset stylesheet such as Normalize.css or Eric Meyer's Reset CSS.
Minimize the use of hardcoded values:
Instead of using hardcoded values like 5% for margins and paddings, consider using a relative value such as 1rem or a CSS grid/flexbox to create the layout.
Avoid over-qualified selectors:
Over-qualified selectors (e.g., .text-area h3) can make the code longer and harder to maintain. Consider using more specific class selectors where possible.
Happy Coding
Marked as helpful
@erkatia
Submitted
@sandro21-glitch
Posted
Hi Erkatia
Here are a few suggestions for improvement your code
Use semantic HTML elements:
Instead of using a div with a class name "container", you can use a section element to wrap the QR code and text content, as it is a stand-alone content block that has a distinct purpose.
Add alt text to the QR code image:
For accessibility purposes, it is important to add a descriptive alt text to the QR code image. This will be read by screen readers to provide information to visually impaired users.
Consider using a CSS reset or normalization stylesheet: This will help ensure that the styles of your website are consistent across different browsers.
Use CSS variables:
Consider using CSS variables to store values that are used multiple times in the stylesheet, such as font family, font size, and colors. This makes it easier to update the styles across the whole stylesheet if needed.
Minimize the use of absolute positioning:
absolute positioning can make it difficult to maintain the layout of a page. Consider using other layout techniques, such as flexbox, to achieve the desired layout.
Consider using rem units for font sizes: rem units are relative to the root element (HTML), and make it easier to maintain consistency in font sizes across the page.
Happy Coding
Marked as helpful
@godforyou
Submitted
I found centering the container horizontally and vertically difficulty, and making it also responsive to mobile version.
how its viewing in mobile version, its not centering.
Is there a good method of centering a div both vertically and horizontally both in desktop and mobile?
@sandro21-glitch
Posted
Hi godforyou
here is a common method to center a div both vertically and horizontally in CSS:
.center-div { display: flex; align-items: center; justify-content: center; height: 100vh; }
The display flex makes the div a flex container and align-items: center centers the div vertically, and justify-content: center centers the div horizontally. height: 100vh sets the height of the div to be 100% of the viewport height.
Note:
If you want to center the div only horizontally, you can use display: flex and justify-content: center.
If you want to center the div only vertically, you can use display: flex and align-items: center.
here are some helpful resources to learn about the display: flex property in CSS:
CSS-Tricks: A Comprehensive Guide to Flexbox
Mozilla Developer Network (MDN): Flexbox:
Happy Coding
@Pompey-hub
Submitted
I got stuck at overlaying two divs and making it to hover like in the challenge. It was nice challenge but I think there's a way much easier than I use. Feedback will be much appreciated!
@sandro21-glitch
Posted
Hi Pompey-hub
Here are a few suggestions for improvement your code
Semantic HTML:
Consider using semantic HTML tags like header, section, article, footer instead of div for better accessibility and structure of your code.
Accessibility:
Add alt attributes to all images for better accessibility.
Use CSS flexbox for better alignment and responsiveness. CSS Flexbox
Write more specific selectors instead of using universal selector(*). This makes the code more readable and maintainable.
Use tools like Autoprefixer to add vendor prefixes for compatibility with different browsers.
Happy Coding
Marked as helpful
@lelongrvp7
Submitted
My first try on this challenge. Happy to get some feedbacks. Thanks!
@sandro21-glitch
Posted
Hi Lê Đức Long
Here are a few suggestions for improvement your code
HTML
Use semantic HTML elements:
Instead of using a div for everything, use semantic HTML elements such as header, nav, main, section, etc., to better describe the structure and purpose of your content.
CSS Consistent naming convention:
Consider using a consistent naming convention, such as BEM (Block, Element, Modifier), to keep your CSS organized and avoid naming conflicts.
Reusable classes:
Create reusable classes for styles that are used multiple times in your code. This will make it easier to maintain and update your styles.
Use CSS variables:
Consider using CSS variables to store values that are used multiple times in your code, as this makes it easier to maintain and update your styles.
Minimize the use of hard-coded values:
Instead of hard-coding values, consider using relative units such as em, rem, vw, vh, etc., to make your styles more flexible and adaptable to different devices and screen sizes.
Happy Coding
Marked as helpful
@SimonMartorano
Submitted
@sandro21-glitch
Posted
Hi Simon
Here are some suggestions for your code
HTML
Use semantic elements:
Make sure to use appropriate HTML5 semantic elements such as header, footer, article, main, nav, etc. to give structure to your content.
Alt text for images:
Make sure your images have descriptive alt text to help users who are using screen readers or have slow internet connections.
Use CSS to separate the presentation of your content from your HTML. This will make it easier to maintain your code and make changes to the design of your website.
Consider using preconnect to speed up loading time by establishing a connection to external resources before they are needed.
CSS
You could use CSS Custom Properties to store the width and max-width of the .card class, this way you can easily change the width and max-width values in one place.
You could use CSS variables for the font-families and weights instead of hard-coding them.
Consider using media queries to adjust the styles for different devices.
Otherwise, it looks great.
Good Luck
@Haileleul4337
Submitted
The difficult part for me was making the card vertically centred but i figured it out after checking some resources form w3school but still having difficulty on it.
I am unsure of the size of the card. i think i made it a little bit bigger than the designs because if i made it smaller, those contents inside wouldn't fit with that size specially those paragraphs should be 18px so i decided it to make it a little bit big.
I need feedback and some suggestion of aligning items and sizing our div. thanks...
@sandro21-glitch
Posted
Hi Haileleul
Use CSS grid or flexbox to create the layout, instead of using media queries.
Use semantic HTML elements for better accessibility.
Extract the repeated styles and create a separate class for them.
Use CSS variables for maintaining consistency in colors and fonts.
Organize your CSS code into separate files for different components or sections of your site.
Use a CSS reset or normalize stylesheet to standardize the default styling of HTML elements across different browsers.
Regularly test your code on different browsers and devices to catch any compatibility issues early.
Good Luck
@tovvydumaplin
Submitted
This challenge is great as a beginner. I am open for feedbacks and want to know about the best practices.
@sandro21-glitch
Posted
Hi Tovvy
Here are some suggestions to improve your code:
HTML
Indentation: Use proper indentation to make the code easier to read and maintain.
Alt text: Provide descriptive alt text for images to improve accessibility.
Semantic elements: Use semantic elements where possible, for example <header>, <footer>, and <nav>.
Descriptive class names: Use descriptive class names that accurately reflect the purpose of the elements they style.
CSS
The CSS code looks good, it's well-structured and easy to read. A few suggestions to improve it further:
Use CSS variables to store frequently used values such as color codes, font sizes, etc.
Use CSS grid or flexbox for the layout instead of position absolute, which might make the layout less flexible.
Use shorthand properties, for example, instead of writing margin-bottom: 12px;, you can write margin: 0 0 12px 0;.
Use media queries to make the layout responsive for different screen sizes.
Good Luck
Marked as helpful
