Picko – A business site #369
Conversation
There was a problem hiding this comment.
Wow, you've done an amazing job with this project! 🎉 Your code is well-organized, and you've clearly put a lot of thought into making it responsive, functional and look nice. It's great to see you experimenting with JavaScript as well 🥳
HTML
- Well structured HTML overall, with semantic elements.
- One small thing to note: You’ve used a non-standard quotation mark in one of your
<link>tags:
<link rel=”mask-icon” href=”./assets/favicon.svg” color=”#000000">
The correct quotation marks should be the standard double quotes ("). It's a minor issue but worth fixing to avoid any potential browser inconsistencies.
CSS
- Nice usage of CSS variables ⭐
- You've used classes effectively to apply styles and kept the rules DRY (Don't Repeat Yourself).
Keep up the great work! I'm looking forward to seeing how your coding evolves with more projects. 🚀
| width="120" | ||
| height="35" |
There was a problem hiding this comment.
Keep the styling to the CSS file 👀
|
Thank you so much @HIPPIEKICK 🙏 Regarding the width and height in the HTML on the images I actually added that after doing a Lighthouse inspection of my finished project. It suggested to always add width and height to images to avoid layout shifts 😅 |
| <!-- dont forget to add a css file and link it here! --> | ||
| <title>Picko — When you like to move it, move it</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
There was a problem hiding this comment.
Your code is clear and clean and it was extremely hard to find anything to pick on but I had a try :'). Firstly, the inclusion of fonts using tags is a really good idea and with the use of "preconnect" it should improve performance by reducing latency for external resources - very nice!
| loop | ||
| preload="auto" | ||
| poster="./assets/video-poster.jpg" | ||
| > |
There was a problem hiding this comment.
The use of a video background adds a cool touch to the hero section. You have included in video element attributes (muted, plays inline, autoplay, loop) for smooth functionality - but I read that maybe a controls attribute might be a good fallback option in case autoplay fails.
There was a problem hiding this comment.
Thank you Kelly, I'll look into that 🙏
| justify-content: center; | ||
| width: 1.5rem; | ||
| height: 100%; | ||
| background: url('./assets/icon-error.svg') center no-repeat; |
There was a problem hiding this comment.
Read that the label:has() CSS selector is a good use for validation, but this may have limited browser support (e.g., only supported in Safari currently). Read it in this stack overflow post: https://stackoverflow.com/questions/35993727/not-selector-not-behaving-the-same-between-safari-and-chrome-firefox
There was a problem hiding this comment.
I looked into it and using this website you can check how well supported a selector is as of today:
https://caniuse.com/?search=has
The Stack overflow thread is 8 years old so a lot has happened since then 🙂
|
|
||
| const header = document.querySelector(".page-header"); | ||
| window.addEventListener("scroll", () => { | ||
| header.classList.toggle("is-scrolled", window.scrollY > 100); |
There was a problem hiding this comment.
Just want to say you're an inspiration for learning so quickly everything and trying new things - this whole (js) part is still an alien world to me but interesting to read!
Hopefully, I provided at least something new for you to look at but overall everything seems so good! <3
There was a problem hiding this comment.
Thank you so much Kelly! 🤗 I assure you that I also find JavaScript challenging 😅 I got some help from ChatGPT for this project.
I set out to create a hero section with a video background with a sign up incorporated within. As a bonus I also added a section underneath with ads and a filtering option on categories.
Additionally I added a hamburger menu that can be opened and closed. The JavaScript I have added was written with the help of ChatGPT. I provided it with my markup and what I wanted to achieve.
If I had more time I would have looked into creating a custom select dropdown so that I could style the options as well.
I've also explored using CSS Nesting since it newly became a baseline feature of CSS.
See it live: https://picko.netlify.app/