
Solution retrospective
I'm proud that i could complete this challange as a newbie. I would do nothing differently. I searched and found everything i needed(except one thing). I would be more patient with myself :)
What challenges did you encounter, and how did you overcome them?I realized that sometimes eventhough i write the right code the website doesnt show it and it confused me a lot of times. I had to wait or write it again and refresh. I also searched for communities and joined them. Unfortunately they werent a big a help because they are either too big to notice me or just a dead community or ignoring me i dont know :D I genuinely wanted to ask for help but i could solve it at the end with a little bit more time invested.
What specific areas of your project would you like help with?I have a problem with responsive web design. The challange asked me to do 375px for mobile and 1440px to desktop. I found a code which could work but it doesnt seem right when i checked it through google with the f12 device tool. Since it was my only problem i let it be but it still bothers me what did i wrong or how should i check correctly the size of the website.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ILLORYS
Update #2
Now i only have 2 problems.
Error:
I only got 1 error message after i uploaded my correction related to the previous things:
Bad value "recipe-page-main\assets\images\image-omelette.jpeg" for attribute "src" on element "img": Backslash ("") used as path segment delimiter.
<img src="recipe-page-main\assets\images\image-omelette.jpeg" alt="Picture of an omlette" style="width: 100%">
Still dont know what is this im trying to figure out.
Responsiveness:
And the other one is still about responsiveness. I guess i have to use next time vh and other measurements instead of pixel. Maybe the problem starts here but this is only a guess. The website still collapses on mobile and looking "okay" on everything else. I really want to solve this because its bothers me sooooo much :"D
- @ILLORYS
Im giving an update to my solution: After i got the warnings and errors from the websites report system i learned new things such as:
Headings:
- headings should always come in order one after another. I did a mistake and wrote after h1 a h3 heading and you should do h1, h2, h3 in order!! i give a link to confirm that 'Headings are important' section gives the correct answer: https://www.w3schools.com/html/html_headings.asp
Lists:
- unfortunately i put my hr tag IN the lists code and it should be outside of it because lists should only contain list contain elements. Source: https://dequeuniversity.com/rules/axe/4.6/list?application=axeAPI
Page landmarks:
- it was very new for me that i should structure my website like this - pay attention to the header,nav, main, footer section in the code -: https://dequeuniversity.com/rules/axe/4.6/region?application=axeAPI
About other landmarks: i dont understand this error but it says: Document should have one main landmark
<html lang="en">-------- i have this in my code so what does it mean? :DComments:
- i was a bit too excited to use them and i got an error:
The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment.
E--> <!-------------------
Aaaand the last one:
Bad value "recipe-page-main\assets\images\image-omelette.jpeg" for attribute "src" on element "img": Backslash ("") used as path segment delimiter. G"> <img src="recipe-page-main\assets\images\image-omelette.jpeg" alt="Picture of an omlette" style="width: 100%">
I dont know what to do with this one. The image is working and everything. Maybe somebody can help me to figure out what should i do differently because i have no idea.
Thank you if you read this all through!
I wish everybody happy coding and dont give up if something doesnt work out the way you wanted. If you are stuck on a problem for too long just move on you probably spent too much time on it and it wont help if you whip yourself to madness. :D
Give yourself time to process the problems!
Take care!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord