Submitted
Social links profile
- HTML
- CSS
@avinno
Submitted
Submitted
Submitted
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!
Submitted
Submitted
Submitted
Feedback is always welcome! :)
Submitted
Feedback always welcome!
Submitted
Submitted
Feedback is always welcome!
Submitted
Submitted
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.
Submitted
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.
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?
Submitted
No major difficulties.
I am not unsure of any areas of my code.
I don't have any questions at this time.
Submitted
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!
Submitted
No difficulties.
Not unsure of any code.
I don't have any questions regarding best practices at this time.
Feedback is always welcome!
Submitted
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!
Submitted
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!)
Submitted
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!
Submitted
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!
Submitted
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!