Most difficult part of my work process was how to compare the work and the design to be similar in terms of pixels.
Small breakthrough came when i started working with split browser windows.
Wow, that almost looks 1 for 1. Good job. Wish I could get my solutions that close to the design :(
I am very proud that I took less time than QR to do it, that there were things that I felt I couldn't or didn't believe in but my logic in programming helped me a lot! I couldn't say what I would do differently because each thing is teaching me something new or how to solve any problem.
What challenges did you encounter, and how did you overcome them?It was a silly challenge that was like placing the image of "Greg Hooper" next to the name but with a "float: left;" I was able to solve it.
What specific areas of your project would you like help with?I would like to know if I have to improve any aspect of the variables I use and I would love any advice.
Just my two cents, in the css, it is kewl to have a root element where you can declare the variables. For a small challenge like this, it doesn't matter much, but for the larger challenges, it saves time and makes things smoother. It would be something like this
:root { --variable-name: (value); --variable-name: (value); ...... }
.container { background-color: var(--variable-name); }
Hope this helps :)
Design was both fun and frustrating to recreate.
February might not output the correct values, so if anyone's got tips for that, don't hesitate to guide me in the right direction!
Learned Something New
- Found out about order attributes when doing the mobile layout
- Feedback is more than welcome, leave a comment 👍🏻
Place the main content in a main tag <main></main>. This makes it easier to read, follow, and makes it easier for the compiler to know which content is important.
Hope this helps :)
I don't know how to make the second div go behind the first div, in the design image, it is not separated but connected, do I use position absolute on the first one?
I assume to mean go into, I think margin-(direction): -(number)px; could help. So like, margin-left: -4px;
this is my first project and give me an recommendation that are essential and i don't need to miss for future thanks for mentoring me
In the html file, have a main tag around the main content, that makes it better for the compiler and makes the html easier to read. In the css file, I personally place a :root{} where you can declare variables for later use, it makes things faster on larger projects. Hope this helps. :)
Learnt how to do the toggle thing. I've always wanted to do it, but never able to. Really cool project to enjoy.
Have several problems with the responsive, so at the end I decide it to not implement it. The main problem was when I used the @media screen... and I used: .flex-container{ flex-direction: row; }
I had a terrible overflow that I was not able to solve. I would really appreciate the help.
I personally used display grid for the cards. It made them easier to manage with the media queries.
Hi! :) I'm not sure if i did everything right, so it would be nice to get some feedback.
The look is amazing. In terms of the code, in the html body tags, around the container, it's good practice to have a main tag that surrounds the main content of the page. Also, section tags to separate each important part of the page. The <main> tag specifies the main content of a document and should be unique to the document. The <section> tag represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it
Hope this helps
Any feedback/suggestion regarding my javascript code is very much appreciated Thanks 🙌👍💕
In the html, instead of using a div tag for the container, you could use an article tag or section tag, it would make it better for the compiler. Hope this helps :)
Any ideas on how to change the desktop's image to the mobile design's image? I'm guessing that is not the best way to do it. So, any ideas on how to improve it would be appreciated.
The way I did it with to logo is using two image tags. One for the desktop view and one for the mobile view. USing media queries, depending on the size of the screen, it will have display:block on one of the images and a display: none; on the other. For example:
.logo__mobile { display: block }
.logo__desktop { display: none; }
In the desktop view, it would be like this:
@media screen and (min-width: 1023px) { .logo__mobile { display: none; } .logo__desktop { display: block; } }
Hope that helps :)
This is my first challenge on Frontend Mentor, I am very very newbie so I'd appreciate any kind of feedback. Thank you!
It doesn't apply here, but in larger projects, in the css file I personally place a :root property so I can declare variables for each color and font size. It's faster for doing the css. Hope this helps :)
Lo mas dificil fue centrar la imagen y ponerle el borde blanco alguien me podria dar un consejo de como hacerlo de una manera diferente? y no se si fue correcto usar bem en un proyecto tan pequeño?
Mobile view should be with mobile dimensions and the desktop view should be with desktop dimensions. Hope this helps :) Happy coding
