@samuel-adu
Latest comments
- @mandrisic
the solution looks great but you had a free figma template that explained all the sizes, padding, fonts etc., and it would have really helped you while solving this project.
some quick fixes that i also saw:
- i saw in some of your headlines you had a weird font and you could solve that problem with defining the font-weight
- when navigating in the mobile nav you didn't have the emphasis on which page the user is on (like you have on the desktop version, ::after)
- there are no smooth animations and transitions
these are just smaller things that could make your project better and if you get stuck in the project there is also a free video of this project
- @Dadv-a11y@mandrisic
this solution needs a lot of work. the mobile version was much better than the desktop. you should try and stick with the given design of the task (use the same font, try to get the right size of elements, paddings and margins etc). also, you should have an accordion that opens its description by also clicking the title (summary) of the question, not just by clicking the arrows. also it would be good if you would connect the nav elements features, pricing and contact with the correct sections, so that when user clicks on features in the navbar (the hamburger closes in the mobile version), it takes him to the features section on the webpage. it's easy to do and add it to the code.
Marked as helpful - @Dadv-a11y@mandrisic
you should try and make the style of your page be as close to the design preview images, as much as you can. also the transition of each slide changing looks a bit jarring because the arrows move as well, and only images and text should change. it would be better to just use a smoothe fade in transition. i also noticed that if i am on the slide 1 and click on the left arrow nothing happens, which means you didn't do the logic correctly. i looked at your js file and saw you used loops and conditions, but there's a much easier way to do all this. look at some of the other solutions of this task other people did and compare your design with theirs. you would then be able to see the mistakes more clearly.
- @craigwolfeWhat are you most proud of, and what would you do differently next time?
I would have to say I am most proud of figuring out the JavaScript. Understanding how to use forEach loops, swap images and use addEventListeners.
document.addEventListener('DOMContentLoaded', () => { const questions = document.querySelectorAll('.question'); questions.forEach((question, index) => { const answer = document.getElementById(`answer${index + 1}`); const icon = question.querySelector('.toggle-icon'); //hide all answers on load const toggleAnswer = () => { if (answer.style.display === 'none') { answer.style.display = 'block'; icon.src = 'https://github.com/myname/FAQ-Accordion/blob/main/assets/images/icon-minus.svg'; // Change to minus icon } else { answer.style.display = 'none'; icon.src = 'https://github.com/myname/FAQ-Accordion/blob/main/assets/images/icon-plus.svg'; // Change to plus icon } }; //swaps the icon and shows the answer when clicked question.addEventListener('click', toggleAnswer); //enter is pressed on the question the answer will toggle question.addEventListener('keydown', (event) => { if (event.key === 'Enter') { toggleAnswer(); } }); }); }); ### What challenges did you encounter, and how did you overcome them? One challenge I had was the path for swapping images in JavaScript will not display the images correctly in GitHub Pages. I had to retrieve the absolute path GitHub and use that in the JavaScript to get the images to render correctly. ### What specific areas of your project would you like help with? I think I figured out everything I needed to on my own with internet resources.@mandrisicactually you shouldn't have used javascript at all for this project, beacuse the challenge was to create an accordion with HTML nad CSS. it's best to use only HTML and CSS when you can, you just complicated everything for yourself
- @AlfiZainWhat are you most proud of, and what would you do differently next time?
Implementing SMACSS Methodology
What challenges did you encounter, and how did you overcome them?Implementing SMACSS Methodology
What specific areas of your project would you like help with?Everything
@mandrisicwhen i tried to open your hamburger menu an error showed up in the console so you should check that out. it all works how it should, the only tip that i can give you is to try and get the page as close to the design as you can. i find it helpful to zoom design pictures to be the same width as my screen, so it's easier to structure the layout.
- P@moustafaessamWhat are you most proud of, and what would you do differently next time?
I used vanilla framework for css styling.
What challenges did you encounter, and how did you overcome them?I encountered some challenges regarding styling using vanilla framework but reading the documentation helped me
What specific areas of your project would you like help with?Any comment will be highly appreciated!
@mandrisicit looks good but i have some tips:
- avoid using !important, here it really isn't hard to align content with flex or whatever else you choose to make it go to the 'left'
- use tags that already carry semantic meaning like <h1></h1>, instead of <div></div>
