@fabarqz
Submitted
- What's your approach when deciding for the measurements of the elements of your website using CSS units?
Aaron Varga
@digitalherding
All comments
- Aaron Varga• 350
@digitalherding
Posted
Hey! Great job on your solution here!
In regard to your question and some suggestions I have for you for this solution:
- I would try not to specify height on containers or major bodies of content so that you can let the content naturally flow down the page as needed. With regard to your solution code, I am specifically talking about your div.qr-card. For the div.qr-card I would not set a "min-height".
- I would not set your footer position to fixed. I think you are doing this to keep it at the bottom at all times, but you can achieve this a different way to avoid other issues like the footer overlapping your content on smaller screens such as with displaying flex and using the flex-grow property, etc. I challenge you to look into that if you are interested.
- I see you have set widths for certain elements as well. While this may be necessary in special cases, I would recommend not doing this where you have done it and let widths be a natural 100% and use padding and margins to achieve any space you may need. Using exact heights and widths are not inherently responsive, so using units like percentages, flex, and grid will allow your content to naturally grow in height and width as needed with respect to window size/device size.
In direct response to your question:
In summary, I would suggest ONLY setting exact heights or widths if it is absolutely necessary for something specific, for example, an icon or image that does not need to take up a full width or height, but overall large areas of content you can likely let naturally fill the page with restricting it to any specific height or width unless it is a percentage like 100% or if you have a two column flexbox, you may set each to 50%, etc. Of course, these are my personal opinions, but at all costs, I let my page content flow naturally until I have an absolute need to specifically size something (again, such as an icon or image, etc.). This makes for a more responsive page. If you start setting exact heights and widths for elements all over your page, when you resize your window or look at it on a small device, you are going to have overflow problems and it will become a mess.
I hope that helps! Great job on this project! I look forward to seeing more of your solutions and maybe updates to this one if you wish to make them!
1 - Nicorabi• 10
@Nicorabi
Submitted
Any suggestions, tips etc regarding any part of my code whether it be HTML, CSS and JavaScript will be greatly appreciated. Thanks in advance.
Aaron Varga• 350@digitalherding
Posted
Hello! Nice job on this challenge! Looks great.
A suggestion I have:
- (My project encompassed the same thing before I updated my solution thanks to someone else's comment to me) On your project, if I click "SUBMIT" without making a selection, it still shows the thank you message without a number out of 5. I challenge you to not allow anything to happen unless the user makes an actual selection when clicking submit.
Great work! I look forward to seeing your future solutions!
Marked as helpful
1 - Lamar• 415
@Everezze
Submitted
Aaron Varga• 350@digitalherding
Posted
Hey, nice job! I think it is interesting to try things like this without the quick and modern go-to approach such as grid or flexbox.
I remember when I first started learning HTML/CSS back in 2002, flexbox and grid did not exist yet. We used floats and other ways to establish layouts. We had to. So it is cool to see someone try a challenge without grid and flexbox.
I am curious and wanted to ask what your reason was for doing it without grid or flexbox? If there was a reason in particular, or maybe you just wanted to do it to do it.
Also, I would challenge you to vertically center your article(s)! While it's not necessary, that was often a somewhat tricky thing to do before grid and flexbox existed, for me personally anyways. At least it was not always a straight forward thing to tackle depending on your layout, etc. With grid and flexbox, it is pretty automatic on how to center vertically and horizontally. But maybe you purposely just did not center it. Regardless, I like it!
Thank you and nice job!
Marked as helpful
1 - Kaygp27• 50
@Kaygp27
Submitted
Aaron Varga• 350@digitalherding
Posted
Great job on this challenge!
I don't have any major suggestions.
- If I am being critical though, you could do without your div.container and just utilize the rest as is. The div.container is unnecessary. I used dev tools and deleted your div.container and it all sits the same.
- For accessibility and semantic reasons, I would change your div.grid to a main tag with a class name of grid instead.
- Also, for accessibility, I would include an alt value to your left-side image. I see you included alt but without a value.
- Lastly, I would add these CSS properties to your button.cta so that your icon and button text are vertically aligned centered:
- display: flex;
- flex-direction: row;
- justify-content: center;
Other than those minor suggestions (my own opinions of course), I don't think I can pick it apart any further right now. You did a beautiful job on this one! I look forward to your future project solutions!
Very Respectfully, Aaron V.
Marked as helpful
2 - Raha• 120
@rahimi-1997
Submitted
Hi there!
I am interested in your comments on my code :)
Aaron Varga• 350@digitalherding
Posted
Hey! I love your solution to this challenge! Great job!
One suggestion:
- When you click a rating and submit and then hit "Back to Rating" and hit submit again without selecting a rating, it gives you the same rating you first chose. I would make it reset completely so when you click BAC TO RATING, it requires you to click a new rating again before it allows you to hit submit again. OR, if you leave it, I would keep their original rating selected/highlighted so they know it is still on their original selection. I hope that makes sense! Love it!
3 - Lucas Cerri• 1,020
@llKryptonixll
Submitted
It was a bit complicated to make the mobile pop-up look the way it was intended in the design, in the end I created a second button for the mobile version.
Aaron Varga• 350@digitalherding
Posted
Hey! Great job on this challenge project!
I had the exact situation with the popup menu. I found myself needs to make a second button as well. I could restructure it to line up right and just set the z-index so the original button shows on top when the popup shows, but like you said, in the end I felt it was not worth it to redo things just for that and instead add a second button to show/hide with the mobile menu. I know that sounds lazy and not a great option or thing to say, but I do know I COULD have done it if needed, but I was able to accomplish the challenge requirements overall. You pick and choose your battles and how to tackle them. With this one, I did it up similar to your comments.
Thanks for making me feel less alone on this one!
Marked as helpful
0 @The-BoxHead-Guy
Submitted
What are you most proud of, and what would you do differently next time?
I'd improve my approach on the techniques used in solving the problem
What challenges did you encounter, and how did you overcome them?
Setting up the environment the first time was the most difficult part
What specific areas of your project would you like help with?
None
Aaron Varga• 350@digitalherding
Posted
Hey! I like your take on this challenge. Nice work.
Suggestions regarding your project/code:
- Your div.container has overflow set to hidden. I would avoid this because your body tag CSS is set to height: 100vh. When you do this, if the window's height is too small for the content, the content is cut off and lost. I would remove the overflow: hidden from your div.container.
- When you remove the overflow: hidden from your div.container, you will also need to change your body's CSS property of height: 100vh to min-height: 100vh or else you will get an unwanted gap at the bottom of your page at certain window sizes.
Try these suggestions out yourself if you would like and you should see what I mean. I just went into the dev tools in browser and changed your CSS code to my above suggestions and it solves everything. These are just my personal opinions though!
To your question regarding best approach for creating a website from the beginning:
- You need a design of some kind to code, so design is where things need to start, whether that is conceptualizing the idea, sketching design ideas, creating high fidelity designs, producing prototypes of how the website will interact with the user, user flows, etc. There are many things you can do in the design phases. Some are necessary and some are not depending on how significant the project you are working on is and if you have a team or if you are solo. In a perfect world you want to check all the boxes to ensure you get the best results from your project, but sometimes when it is all you, you do what you can and focus on what you are especially interested in and good at. For example, if front-end development is your interest, yes you need a solid design, but that also doesn't mean you need to create a complete design system, branding, logo, typography, user personas, user flows, and all of the hundreds of design tasks you could put upon yourself. You want to get a solid design, but focus on showing how great your front-end development skills are. You want to be a front-end developer, not a graphic designer, unless that is what you want. I hope that makes sense.
- After you have a solid design to work from, I'd advise you to build the HTML structure either while styling your project with CSS simultaneously or code the HTML structure completely first, then do CSS completely, until you have completed the HTML and CSS for your project. I personally like to code all the HTML first, but when I first started this was hard because I was still learning CSS and if you don't account for certain layout aspects/proper HTML structure for your layout when coding the HTML, you will have to restructure later after doing a bunch of CSS and backpedaling. So, if you are still new to HTML and/or CSS, I recommend going little by little from coding a little HTML to a little CSS and repeat. Upon completing this phase, you will have created the visual appearance of your site and ensure it's responsiveness. Functionality may not exist yet besides minimal/simple functionality like linking pages and CSS state effects. During the HTML and CSS phase, you want to ensure you are using proper code structure and make sure you are keeping it clean, don't repeat yourself, etc. If you aren't careful, your code will get unnecessarily messy, fast.
- Once you have your HTML and CSS complete, I would then start working on the functionality which will come in the way of JavaScript, the actual programming part. This could be where you start manipulating the DOM with event listeners, adding logic and conditions to user actions and interactions, etc. You can do quite a bit during this type of phase. Beyond this phase is likely ending up dipping into back-end development working on the server-side of things.
I hope that helps! Feel free to reach out with any other questions. I'm always up for offering up what I know to whoever needs it.
Great job!
Marked as helpful
2- Valery• 90
@Koptelkin
Submitted
Waiting for any feedback to my css-positioning
Aaron Varga• 350@digitalherding
Posted
Hello! Great job on this challenge!
I see you are requesting feedback on your CSS positioning.
Your "margin: 0 auto" nicely sets your component center horizontally, but it does not solve your vertical alignment/positioning. There are multiple ways to achieve a vertical and horizontal center alignment, but below is one way I would suggest to tackle this.
Some suggestions I have are:
- You don't actually need your div.container. It is an unnecessary additional element you can achieve everything you need without your content nested inside that.
- If you remove your div.container and set your div.wrapper to "max-width: 270px" instead of "width: 270px", which is not completely necessary, but I do like the practice of using max-width to allow your content to close up further if necessary even though this component is already small, there are very few if any devices today that are going to be as small as 270px wide, I still like to use it over width because I try not to set things to fixed widths or heights to allow content to flow, but this is not a major necessary change, personal preference.
- I'd give your body CSS properties of: "display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 2rem); [calc with your 100 vertical height minus 2rem offsets the padding added for a true 100vh] and padding: 1rem; just for some space around your component in case the window becomes small and close to the component's edges, I think this is a nice and clean way to position it perfectly center both horizontally and vertically.
I hope this helps!
Let me know if you need any further info on what I suggested or anything else otherwise!
Happy coding!
Marked as helpful
0 - Paul Ryan• 190
@Gunner40
Submitted
Aaron Varga• 350@digitalherding
Posted
Great job on this challenge!
I don't see any significant issues or have many suggestions except for:
- At 1299px wide and smaller, your project starts to show a white blank area at the very bottom of the page in you body. Setting "min-height: 100vh" on your <main> will fix this.
- If I am being critical, I might also suggest adding some padding or margins to your body/main respectively so the content area is not right against the top/bottom of the page on mobile version.
I like how you used the <picture> tag for image queries for desktop vs mobile.
I look forward to seeing more completed challenges from you!
Marked as helpful
0 - Konrad Mirosławski• 120
@Kony1994
Submitted
Aaron Varga• 350@digitalherding
Posted
Great job on completing this project!
I read your bio and saw you are mostly focused on JS, but if it is okay, I have a few suggestions regarding your HTML/CSS for this project:
- I don't see a mobile version/responsive queries for resize/small devices. I challenge you to look into @media queries for screen size adjustments and to complete the mobile view of this project!
- I would remove your box-shadow and let the content fill the page more without the background patterns being restricted for a more natural flow. Let the page be your box-shadow contained area if you get what I mean.
- The background image(s) are overlapping and sitting a little too close together. I would try setting them to the left and top and the other right bottom. Use background-position CSS property to situate the background images further if you would like!
These are just my opinions of course! Again, great job and keep it up! Let me know if I can be of further help should you feel you need it!
0 - Yan Felipe• 10
@Yanfelipe9
Submitted
Ensuring that the project looks and functions well on various screen sizes and devices was a bit challenging.
What are the best practices for securing user data when handling submissions in a production environment?
When it comes to responsive design, what are some of the best practices for ensuring that a web application is accessible and user-friendly on a wide range of devices and screen sizes?
Aaron Varga• 350@digitalherding
Posted
Hello!
First and foremost, nice job!
A few suggestions I have:
- I would set a "min-height" of 100vh on your form element instead of "height" because if you look when the screen becomes small, you get a white space at the bottom of your page. I see it when I open the dev tools and the screen becomes smaller height wise. Maybe add some padding as well so the card has space at all times even if the window is small/resized. Just a personal preference on the padding.
- Your star icon is a little wider than it is tall. Try retooling that to be exact 1:1 ratio in dimension so it is a perfect circle.
- As with mine initially, you can just hit submit and get a blank number out of 5. I challenge you to add a catch if the user tries to hit submit before making a number selection.
Solid work! I hope my feedback is helpful! Keep it up!
0 - Aaron Varga• 350
@digitalherding
Submitted
-
I found the background SVG's to be difficult to get right regarding their positions as the window scales/resizes. I was able to set them correctly, but they get out of whack when the window sizes down to mobile. After researching for other solutions/ways of achieving the background image's proper positions, I realize simply positioning them absolute directly into the HTML rather than in the CSS property for an element may be the way to go.
-
I am unsure of how to keep the background SVG's in proper place as the screen resizes. Will try simple absolute positioning rather than CSS property route (aka background-image with multiple images and background color at once).
-
What is the best practice for multiple SVG background images in regards to scaling windows and keeping them in proper place no matter what size the window is? Is it to just position them absolute?
Aaron Varga• 350@digitalherding
Posted
After looking at other's solutions, I realized many just positioned them absolute and not as an actual multi-background-image in CSS like I initially did.
I will likely remove the background-image in the CSS and just add them to the DOM as position: absolute;. This appears straight forward and simple this way. My aim initially was to make it work with the background-image CSS property with multiple backgrounds, but this seems overly complicated and may not be a best practice for this particular instance.
Again, I always welcome feedback, so if you have any thoughts or comments on this, please post them! Thanks!
0 -
