Submitted
Hello I will be appreciated if you guys can skim through the code and live site for any feedback. I used plain HTML, CSS and vanilla JavaScript for this project.
Difficulties:
-
What is the best practice for using svg? I used both <svg> tag and <img> tag for svg files because I had some trouble working with them on JavaScript and CSS.
-
Would you say what I did in JavaScript to traverse DOM and to set EventListeners a clean and effective code? I feel like I could've refactor what I did in EventListeners into separate functions but did not quite know exactly how.
-
I also struggled with the two responsive hero image. I assumed I was supposed to use srcset in html to tell the browser which image to go for depending on the size of the viewport. But I still couldn't make it as intended even after reading some documentation of srcset on MDN.
-
For mobile view, I have 2 article within a section (on main) where I put display: flex on the section and gave flex: 0.5 on each article to give them 50% 50% separation. But it didn't work and I wonder why that is..? You can see that on the front page in mobile view where the hero image takes up about 60~70% of the viewport whereas the other half article takes about 30~40% of the viewport.
-
If I missed any functionality or if there could be better way of doing things in HTML, CSS, JavaScript, please let me know!! Thank you!