@islam-heddi
Submitted
@arrejoria
@islam-heddi
Submitted
@arrejoria
Posted
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
@00YellowLemon
Submitted
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
@arrejoria
Posted
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
@PriyanshuSharma0326
Submitted
@arrejoria
Posted
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,
@AngelQP
Submitted
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.
@arrejoria
Posted
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
@01JohnnyJohn
Submitted
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
@arrejoria
Posted
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
@Joseargentina
Submitted
es mi primer diseño con frontendmentor que les parecio? en que lo puedo mejorar?
@arrejoria
Posted
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
@DeyanTopalov
Submitted
---- Feedback Welcome -----
Built with:
@arrejoria
Posted
Hi there, your solution looks great! 💯
I found your repository very interesting, thanks for sharing 🧉 Lucas,
My only question is whether the website "responsive" was done right.
@arrejoria
Posted
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,
@Code-Beaker
Submitted
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!
@arrejoria
Posted
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:
Here are some recommendations that will help you improve your design:
keep it up you are doing great! 🧉
Lucas,
Marked as helpful
@nachospreafico
Submitted
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!
@arrejoria
Posted
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! 🧉
@CosmicGarou18
Submitted
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?
@arrejoria
Posted
Look nice, maybe you can try handling the space for any container or content with padding and margin, not with custom height or width