Skip to content
OverviewSolutions
29
Comments
10
Brayan Miza
@bramizdev

All comments

  • katrine9176•540
    @katrine9176Submitted over 1 year ago

    Hello everyone!

    Long time no see! After 2 months break (exams) I'm back even tho I was thinking about qutting it because of the long not-studying/not-repeating.

    Here is my solution of age calculator app. I encountered many seemingly basic problems (😭) so I will appreciate feedbacks :)

    • Why calculateBtn.addEventListener('click', isDateValid(daysAgo.value, monthsAgo.value)) doesn't work? Function runs before clicking button.
    • The way of counting days is messed up in some cases and once works once not.
    • Validation worked but now I really don't know what I missed - it doesn't work at all.

    Have a great day and happy coding!

    age calculator

    1
    Brayan Miza•560
    @bramizdevPosted over 1 year ago

    Your JS function is not working as expected because you are calling isDateValid() immediately and passing its return value as the event listener callback.

    A quick solution would be using an anonymous function as the event listener callback:

    calculateBtn.addEventListener('click', ()=>isDateValid(daysAgo.value, monthsAgo.value))

    By the way your approach would have worked if isDateValid wouldn't need any arguments calculateBtn.addEventListener('click', isDateValid), When you use parentheses () after a function name, it immediately executes the function. That's why you need an anonymous function.

    Marked as helpful
    0
  • Brayan Miza•560
    @bramizdevPosted over 1 year ago

    I'm not sure if this is the best way for center your content for these challenges but while solving one of these challenges, Kevin Powell (a great Youtuber who teaches CSS and web development in general), used display: grid in the body selector. Since then I usually use that to center my Frontendmentor challenges. This works if your body is covers 100% of the height.

    body{
min-height: 100vh;
display: grid;
place-content: center;
}

    source: https://youtu.be/B2WL6KkqhLQ?t=1652

    Marked as helpful
    1
  • France•100
    @LanXhanSubmitted over 1 year ago

    Day 7 As always feedbacks are welcome. I would like to know how to have an efficient way in switching the images from mobile to desktop and any advice for the code itself. Thank you

    Responsive base apparel coming soon page

    2
    Brayan Miza•560
    @bramizdevPosted over 1 year ago

    You can use the <picture> HTML tag.

    It is used to provide multiple versions of an image and allows the browser to select the most appropriate version based on the device's capabilities, such as screen size or resolution. It's commonly used for implementing responsive images.

    <picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>

    Inside the <picture> tag, you will include one or more <source> elements. Each <source> element represents a different version of the image.

    Within each <source> element, you need to specify the srcset attribute, which points to the image source file, and optionally the media attribute, which defines the conditions under which the image should be used. The srcset attribute can include multiple image sources separated by commas.

    The media attribute is used to define media queries. It allows you to specify different image sources based on factors like screen size, pixel density, or other device capabilities. The media queries should be written using CSS media query syntax.

    Finally, include an <img> element within the <picture> tag. This <img> element will serve as the fallback image, displayed if none of the <source> elements match the conditions specified by the media attribute.

    Make sure to provide the alt attribute for the <img> element, which describes the image for accessibility purposes.

    source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    0
  • Brayan Miza•560
    @bramizdevPosted over 1 year ago

    The id attribute is used to uniquely identify an element on a page. Each id value must be unique within the entire page. This is useful for adding functionality to specific elements using JavaScript or CSS. For example, you might use an id attribute to target a specific element with a particular style or behavior, or to create anchor links that navigate to specific sections of the page.

    On the other hand, the class attribute is used to group together elements with similar characteristics. Multiple elements can share the same class value, and the class attribute can be used to apply a style or behavior to all elements that share the same class. For example, you might use a class attribute to apply a common style to all elements of a certain type, or to group together elements that should have a similar behavior.

    In general, you should use the id attribute when you need to uniquely identify a specific element on a page, and the class attribute when you want to group together multiple elements with similar characteristics. By using these attributes appropriately, you can create well-organized and maintainable HTML code that is easy to style and manipulate using CSS and JavaScript.

    Marked as helpful
    2
  • Adriano•310
    @adriano-wbSubmitted over 1 year ago

    This simple project is created to improve my skills in HTML5, CSS3 and Block Element Modifier (BEM). Now I have finished this simple project to improve my skills in HTML5, CSS3 and Block Element Modifier (BEM). I am open to any constructive criticism that is beneficial helping to improve my knowledge.

    My Pricing modal with HTML and CSS

    2
    Brayan Miza•560
    @bramizdevPosted over 1 year ago

    Great Job!

    Some little tips:

    alt attribute

    Providing descriptive alt attributes for images in HTML is an important aspect of web accessibility and can help to improve the usability and search engine optimization of your website. alt attributes are used by screen readers to describe images to users who are visually impaired. By providing a detailed and accurate description of the image, you can ensure that these users have access to the same information as sighted users.

    example:

    alt="Gabrielle Essence Eau De Parfum bottle laying flat on a table with green leaves above and below"

    <del> tag

    You might consider wrap the old price in <del> tags. The <del> tag can be used to apply a strikethrough effect to text, similar to the <s> tag, but it is more semantically meaningful and provides additional attributes that can be used to specify when the text was deleted and who deleted it.

    Marked as helpful
    0
  • Brayan Miza•560
    @bramizdevPosted over 1 year ago

    Looks great!

    If you would like to add more semantic value. I would wrap the "old price" in a <del> tag.

    The <del> tag is an HTML element that is used to indicate that text has been deleted or removed from a document. It is typically used in combination with the <ins> tag to show changes to a document over time.

    The <del> tag can be used to apply a strikethrough effect to text, similar to the <s> tag, but it is more semantically meaningful and provides additional attributes that can be used to specify when the text was deleted and who deleted it.

    For example, you might use the <del> tag to indicate that a particular sentence or paragraph has been removed or replaced in a document, while leaving it visible for reference. You can also use the datetime attribute to specify when the text was deleted, and the cite attribute to provide a reference to the source of the deletion.

    Overall, the <del> tag is a useful tool for indicating changes to a document over time, and can help to improve the accessibility and semantic structure of your HTML.

    BTW: In my solution I used the <s> tag, but I just learned that it is deprecated.

    Marked as helpful
    0
  • Brayan Miza•560
    @bramizdevPosted over 1 year ago

    Great job!

    Be sure to add an h1 element.

    Having a clear and descriptive h1 element on each page is important for SEO, accessibility, and user experience reasons. It helps search engines, assistive technologies, and users understand the main topic and purpose of the page, and can ultimately lead to a better overall experience for everyone who visits the page.

    0
  • Cristian•190
    @CristianBarrios983Submitted over 1 year ago

    Primer desafio de Frontend Mentor completado.

    Este es mi primer diseño, soy nuevo en esto de CSS, acepto toda clase criticas constructivas.

    Saludos.

    Solucion QR code component

    2
    Brayan Miza•560
    @bramizdevPosted over 1 year ago

    Gran trabajo

    Tienes algunos reportes de accesibilidad pero nada que no se pueda corregir.

    Etiqueta main

    Este reporte es por no usar la etiqueta main. La etiqueta main es un elemento semántico de HTML5 que se utiliza para definir el contenido principal de una página web. Su uso es importante porque ayuda a mejorar la accesibilidad y el SEO de una página web. Los lectores de pantalla y otras tecnologías de asistencia utilizan la etiqueta main para identificar el contenido principal de la página, lo que facilita la navegación y la comprensión de la página por parte de los usuarios con discapacidades.

    Etiqueta h1 Este reporte es por que tu solucion no tiene h1. En estos retos es un poco dificil saber cual es tu h1, pero es necesario usar uno. La etiqueta h1 es una etiqueta de encabezado en HTML que se utiliza para definir el encabezado principal de una página web. Su uso es importante porque ayuda a proporcionar una estructura clara y jerárquica al contenido de la página. Además, los motores de búsqueda utilizan la etiqueta h1 para entender el tema principal de la página y su contenido, lo que puede mejorar la optimización de motores de búsqueda (SEO) de la página.

    Uso del alt En este caso a pesar de no ser una imagen que se pueda describir toda imagen deberia de llevar un alt puedes usar un alt vacio alt="" o agregarle una descripcion como alt="QR code to visit Frontend Mentor website" asi un lector de voz podra leer esa descripcion para personas que utilicen tecnologia de accesibilidad.

    Excelente inicio, mucha suerte en tu aventura como Frontend developer.

    Marked as helpful
    1
  • varsanihemal•160
    @varsanihemalSubmitted over 1 year ago

    Not according to the Design but i thought of doing it on my own way. Would appreciate any feedback i receive. Thanks

    Result Summary

    2
    Brayan Miza•560
    @bramizdevPosted over 1 year ago

    Great Idea!

    Very creative design, I guess it would be necessary to improve contrast so your website can be more accessible. But it looks nice!

    Use of main element

    Using the main element is important because it helps to improve the accessibility and SEO of a web page. Screen readers and other assistive technologies use the main element to identify the main content of the page, making it easier for users with disabilities to navigate and understand the page.

    Marked as helpful
    0
  • kingsanwo9•100
    @kingsanwo9Submitted over 1 year ago

    Hello , feedbacks are welcome and also need to an honest review on my GitHub page if its well organized, Thank you.

    Single Price Grid Component

    1
    Brayan Miza•560
    @bramizdevPosted over 1 year ago

    Nice Job!

    I'm not an expert but here is a brief feedback.

    You are missing a h1 element (Or I guess you use it for the price)

    The h1 should be the title of your page and not be used for styling purposes.

    Having a clear and descriptive h1 element on each page is important for SEO, accessibility, and user experience reasons. It helps search engines, assistive technologies, and users understand the main topic and purpose of the page, and can ultimately lead to a better overall experience for everyone who visits the page.

    Nested elements inside span tags

    I guess the correct way to do it is like this: <h1>Title of this <span>Page</span><h1>

    The span element is a generic inline container element in HTML that is used to group together text or other inline elements and apply styles or attributes to them. It has no inherent semantic meaning and is typically used for small pieces of content or for applying styles to specific parts of a larger block of text.

    I hope this helps!

    Happy coding!

    Marked as helpful
    0