Skip to content
OverviewSolutions
6
Comments
11
Lucas Exequiel
@arrejoria

All comments

  • Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hi, good job finishing this solution!

    Your solution looks very good, however I think I could give you some tips that in my opinion would be useful for you to take into account.

    Some recommendations for your next project:

    [HTML]: Try to use better names for your selectors and explore more about the semantic structure of HTML to display each section as a box, for example:

    |--> container (container has 1 content box)
|-------> content (content has 2 boxes header and body)
|------------> content__header (header has 1 element title)
|-----------------> Title
|------------> content__body (body has 1 element description)
|-----------------> Description

    Semantically framing your HTML will help you better understand how to style your code and get better results by adapting it for other devices (plus it's easy to read).

    If you are using Visual Studio Code, I also recommend the prettier extension. Link

    [CSS]: You're using an opacity to style the background of your buttons on hover, I made that mistake when I started too haha, then I learned the CSS filter property which applies graphical effects like blur or color shift color to an element. Take a look here: filter property

    Problems in the responsive part of your site will be enhanced by applying a good HTML structure.

    For now you are doing great, keep it up! Doing a landing page is something else and you do it! Great job

    Ten un mate 🧉

    Lucas,

    Marked as helpful
    0
  • 00YellowLemon•440
    @00YellowLemonSubmitted over 1 year ago

    Hi Front-end friends. When I click submit button even when I have filled the inputs the icon still displays and the error message does not show. Feedback will be highly appreciated

    Responsive Form

    2
    Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hi 00YellowLemon, congratulations on finishing your solution!

    I would like to help you with some tips or points that I noticed in your work.

    Here are some recommendations:

    1. [Javascript]: You're breaking the task into little functions, that's great, but you're also using a lot of variables for your dom elements. Try one variable for each form field as field__item and another as field__username.

    By doing that, you can now use a foreach for each field and do something like this.

    function handleFields() {
const allFields = document.querySelectorAll(".field__item");

allFields.forEach((field) => {
// do something here
if (field.value === "") {
setError(field, `${field.placeholder} Cannot Be Empty`);
} else {
noError(field);
}
});
}

    and I would handle the display of errors with a class:

    function setError(element, message) {
let parent = element.parentElement;
let p = parent.querySelector("p")
p.innerText = message;
let icon = parent.querySelector("svg");
icon.classList.add('field__validation-show');
p.classList.add('field__validation-show')
}

function noError(element) {
let parent = element.parentElement;
let svg = parent.querySelector("svg");
let pas = parent.querySelector("p");
svg.classList.remove('field__validation-show');
pas.classList.remove('field__validation-show');
}

    I would recommend you to use a better name for your classes and investigate more about different types and ways of selecting an element: JS Selectors

    I hope this can be of help to you

    2. [CSS]: Small detail but no less important, the container of your fields has an absolute height of 40px and overflow. It is better to use it in auto, since when the field shows the error paragraph, its height cannot be displayed.

    Doing this works for me, hope that with this you have been able to orient yourself a little!

    Thanks for sharing and I hope some of the above was helpful to you!

    keep it up you are doing great! 🧉

    Lucas,

    Marked as helpful
    0
  • Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hi Priyanshu Sharma, you have a nice design there, it's still in development or I might be wrong, but it looks great! 👏

    I would like to help you with some tips or points that I noticed in your work.

    Here are some recommendations :

    1. [FORM]: I always think of something more semantic, I noticed you use divs to divide your form groups, you could try using fieldset to group related elements in a form. It is very useful for large shapes.

    You can also enhance your form for small devices by using the for label attribute with an input id to connect the element and provide a better experience for your users. 😁

    <tag for="fname">Name:</tag>

    <input type="text" id="fname" name="fname">

    2. [CSS]: As I said, I think it's still in preparation and it might be a problem for other resolutions to adapt its design

    Try not to use % for your content or containers, instead use the height and width of the viewport. Explore further using margin or padding to get the result you want.

    Useful CSS units: max-width and max-height or units like vw and vh.

    I can't wait to see it finished!

    Thanks for sharing and I hope some of the above was helpful to you!

    Happy coding!! 🧉

    Lucas,

    0
  • AngelQP•70
    @AngelQPSubmitted over 1 year ago

    El proyecto tuvo una dificultad media debido a que recien implementaba tailwind y hacer algunas animaciones me resultaba muy nuevo. Trate de seguir las mejores practicas que al menos como junior puedo entender, separando en componentes que luego pueda reusar.

    Responsive landing page using Tailwind

    1
    Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hola Angel, tu solución se ve muy bien! 💯

    Entrar en el mundo de las animaciones es un tema, también tengo que poner leña con tailwindcss. Es muy poderoso, aunque en cuanto a gustos no me gustan que los elementos queden tan repletos de selectores.😁

    Te quedó barbaro la responsividad entre dispositivos

    Gracias por compartir!

    Lucas

    Marked as helpful
    0
  • 01JohnnyJohn•30
    @01JohnnyJohnSubmitted over 1 year ago

    Definitely need to get more practice of "coding flow". I mean I have to understand better how to code adherently, logically, methodically instead of coding jumping from one part of the project to another, making some small changes here and there.

    Also, I would like to get some hint or help with getting rid of extra empty space below my text elements when screen size is 800px+ - once I set the screen size (in Chrome DevTools) to 800px empty space appears below my heading and paragraph

    QR-code adjusted for mobile and desktop

    2
    Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hey, good job on this solution! 💯 I would like to help you with some tips or points that I noticed in your work.

    I have identified a few areas where I think you can improve your design:

    1. [CSS]: For this layout, the responsive view wasn't too important, but it looks bad if the container uses the entire viewport on other devices. The layout "container" has an explicit unit, try using a "max width" for your content instead of width: 23.5% and center the width of the flexbox container and some padding.

    Here are some recommendations that I found useful for improving your design and skills:

    1. [HTML]: Try to structure your HTML and class selectors in boxes. It has a parent element that has content and uses the body as a container.

    2. [CSS]: Try using libraries like Bootstrap or CSS processors like SASS/Less to explore a bit more with CSS

    3. [CSS Unit]: Try not to use % for your content or containers, rather use the height and width of the viewport with max and min properties. Explore further using margin or padding to get the result you want.

    Thanks for sharing and I hope some of the above was helpful to you! keep it up you are doing great! 🧉

    Lucas,

    Marked as helpful
    1
  • Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hola Jose, tu solución se ve genial! Al fin otro compañero Argentino.

    Encontré bastante interesante tu hoja de estilos, te recomendaría tal vez que explores un poco con los margenes y rellenenos para para centrar tus elementos.

    También noté que utilizas medidas explicitas para tus elementos, es mejor usar propiedades como max-height y max-width. Usar medidas fijas te limitará en la parte responsiva con diseños más grandes.

    Seguile para adelante con más soluciones! Gracias por compartir, te mando un mate 🧉

    Marked as helpful
    1
  • Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hi there, your solution looks great! 💯

    I found your repository very interesting, thanks for sharing 🧉 Lucas,

    0
  • Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hey, good job on this solution! 💯 I can leave you some tips

    I identified a few areas where I think you can improve your design:

    1. [Resize]: I see you're having issues with responsive view responsiveness. The layout has an explicit unit that uses the minimum width or height of the viewport for different devices.

    2. [Image]: Your img tag element does not have an explicit width and height attribute.

    Here are some recommendations that i found useful to improve your design and skills:

    1. [Units]: Units like vmin and vmax are great but not always useful. I recommend using somewhat more explicit units and properties like vh, vw and max-height, max-width for width and height.

    2. [Elements]: Try not to use too many elements like </br> in inline elements to break lines. Explore further using margin or padding to get the result you want.

    Thanks for sharing and I hope some of the above was helpful to you! keep it up you are doing great! 🧉

    Lucas,

    0
  • Tharun Raj•1,330
    @Code-BeakerSubmitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    This is my second challenge and I'm proud of completing it myself.

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

    I haven't come across any major issues with this project.

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

    Any feedback is welcome!

    QR Code Component (HTML and CSS)

    2
    Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hey good job on this solution! 💯 I can leave you some tips

    I want to highlight some positive aspects of its design. These elements caught my attention and I think they are the strong point of your work:

    1. [HTML]: The HTML boxes infrastructure is good, you're on the right way.
    2. [CSS]: Variable CSS is a good practice to improve your speed on large layouts 👍

    Here are some recommendations that will help you improve your design:

    1. [Size Changes]: Note that you use an explicit width and height for some elements. That can be a problem for large layouts, try using max-width, max-height for example.
    2. [Positioning]: You are using relative and absolute to center the content of your container. Try using Flexbox or wrapping its left and top properties with a transform that might also work.

    keep it up you are doing great! 🧉

    Lucas,

    Marked as helpful
    1
  • Ignacio Spreafico•590
    @nachospreaficoSubmitted over 1 year ago

    It wasn't particularly difficult, struggled at first when tried to "conditionally" render the desktop or the mobile image, then I remembered media queries.

    Any feedback is welcome and very appreciated!

    Product Preview Card (HTML + CSS)

    3
    Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Hey, good job on this solution! 💯 I can leave you some tips.

    Media queries are great and it is very important to always use them at the end of your style code or selector to give them more importance. ☝️

    I note the layout lost styles for others resolutions, the reason of that is that you use css properties that are important for the visual design in your media queries. For example you could use only media queries to resize or handle the containers or content box like image-container and info-container.

    You are doing great! 🧉

    0
  • Ammar Imran•110
    @CosmicGarou18Submitted over 1 year ago

    Hello, I mainly have only two questions : How do I stop the text from overlapping with each other when I reduce the window size and can this be achieved through flex-box properties?

    Product Card Display with CSS and HTML

    1
    Lucas Exequiel•200
    @arrejoriaPosted over 1 year ago

    Look nice, maybe you can try handling the space for any container or content with padding and margin, not with custom height or width

    0