Skip to content
OverviewSolutions
6
Comments
11

Lucas Exequiel

@arrejoriaBuenos Aires200 points

Hi there, im from Argentina... mate🧉? Thank you for visiting my profile, I hope you have found something interesting or helpful to you in the source code of my personal github.☕ It helps to have friends from the same field, let's connect on Linkedin and leave me your feedback or just say Hi! 😁

I’m currently learning...

Laravel and Vue Js

Latest solutions

Latest comments

  • Lucas Exequiel•200
    @arrejoria

    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
  • Lucas Exequiel•200
    @arrejoria

    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
  • Lucas Exequiel•200
    @arrejoria

    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,

  • Lucas Exequiel•200
    @arrejoria

    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
  • Lucas Exequiel•200
    @arrejoria

    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
  • Lucas Exequiel•200
    @arrejoria

    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
View more comments