I have solved this challenge before using vanilla JS. This is my solution using React
However, there is a bug in my code. When the page is first loaded , and with the first click on any question, the question toggles correctly. But after that, I need to click twice on each question to toggle and I don't know why !!.
My code is not good for such simple functionality. I would apprecicate feedback on how to fix the bug and improve my code.
Thank.
UPDATE
I have fixed the problem in my code. Its working fine now.
Hello everyone 👋, I'm Mohammed and this is my solution to this nice challenge.
This challenge was very easy to solve. FAQ is a very common component of lots of web pages and this challenge is very good to make you ready and gain the required skills.
Box shadow is still a problem for me. I can't figure out how to match the design😢
I will briefly talk about my current process of solving FEM challenges and I hope it will help and inspire other beginners (like me 😊). To make this process actionable so others can follow, I will list the steps I take to solve the challenge-
1- I download the challenge resource file and extract it in a special folder so I can use it in the future if needed without having to re-download it again.
2- After the files were extracted, I read about the requirements to solve the challenge.
3- After reading the requirements, I open the design folder to see the final product both for mobile and desktop screens. I also take note of the number of active state elements so I don't forget to do it while solving the main challenge.
4- After I see both photos for screen designs, I take some notes on how best to do the HTML markup and how to structure the elements in the page. This is a very very important issue and help in later steps. I pick up the best semantic tags which serve the purpose of the content.
5- I then create CSS styling and Javascript files, link them to the HTML file, initialize a new git repo, and make an initial commit on the master branch.
6- Then I do the actual markup of all texts in the challenge file for mobile screens. for example, if a text is best displayed as an H1 tag, I wrap the text in h1 tag using a shortcut in VScode, etc.. I also add images and icons at this stage. then I create a new git branch for mobile design before I start styling.
Note: I always do mobile-first solution and don't combine mobile and desktop styling at the same stage.
7- After I finish the markup stage, I go to the styling stage targeting mobile screens. I use a live server on VScode, go live and open the page in my Chrome, then use the Pixel perfect extension to load the design file for the mobile screen as an overlay on top of my actual page. I make sure the overlay image is exactly 100% on top of my HTML page. I make sure I choose the right screen resolution which is 375px.
8- At this stage, I use the Responsively app to see how the page will look like on different screen sizes. I usually have the following screen sizes opened at the same time:
9- After I finish the mobile screen design, I commit all changes, check to master branch, then merge the mobile-design branch with the master branch.
10- I then create a new branch for desktop design, load the design image as an overlay on Chrome using the extension, and start coding on a custom screen size of 1440px I created for this purpose.
11- I repeat step 9 with the desktop branch. Then I create a new branch to style active state elements and I repeat step 9 after I finish all requirements.
Note: I will add a new git branch in the future for accessibility, SEO, and performance so I improve this area also.
12- I move to the Javascript part of the challenge after I create a new git branch for it.
13- After I solve the Javascript part, I commit and merge into the master branch and my solution is ready for deployment.
14- I do final checks to make sure all things are working as they should, then I deploy to Netlify.
15- I then upload my solution to FEM website
This is a brief process overview I developed over time. I know it’s not perfect for sure but it's a good start for a beginner like me with big room for improvement in the future.
This process does not take into account frameworks or libraries I might use in my solution. In case I did use such frameworks (like Tailwindcss for example), I install them at the initial stage.
I love to hear from you. Please let me know how can I improve my process OR share your process so we all benefit from each others.
Built with 🛠
What I learned
Continued development
Useful resources
Author
UPDATE.
I have solved the challenge again using React. However, there is a bug in my code.
When the page first loads, and with first click , the question toggles correctly. But after that, I need to click twice on each question to toggle.
I also feel my code is not perfect and could be done better. I would appreciate any feedback on my solution.
Thanks
Hey guys!
Thank you for being here! This is my second challenge and i'm really proud. This is my first coding a mobile-first on my own !
I studied a lot to try be more independent in projects, but i know the importance of work in a team and ask for help.
Anyways, hope you enjoy!
Waiting your feedbacks!
Hi Vanessa,
Congratulations on completing your second project. Excellent job. Here are some remarks which I hope you found helpful:
HTML
ul to 'ol' ;<ul class="instructions__list">
As this is an ordered list , the ol should be used.
For alt text related to images inside HTML , and as per W3C website , you should avoid "Superfluous information in the text alternative. Usually, there’s no need to include words like “image”, “icon”, or “picture” in the alt text. People who can see will know this already, and screen readers announce the presence of an image".
The last row in the Nutrition section table should not have a border bottom. You have to remove the border-bottom by using .nutrition__table tr::last-child selector and assign value none to border-bottom
CSS
The main container should be a little wider. This affects some content and causes extra lines for some p elements like the one under h1 tag. Instead of 2 lines like the design, your paragraph spans into 4 lines.
For responsiveness, you said in a reply to one comment the following :
"I used 1440px cause was the number in the guide styler!"
When I started learning about responsiveness, and start doing FEM challenges here, I got confused just like you about the two designs ( 375 & 1440px) which appear in all challenges style guides.
The design folder for all challenges is shipped with at least 2 photos :
1- For mobile devices ( width is 375px).
2- For desktop computers ( width is 1440px).
However, your solution should be responsive even for devices that fall between these 2 sizes like 500px, 800px, and 1200px.
These 2 designs are working as a guide for you on how the mobile design should look like and how the desktop design should look like.
For example, in this challenge, The image on top should take full width (100%) on mobile devices. So you should make your design considering this and set a breakpoint as to where to break into desktop design.
If we check your solution again , try to view the design on 799px using dev tools in chrome, then go up to 800px where you set a breakpoint for desktop design.
You will see a big photo until 799px then a small container when you switch to desktop design( you set it max @ 35% of screen width). Sô, here is a problem. The screen is 800px and the container is only 35% wide of the screen which is very small.
So, To code it right, whenever you break into the desktop design, the page should look like the same one provided in the design folder for desktop view.
I hope it's clear now for you.
.table__infos {
font-family: var(--secondary-font);
color: var(--wenge-brown);
/* font-size: 16px; */
/* font-weight: 400; */
}
When you finish styling, try to clean up your CSS files by removing all declarations which have no effect.
Best of Luck and keep coding.
Regards,
MKF
Hi Nouran,
Congratulations on completing the challenge. Here are some notes which I hope you find helpful in improving your code :
HTML
main instead of div. When you create a web HTML page, you are authoring a document that should convey a meaning. So always think semantically and check what content each part of the document contains and choose the semantic element accordingly. Here are a few examples to make this clear ;1- use the main tag for the main part of the document instead of div. A main landmark identifies the primary content of the page. You can read more on main tag here
2- use the time tag when your document contains a date/time.
3- use the abbr tag for any abbreviations like HTML & CSS in your document.
CSS
-For mobile view @ (375px), there will be no margin from the right/left of the card. This is because you set a fixed width for the card(375px). The width should be less than 375px for mobile design so the card will have the required space from right/left. When you reduce the width to say 334px , the image needs to have width:100% so it does not get outside of the card.
Keep coding and good luck.
MKF
Hi Tringa,
Congratulations on completing the challenge. Here are some notes which I hope you find helpful in improving your code :
HTML
main instead of div. When you create a web HTML page , you are authoring a document that should convey a meaning. So always think semantically and check what content each part of the document cotnain and choose semantic element accordingly. Here are few examples to make this clear ;1- use main tag for the main part of the document instead of div
2- use the time tag when your document contains a date/time.
3- use abbr tag for any abbreviations like HTML & CSS in your document.
aria-label, you still have to use the alt attribute. An aria attribute can be used as an additional text alternative but doesn't replace the requirement for an alt attribute.CSS
For the font family, you have imported the font from Google and also used the locally hosted font in the assets folder. One should be enough unless you did this intentionally.
For font-weight , I can see you have used bold which is equal to 700. You also used 900. The requirement is to use 600,800 only.
The styling for body tag is overcomplicated and I guess you should consider re write it again. Here is a very simple and straightforward styling for the body tag if you want to place content in the middle of the page :
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
-For mobile view (375px), the h1 content breaks into new line. Reduce the font-size used for mobile view.
Keep coding and best of luck.
MKF
Hello @Madeline0421,
Great job. Your solution looks identical to the design. Amazing. Here are some notes which I hope will help you in your next challenge ;
The font used in this challenge is provided to you with resources files. While it is okay to get the font from Google Fonts or any other provider, try to use locally hosted fonts.
use the @font-face declaration for this purpose. Here is a great resource for best practices related to fonts web.dev.
Also, the requirement is to use 600,800 weight only but you include all from 300 up to 800.
To reset the margin, it's better to do it on the root element thus you don't need to write margin: 0; under html, body,h1, and p tags. The reset usually looks like this :
* {
margin:0;
}
This will reset the margin for all elements on the page which is what we want usually.
Use the footer semantic tag for attribution instead of div and don't include it under the main tag as it is not part of the main content.
You have aligned .card div items in the center despite the content of the page being on the left !!!!!. Think about alignment always before you align everything in the center. Remove this line from your CSS and everything will be aligned correctly to the left😀:
align-items: center;
There is no need to do align-self: start; for 3 or 4 elements to get them back to left
Avoid setting fixed width and height for main contents like .card. View your solution on mobile and you will find it is not responsive. I did not see any line in your CSS for media queries. Never mind if you are still learning - just get into it and you will love it at the end once you understand it.
flex direction is row by default. No need to include flex-direction: row; when you want flex row.
For the date inside the card , its better to wrap it like this :
<p>
Published
<time datetime="2023-12-21"> 21 Dec 2023</time>
</p>
Make only the date/time part of the time tag
You forgot to apply the hover state on the h1 element.
border: 3px white; this line has no effect at all and it's not valid. To be valid, you should add a border style for the shorthand to work like 3px white solid
Best of luck and keep going.
Regards,
Mohammed
I'm mainly struggling with deciding how to remove the white space at the top and structure the font the same as the preview (move the font on a third line). Any feedback for how to remove the blank space is appreciated!
Hello Madeline0421,
Good work. I have cloned your repo, updated the code then opened a pull request so you can check how I addressed the issues you raised in your comment.
Here are some notes about it:
The white space is a result of setting a fixed height on the container and then displaying it as flex with center alignment on both axes.
By removing the fixed height , and adding the right padding , you can control the white space.
You have to use padding from right and left to control such behavior. When you add more padding on X axe, the space available to display the text gets reduced which will result in moving to the third line.
I hope these notes will help.
Keep coding and good luck. Rgds, Mohammed
The mouse hover effect using a linear gradient color is not working. Anyone encounter this kind of issue and how did you fix it? Thank you!
Hi Renz,
Nice job. However, the logic of the application needs to be re-written as the app is not functioning as it's supposed to. Here are some notes about your solution:
You have placed the header in the wrong location. The header which contains the TODO word in addition to the image(for theme switching) should be on top of the upper BG photo, not on the BG plain color. This issue matters because when users visit your application website from desktop , then change to light Mode , the moon will not be seen as it has the same color of background in light Mode.
After adding 6 todos, the application stops displaying any additional entries. It's wrong to hard code the todos in the HTML ( from item1 to item6) as you did. This process should be completely dynamic.
Add one todo, then mark it as completed, then delete it. If you try to add other todos after this operation, it will be marked as completed by default.
Its wrong to listen o click event to add todos in this case. The add todo should work after pressing Enter key. This needs to be written from scratch.
Wrap the input in a form so you catch the ENTR key without doing any extra coding and listen for submit event. You will have to prevent default behavior though.
When you check for todo as completed , you should be able to uncheck it again. This is not working in your application. Once a todo is checked completed , you can't undo this opreation.
Don't place the header under main tag.
Place todos in ul tag and use li to create each todo as part of a unordered list.
Use button tag for switching between light and dark mode.
I hope these notes will help you to improve your code.
Keep going and good luck.🚀
MKF
Hello everyone 👋, I'm Mohammed and this is my solution to this nice challenge.
This challenge was my first interaction with drag-and-drop API. I enjoyed doing the challenge very much.
Built with 🛠
What I learned
Continued development
Useful resources
Author
Update:
The theme now loads from local storage. If a user switches to LightMode, It will persist after refreshing the page.
🎁 Features:
🛠️ Built With:
Any suggestions on how I can enhance this solution or achieve even better performance are welcome!
Thank you. 😊✌️
Hi Melvin,
Excellent work as usual. Loved the transition effect very much.
I noticed you removed the underline for contact us on the hero section. It's visible on the design.
Another side note regarding the title of the readme file - it is showing Time tracking dashboard solution so you may update the title accordingly.
Amazing work. Thanks for your contributing a high quality works on FEM. 👏
Keep up the good work. MKF
super easy a good project to squeeze into 30 mins of your day
Hello,
Congratulations for completing this challenge. Here is my feedback on your solution which I hope it will help improve your code:
HTML
1- Use semantic tags always to reflect element's content meaning (like <main> <footer>).
Avoid non-semantic elements like <div> <span>. Use these two elements for grouping/styling purposes.
Apply this in your code by replacing the parent div with main tag. Same for footer.
2- Start with h1 tag instead of h2 as its level 1 heading to make your age accessible
3- Enhance the alt text for the QR code. Instead of alt="QRcode", you can write a more descriptive text like :
QR code for frontend mentor website.
4- wrap QR abbr in the paragraph with <abbr> tag like this:
<p>Scan the <abbr title="Quick Response">QR</abbr> code to visit Frontend Mentor and take your coding skills to the
next level</p>
CSS
5- The required font is Outfit but you have included three more fonts by mistake I guess:
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],400;9..144,500;9..144,600;9..144,700&family=Montserrat:wght@200;300;400;500&family=Outfit:wght@400;700&family=Overpass:wght@400;700&display=swap" rel="stylesheet">
This usually occurs when you add a font in google website and don't remove it after you finish. When you visit google font website next time , your old selection will stay there and will be added to the fonts you add recently.
6- As per style guide, font-size should be 15px which was not applied. Changing to 15px will make the page look like design in terms of Paragraph.
7- You can remove width:300px from h2 tag - it has no effect.
8- Instead of adding a style which can be inherited for each child element,apply the style to the parent instead:
For example , you want to align h2 and p text to center. Instead of applying styling to each tag , do it once for Child div which is parent:
text-align: center;
text-align is a property that gets inherited to child elements.
9- Avoid capitalizing class names -> parent instead of Parent.
10- Finally, increase the padding in child container div.
Keep coding and best of luck.
MKF
The difficulty i had while building the project was adding space on the left and right side of the <span> element.
Hi Peace,
Nice job. Here are some notes about your solution :
1- For HTML , always use semantic tags and avoid using generic tags like div and span as much as possible unless you have no other options. Example , instead of div tag you have used for container , use main tag and use H1 instead of P tag for the first senetence. I have opened a PR for this purpose. Please check your github repo for this project for more info.
2- Add alternative text alt to the image so you make it accessible. People with disabilities like blindess can't see images. They rely instead on screen reader to consume and interact with the content. Alt is the texts that represent the image in your page. Write a text which can express what is this photo and convey the meaning for it. For this challenge , you can use something like
alt="QR code for frontend mentor website"
3- Media query you wrote is redudant and has no effect as its the same styling which is already applied for the container on different screen sizes. Remove it or change the style if you want to have some changes for mobile screens.
4- Another repeated styling which can be removed is the
margin-top: 4rem; for container. You have already added margin: 4rem;
5- for P tag , font-weight: 400; also can be removed as this is the default value. Same for display: block. p tag is a block level element by default.
Best of luck
