Frontend Mentor | Hazel Dotson's profile

Cas•220

@iguanasplitSubmitted about 2 months ago

What challenges did you encounter, and how did you overcome them?

i wasn't sure how to handle or deal with the height measurements. or in what of the containers it was appropriate to stablish a semi-fixed height.

What specific areas of your project would you like help with?

is the box height used appropriately? is it better to stablish a fixed height based on the viewport height? is it better to stablish the height in one of the tags like or or should i put it within a container?

Huddle landing page with single introductory section solution

3

Hazel Dotson•300

@Hazel-BlackPosted about 2 months ago

Hey Cas! So Yes there are lots of improvements to be made but I think its great that you are getting back into this and trying. I took a long break from coding as well but it feels amazing to be back😊. Anyways, I said all that to say I'd love to work with you. I'm not an expert but I can help you ease back into coding and we can learn together. I'm hazelbdev on discord. feel free to reach out.

1

bleubertoncodes .•20

@bleubertoncodesSubmitted about 2 months ago

What are you most proud of, and what would you do differently next time?

As someone who is starting the journey into Web Dev, I am extremely proud of the outcome of this challenge. I a most proud of that I executed the challenge and used github for the first time successfully! Next time I would focus on one section of the challenge at a time (top to bottom) instead of all together.

What challenges did you encounter, and how did you overcome them?

The biggest challenge I had was how to push my footer to the bottom while keeping the card component centered. I researched and used MDN for guidance and realized that I could achieve the results I wanted by using margin.

What specific areas of your project would you like help with?

This is the first project I have completed aside from my learning and would like some honest feedback about my execution of the challenge (html and CSS) as well as my README.md (first time using one).

Frontend Mentor | QR code component

1

Hazel Dotson•300

@Hazel-BlackPosted about 2 months ago

Wow! you did an amazing job way to go!! Just took a look at your code and here is the one thing I noticed at first glance. In the HTML you always want to start your heading levels at h1 for semantic reasons. you can always change the styling of the h1 tag in your css but it is good practice to start with h1 and work your way down.

Other then that you did an amazing job. You also laid out your README.md very well just don't forget to add your links on there or delete that section if you don't plan to add them.

0

Fatma Tawfeek•110

@Fatma-TawfeekSubmitted about 2 months ago

What are you most proud of, and what would you do differently next time?

proud of using DOM manipulation and JS

What challenges did you encounter, and how did you overcome them?

Changing the colour of the share icon when clicking on it because it is an SVG icon
I put SVG element in html instead of using element and change the value of "fill" attribute with setAttribute

What specific areas of your project would you like help with?

I didn't know how to handle the design in tablet screens because i don't have the design of tablet

Article preview component

1

Hazel Dotson•300

@Hazel-BlackPosted about 2 months ago

Hi Fatma! As far as the tablet sizes go I usually just use my best judgement since we aren't given clear instruction on what to do for those sizes. Something that makes responsive designs more seamless is working Mobile First. So in your case instead of having a media query that has a max width of 600 px you should first code the mobile version and then create a media query with a min-width of 601px. ( I usually just set my min-width to 1000-1400 depending on the project.) Im not an expert but I'm always an open book so if you have any other questions feel free to message me on the discord (hazelbdev) . Also I'm struggling to learn JavaScript lol and I think we could learn a lot from each other so if your open to doing a project together let me know. Overall I think you did a great job with this project. Keep up the amazing work!!

Marked as helpful

1

Brian Ortego•10

@BrianOrtego91Submitted about 2 months ago

What are you most proud of, and what would you do differently next time?

I'm must proud that I didn't have to use any pixels and that i also learned how to make variables and custom classes. I feel like I overused flexbox and made it more complicated then needed to be.

What challenges did you encounter, and how did you overcome them?

I had an issue with the width not leaving a gap on the mobile device, I used google and found that I needed to use min-height instead of max-height.

What specific areas of your project would you like help with?

I would love help with height and width's, I feel like I use them to much.

QR Code Component using flexbox

3

Hazel Dotson•300

@Hazel-BlackPosted about 2 months ago

Hey so a lot of times instead of using width and height I use padding. It can be a bit more convenient to use in certain cases. I’m not an expert but I’d say when in doubt, start with padding first😊. Also I’m here to help if you have any other questions or just want tips and tricks that I’ve learned along the way. You can reach out via discord (hazelbdev) if you want. Good luck on your coding journey ✨

0

Vinh Phu•10

@vinhphuphanSubmitted over 1 year ago

The color code and the summary part are difficult to me.
Set up the HTML is quite ok but style css is challenging.
Responsive layout is hard too.
Linking HTML element together to style them all at once is hard too.

Responsive results summary component challenge using HTML and CSS

1

Hazel Dotson•300

@Hazel-BlackPosted over 1 year ago

This is amazing keep up the great work!

0

Martin Kutzner•550

@mfkutzSubmitted almost 2 years ago

I have doubts about the background of the screen, I think the colors it brings are different from the one in the challenge photo, so I put a shadow on the box to make it stand out.

Order Summary

3

Hazel Dotson•300

@Hazel-BlackPosted almost 2 years ago

The only issue I can see (just off fist glance ) is you forgot to add a background color to the body. I did this challenge a while back and the background-color for the body should be hsl(225, 100%, 94%);. I did the project very early into my learning process but here is the code if you want to take a look. https://github.com/Hazel-Black/Order-Summary

Marked as helpful

0

Shubh Patel•110

@ShubhPatel06Submitted almost 2 years ago

I found it difficult to implement the hover part for the image. What is the best way to do it? And how can the hover color be changed?

NFT preview card component using HTML and CSS

1

Hazel Dotson•300

@Hazel-BlackPosted almost 2 years ago

This was very difficult for me as well what I did to get the color change was create 2 div's one serving as a parent to the div containing the SVG. for the parent div I used the css property background-image to place the hero image. for the child div ( which contained the SVG ) i gave it a back-ground color and change the opacity of the color by adding 0.534 to the hsl value. then I set the child to match the width and height of the parent and gave it an opacity of 0, finally i used the hover pseudo class on the child to return its opacity to 1.

I really hope all that makes since if not slack me I'm happy to work through it with you :D

Marked as helpful

0

Martin Kutzner•550

@mfkutzSubmitted almost 2 years ago

The hover and transparency part really beat me, I tried everything but nothing worked correctly, if anyone comes up with something I'd appreciate it :D

NFT Preview

2

Hazel Dotson•300

@Hazel-BlackPosted almost 2 years ago

Hey love! I hope this helps, I just finished this and the hover was very difficult for me too. The way I resolved this was by adding an opacity to the color itself and using opacity 0 on the div that contained the SVG and then using opacity 1 when targeting that same div with the pseudo class of Hover. I feel like that might be a bit confusing if your very new feel free to direct message me on slack if you need help or would like me to demo it for you.

Marked as helpful

0

Ewelina•220

@rondelekSubmitted over 2 years ago

QR code: CSS, HTML

1

Hazel Dotson•300

@Hazel-BlackPosted over 2 years ago

Hey! I would love to chat about code and maybe even work together on future projects. if your up for this find me in the slack channel: Hazel Black

0

Hazel Dotson•300

@Hazel-BlackSubmitted over 2 years ago

This was a team effort by me and @michealhybrid we would both love any and all feedback

Responsive| Mobile First| HTML|CSS

6

Hazel Dotson•300

@Hazel-BlackPosted over 2 years ago

Thank you so much for the feedback we both really appreciate it I'll have to make these changes tomorrow as it is very late for me. Also I'm going to @ him so he can see this and reply inorder for you to view his front-end mentor page @Michaelhybrid

0