Llevo poco más de una semana aprendiendo HTML y CSS. No pude centrar el div, por mas que use grid, flex, y probé varias opciones más para intentar hacerlo. Esto fue lo mejor que pude hacer por el momento. Espero seguir aprendiendo. Y poder mejorarlo.
To center a child element inside a div:
div { display: flex; justify-content: center; // along primary axis (default x) align-items: center; // along secondary axis (default y) }
Although I have been learning HTML and CSS for a while, I felt most of my coding experience was through tutorials. I wanted to escape tutorial hell, so this is one of the first times that I have built a project from scratch. I chose a simple challenge first so as to not get demoralized and over-confident, but I still ran into some challenges that I had to google search while building this. More specifically:
Overall, good challenge and I am excited to try more challenges in the future and escape tutorial hell!!!
For 2 you can use the provided figma files (not sure about sketch). Figma has added a developer view so you can inspect the css. The style guide has the font details.
Feedback is appreciated. Thanks.
Very good!
Just needs the box shadow on the main card to make it pop box-shadow: offset-x offset-y blur-radius spread-radius color Out Of Boxes, Shadows Cast
Values are in the figma file
On desktop mode when the "dismiss" button is pressed, the layout returns to the mobile view. I am unsure why this happens and the way I found to fix it was to use "location.reload()". I would appreciate if anyone could explain why this happens.
Criticism on any part of my code is highly welcome.
On mobile so can’t run code but I’d have type=“button” on the dismiss button. type=“submit” is usually paired with a form and immediate posting of data to the server causing a refresh. A lot of web frameworks that implement forms do a preventDefault because it isn’t the 90s anymore and php use isn’t so prevalent
From the figma file box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05);
Other than that it's looks spot on. Well done
