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 :)
THIS IS AMAZING!
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 assume to mean go into, I think margin-(direction): -(number)px; could help. So like, margin-left: -4px;
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. :)
I personally used display grid for the cards. It made them easier to manage with the media queries.
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
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 :)
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 :)
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 :)
Mobile view should be with mobile dimensions and the desktop view should be with desktop dimensions. Hope this helps :) Happy coding
lol I was commenting on the previous solution, but it said it was deleted when I posted the comment.
Anyhow, in the HTML I would use the article tag <article> rather than the <div> tag for the three cards. Article tags will make it easier to read and understand and makes it better for the compiler as it knows it's meant to be important. Also, for the responsiveness, everyone has their preferences, I personally create the mobile version first then expand out.
Anywhere between 320px-600px I do for small devices. 600px-1022px I do for medium devices such as tablets. Finally, 1023px or higher I do for large devices.
Hope this helps.
Put "background-repeat: no-repeat;" In the css file. Hope that helps :)
