What are you most proud of, and what would you do differently next time?
Me encanto poder validar mi formulario solo con JavaScript, la proxima vez buscaría hacer mi codigo mas limpio.
What challenges did you encounter, and how did you overcome them?
Encontre el reto de cuando cambiaba de tamaño mi desarrollo y cambiaba de la ventana logueo a la ventana del mesaje de gracias me mostraba las dos ventanas al mismo tiempo y no importaba que tenia una clase para que una de ellas desapareciera lo que hice fue poner a mi porpiedad Display: none !import; para ganarle al display: flex; que le puse en el media query.
What specific areas of your project would you like help with?
Me encantaria que me ayuden a hacer un mejor codigo y poder aplicar las mejores tecnicas de codificación para hacer mucho mas facil una posible cambio en mi desarrollo.
the solution include semantic HTML.
the site looks the same as the solution.
the code well-structured, readable, and reusable
great for using FormData() at app.js
to improve:
Success message page should be a different html page
the message text need to include the email that the user entered and not always '[email protected].'
the responsive of the page in the mobile mode need more improves include breakpoints.
-- the image at 1023px is still of the desktop, but it need to be of the mobile.
bonus: try to use .card__info__list li::marke with style-image instead .card__info__list li::before
keep to build 👷♂️
What are you most proud of, and what would you do differently next time?
Hello guys ❤️
This was the biggest challenge for me so far, I still didn't know how to use the CSS grid and this challenge made me chase that knowledge!
Little by little I'm getting better at reading documentation, as I had to read a lot, but I learned and got along well with CSS Grid
What challenges did you encounter, and how did you overcome them?
CSS Grid columns widthsAt first I only knew how to define the column size in CSS grid using ''1 fr'' which left me very limited and I had difficulty with this when adjusting the window size
A bad css?As I didn't know exactly what I was doing, maybe my lines of code were messed up?
Anyway, I hope that you can helpe with some tips 🤓🧠
What specific areas of your project would you like help with?
the layout looks good, i noticed some little things:
the page max-width need to be smaller => smaller cards.
jeanette card should not be the 2nd card at mobile/tablet mode.
there is no need .cards{min-width: 375px;}, just remove the body{ margin: 6vw 10vh;} and leet css to do it responsive thing. try to avoid fixed sizes. the center of the page horizontally and vertically shouldn't be depend on fixed margin. not all screen the same. try to find a better way to center the page.
try to avoid things like: .kira {grid-area: kira;} and <div class="card kira">. the names is to specific. think what will happen if you was told to replace kira card with john card.. it was meanning that you was needed to change many HTML and CSS lines. better way is something like: .card-5{grid-area: card-5;} and <div class="card card-5">. try to keep it modular /component that can fix to wide possibilities.
What are you most proud of, and what would you do differently next time?
I feel proud to complete the challenge and improve little by little.
What challenges did you encounter, and how did you overcome them?
I experienced an issue with the page layout where certain sections were hidden and did not scroll correctly when reducing the browser size. However, I managed to solve it by implementing the following CSS properties:
min-height: 100vh;
flex-grow: 1;
What specific areas of your project would you like help with?
the most important i noitced is that the site height is too long,
try to make it to be no more heigher then the device height with extra padding at the top and the bottom.
Preparation time section need padding
not all the list style colors is the same as the design
What are you most proud of, and what would you do differently next time?
Overall this was a fairly straight forward build.
What challenges did you encounter, and how did you overcome them?
I am still struggling with getting the spacing just right between elements with padding and margins. I feel like there should be an easier way to do it. I also find that the text doesn't look exactly like the design file, even though I put in the same font and properties that are in the design. I am not sure why this is.
What specific areas of your project would you like help with?
Can anyone provide tips on how to format/layout the text elements? Is there a better option than what I did? Also, how are my media queries? Anything I can improve there?
as @kodan96 said, try to not use fixed sizes to solve ptoblem.
it make the site look like an fixed image and not responsive for all devices, remeber css is responsive by default. by adding fixed sizes you make it un-responsive.
you use codes like margin: 19px 19px 19px; in many tags,
padding to the parent container is best practice as @kodan96 mentioned.
using css flex/grid is more modern soultion. you will achive more with less code.
keep to improve and keep to build 👷
What are you most proud of, and what would you do differently next time?
Using SASS for the first time felt good! This made it easier to read CSS variables. Was quite easy to setup together with Node.js.
It also felt good to go through the design section by section and feeling in control when implementing the design.
I did try a new CSS reset that I found which honestly made things more complicated and gave me more things to reset, ironically enough. So in the end I decided to stick with a basic CSS reset that just removed the default margins and paddings on elements, and set the same box-sizing on everything :)
What challenges did you encounter, and how did you overcome them?
The trickiest part by far was making the images responsive, and also swapping the images on desktop vs mobile. I am not sure I have done it in the best way though, but it seem that the images are shown as intended! I also spent some time to test the design in the browser on mobile resolutions and with different screen orientations and found some small bugs thanks to that, which I fixed.
What specific areas of your project would you like help with?
Generally any best practices I should follow, in particular for handling the images. Also general feedback is always appreciated!
1.font-weight of most of the site is too bold - use only where it needed
use the colors like in thes design to all the elements.
<li> tag text alwys need to start from the same place no matter how many rows there is. try diffrent way to handle it. remember: too-much-css create more issues to handle.
at mobile mode you need to vertically centering the ::marker pseudo-element so it will be at the middle of the <li> text
What are you most proud of, and what would you do differently next time?
I'm proud of using a native API for the form validation as it does some heavy lifting.
I also tried to write the html / CSS / JS in a structured / readable / understandable matter.
Next time I'd like to try out form validation using a well known library or framework.
What challenges did you encounter, and how did you overcome them?
The main challenge was the form validation. for that I relied on the Constraint Validation Native API.
When the form is submitted we call form.checkValidity() native method which returns if the form is valid based on the controls attributes / types. and trigger invalid events on any controls that don't pass validation.
We listen for the invalid and change events on the inputs and we call a function that adds the errors indicators based on why the input is invalid or remove them if the input is valid. also relied on the :invalid pseudo class selector for styling the invalid inputs.
What specific areas of your project would you like help with?
I would like to know if my code is readable and understandable by other developers.
i like the :invalid pseudo class selector for styling the invalid inputs.
the native API for the form validation works great but it not good for space characters
the solution looks like the design 👏
keep to build 👷
the card don't responsive for mobile and small devices
-- example: all text is fix widt and not reponsive, be awate that css is respnsive by default
-- the text paragraph should be a little small on mobile mode
the paragraph text isn't the same as the design
👷keep to build
