Hello everyone, 3rd project created here, no major challenges on this one.. (maybe my code isn't optimal, I'm counting on you to let me know.) The only difficulty I had, and that I had for my previous project, concerns media queries. I want that when it switches from mobile to desktop version, there's no jolt, that there's a smooth transition, is it possible?
Just a quick answer to your questions would be yes there is an easy way to do the transition. for example: (pulling from stack flow)
@media screen and (max-width: 400px) {
div { background: navy; }
}
@media screen and (min-width: 400px) {
div { background: green; }
}
div {
transition: background 2s linear;
width: 400px; text-align: center; color: white;
}
The transition does not go into the @media query but instead into the element that is going to be changing via the media query.
If you have any further questions please let me know and I can try and help
Hello Everybody,
I completed this challenge, this challenge made me think of how I should develop it and I looked into how mobile first design works and I learned that it's a better practice to start mobile first due to it's simplicity then work your way to the bigger screens. Like always let me know if there's any other improvements that I can make. Thank you!
This looks really good, just some user experience ideas that you could maybe implement.
clicking the @(username) could take you to the GitHub user GitHub page. The four prompts at the bottoms could take you to different fields, you could take user to GitHub page, or to location using an api location or just post request to google maps and sending the user to the google page that returns.
Looks really good and appeared to be very good when it comes to responsiveness.
This was quite a fun and simple project with a couple of curve balls. For a larger project, I would have used more utility and name classes as opposed of element styling.
Looks really good...good job with everything. I would drop the weight down a little bit for the font but everything looked really good
Thank you for any feedback.
Looks really good, I would drop the font-weight of the heading. Other than that it looks amazing. Keep up the great work!
Qr-code-component 👨🏽💻
Technologies used 🚀✨
Features 🎯
You can check me out
Ready to tag along on my coding escapades? Join my adventure, where I challenge projects here.
🌌 Feel free to add your opinion about any possible improvements to the code and accessibility. 🙃
Awesome job, I would say with the code: Something this small does not need to be broken down into different files. You had 2 css files for the project that are involved in this project/challenge. The reset css file is ok and I think you should slowly get away from using to help teach about how to manipulate different CSS and how they interact together.
I found that getting centering the text was a bit challenging. I went to Free Code Camp and saw a tutorial on how to create a card image for a website.
One of the best ways to center a card would be.
(html parent element) { display: flex; align-items: center; justify-contents: center; }
For the justify-contents you need to make sure you have a height set for your parent container. This will center an item.
Another pointer if you want to move your tag to the bottom is:
.attributes { position: absolute; bottom: 0; width: 100%; }
I do this just to move the attributes tag to the bottom of the page and out of my way.
Question to community:
Awesome job and looks amazing. My only feedback is against the design but would be that you could click anywhere in the starting circle to start and stop. That was the first I did was click in the middle on the time with no changes and it was not till later that I noticed the Start button.
It would also be cool if the color of the time ring changed depending on factors, whether that be on a break, or what not.
Another thing about the responsive to your site was that if viewing on a tablet or wide screen but not much height the page kind of breaks a little and I had to find the settings button by scrolling down. I think a single page site with one function like this should have everything viewable at all times, no matter the size of the screen.
Over all it was a great looking site.
I opted to use 600px instead of 365px as the max-width for smaller screens. I did this because smartphones have bigger screens these days. Am I mistaken? What is the best max-width to use when deploying media queries for smartphone screens?
I also struggled with matching the colors. I usually cannot tell certain colors apart.
@obinysol
First things first your colors look really good. I would say that your line spacing looks a little off. I don't remember what the size is off the top of my head but I can look it up for you if you really want it.
When it comes to screen size I would keep it as small as can be and then grow it from there. Remember that you want to accommodate as many screen sizes as possible and as such go low then work you way larger.
For example I set my smallest at like 350px and then made sure that everything grew until I got to a max size that I wanted. Planning for all cases is the smallest option, is what I was taught, and then realize that you can always go bigger, but never smaller.
Any feedback is useful.
Awesome Job. I just finished this project as well. I ended up using a display: flex for mine and changed the orientation depending on if I was mobile or desktop. The image also depending on orientation is set to width: 50% (desktop) or 100%(mobile).
As I just finished this you can view my code on GitHub and see what I am talking about if I did not explain that well enough.
👋 I've been working on improving my CSS skills and following best practices, but I believe there's always room for growth. What are some CSS best practices you find most valuable, and do you have any specific feedback on my recent work?
Awesome job, I actually learned something reading your code as I just did this challenge as well. I forgot about the :marker and did not use it and ended up doing it a very crude way.
