All solutions

Feedback welcome :)

I enjoyed this one. Simple, yet filled with enough areas for problem solving to make me think a little.

I know my code can always be cleaner and more efficient, so I will be coming back to all my projects periodically for code audits and reviews/revisions.

No questions at this time, but please feel free to leave me feedback! I won't get upset at honest feedback that is critical. Let me have it!

• Just the normal flow and patience of matching spacing and sizing of elements. The challenge was pretty straight forward. I used a grid with flexbox to achieve the layout.
• I am pretty sure of all my code. If you have feedback on how to best situate the background image for both desktop and mobile though, please feel free to send it my way!
• No questions at this time.

• So, I have not used JS with regard to window size due to normally being able to do this with CSS, but with this project, I felt it was necessary to meet the goals of the challenge. After the fact, I do believe I could have used flexbox with "order" CSS property or grid with similar to reconfigure where the error message showed up, but I continued on with JS and adding second mobile error message element to hide/show depending on the width of the screen. There are always multiple ways of tackling a project and elements of a project and I may do it differently in the future, but I was okay with testing my JS skills here even if some may say it was doable with CSS.
• Besides the above, I am sure of my code most everywhere else. No major/catastrophic concerns.
• No questions at this time!

• I had no difficulty with this project.
• I am not unsure of my code in any areas.
• No questions at this time.

Feedback is always welcome! :)

• No difficulties to report while completing this challenge.
• I am sure the error handling with JS could be done differently and I know I could add even more validation with max characters, special characters, etc., but overall I am really happy with this project and believe it meets all challenge requirements and exceeds them too.
• No questions at this time.

Feedback always welcome!

• It had been a little while since I did any JS form validation/error catching. I had to do some quick research to refresh myself on how to properly handle form validation and error handling, but it was a lot of fun. I'm sure my way is not best practice, but it passed my tests so far. With JS, I set the form that if the user either does not enter anything or the user enters something, but it does not include the "@" sign it will throw an error in the DOM. Otherwise, it will send a success message.
• I feel I have accomplished the challenge/project goals. I don't really feel unsure about any of my code, but as I ALWAYS say, feedback is welcomed and appreciated!
• I have no questions at this time!

• Nothing super difficult. I knew how I wanted to tackle the code. Sizing everything to be exactly like the design took the longest.
• Not unsure of any of my code at this time.
• No questions at this time.

Feedback is always welcome!

• I found the swap for the popup social share menu from desktop to mobile to be a little tricky for me. I tried a couple ways that worked, but still felt I could obtain a better result with better structure. I will likely revisit this project and revise my code a little for that specific area.
• I am not convinced my mobile social nav popup is the best it could be. I will revisit this area and update my project, but I did accomplish the goals of the challenge. I am just a perfectionist and want/need things to be perfect.
• Maybe you can share with me how you think it is best to structure the mobile social share popup menu area? Thank you!

• I don't believe I had much difficulty with this project. Everything felt like it went smooth and was straight forward. Please comment if you feel I could have done something better!

• I feel sure of all my code at this point.

• No questions at this time.

• I found situating the 3 layers of images a bit tricky at first, but after playing around and testing out the best options with the best results, it became a lot more clear for me.

• I believe I am sure of all my code at this point. If you see anything you have suggestions on, please don't hesitate to reach out and drop me a comment about it. It would be greatly appreciated.

• I would just ask you all if how I situated my images is the best practice way. Again, any and all comments and feedback is appreciated and welcome!

Oh, I did it without JS as well.

• 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?

• No major difficulties.

• I am not unsure of any areas of my code.

• I don't have any questions at this time.

• I found nothing too difficult besides making sure the design specs match without the PRO plan on this site with no design assets other than static images.

• Not unsure of my code anywhere.

• No questions as of right now.

Feedback is always welcome and appreciated!

• No difficulties.

• Not unsure of any code.

• I don't have any questions regarding best practices at this time.

Feedback is always welcome!

• Well...lol, the hover for the main top image with view icon gave me some struggles for some reason. I have been looking at the computer screen all day and think I just got a little out of sorts, but I danced around how I wanted to make that hover happen. I finally did it a way I felt was easiest for me personally. I tried many ways. I will leave it at that!

• I am fairly sure of all my code. Once I completed this project/challenge, I felt a-o-kay about my code! As always, let me know if you have any suggestions! Feedback is always welcome!

• Please feel free to share your best practices for this challenge if I did not already use them. I was able to achieve a hover/overlay many different ways, so if one way in particular is best, please share with me that way and why it is best!

• When building this project, I found that possibly this typeface/font requested for use was setting oddly high and to counter this, I had to add a margin-top. I usually never have this issue because I know how to use flexbox and grid with align-items: center and justify-content: center, etc., which is why I believe specifically the way this project's font is set within the typeface is why this was an unusual issue. It was not hard to counter/fix, but it was noticeable. With me being a perfectionist, I had to correct this issue, even if it was a small one.

• I am still refreshing and advancing my JS skills, so quite possibly there are better ways to do what I did regarding my JS code, but I kept it simple. Simple does not always mean less code, I know!

• If you have a better, more condensed way of doing the JS portion of this challenge, please share it with me! JS is what I am currently learning in more advanced ways. It will be appreciated! (Or confirm what I did was appropriate!)

• No difficulty throughout this project. I felt comfortable with this challenge.

• No unsure areas of code. I feel sure of my code. Please feel free to provide me with feedback if you see anything you'd do differently though!

• I have no questions about best practices at this time, but, again, please feel free to provide me with feedback if you have suggestions on better practices than what I have done here in this project challenge!

• I did not find anything too difficult with this project. I had to pay special attention to the lightness/opacity of colors for certain areas of the project, but did not have trouble achieving the goal.

• There are always many ways to achieve what you are looking for with HTML/CSS. Some ways are better than others, but I believe I feel sure of my entire project and code, that it has achieved the desired final result and presentation.

• I always strive to use the best practices for code, but I am also always open to feedback as well. I am never perfect and nobody is. Feel free to drop me a comment! It is appreciated!

Side note: I will look to update my project at a later time to properly pull data from the json file included, but decided to forego that initially and not because it is hard or that I don't know how to do it, but I just wanted to focus on the html/css for right now. I love json data and have used it quite a bit in my html, css, and js projects. I look forward to incorporating it into this project very soon!

I have been designing and developing for the web for a solid decade plus, but still stumble from time to time and always know I need to keep my front-end development skills sharp and up to date.

• The one thing I realized was when I set my height for the body to 100vh, when the window height got small enough, it would start cutting off the top content more and more as the screen height got smaller and smaller. I realized I needed to set the height of the body as "min-height: 100vh" instead of "height: 100vh;" to avoid this. I don't use 100vh all the time and often will find little things like this I am not used to working with which is great for things that slip my mind over time if I'm not doing them such as this.

• I am just about 100% sure of all the code I wrote for this small project. You can tell me otherwise if I am wrong in the comments!

• If you have any suggestions on my code/project on using better practices than what I used, please don't hesitate to let me know! I always strive to learn from others and it is appreciated. Feedback is always welcomed!