This one took a lot longer than anticipated. But at last at least. I solved it using empty div's and transforming the backgrounds and adding a middle section in between the top/bottoms with a height and background color.
I've noticed the height of the screenshot is only a section of the entire project . But off course it's all there if I look at my project. It happens to have worked with the full height screenshot in the one project I didn't use Bootstrap container as much.
Why is this? I do notice now I added the header within main, could have been the issue.
The screenshot isn't very good but thats because I fetch JSON and it takes a few seconds to load the data. Can someone please advise me why it's not correct appearantly?
Accessbility is stressing me out so much. Any advice how to go about it so it's less stressful? Thanks
I did use media queries that determined when the menu is shown in mobile , from line 242 in the scss file. But the code you posted above would have been a neater solution to what I did.
I liked to seperate my code (add eventlistener one at a time) as I did as I think it's more readable maybe .
I have added a hidden <h1> heading, as it's not really part of the project , I have to hide it. I it passes on another accessiblity checker site (https://fae.disability.illinois.edu/anonymous/?Anonymous%20Report=/)
This was quite the challenge, but it worked out in the end. I did the bonus part of the challenge as well, it also checks for leap years.
I had already added a display:none (d-none bootstrap) <h1> title for accesibilty reasons, but it does not validate here for some reason. All was fine in another site I used to check for accessiblity : https://fae.disability.illinois.edu/anonymous/?Anonymous%20Report=/
I have added menu capabilities, so the menu opens/closes and a menu item is highlighted when selected on hover.
Hello everyone! 👋
I finally completed another challenge. This is my first solution in 2023. 🎉
Surprisingly, I learned a lot while building this project. I mainly learned about progressive enhancement. In this case, the content of the site can be understood with HTML only. CSS and JavaScript are only for enhancing the site.
I have a question. How to make an accessible toggle button with HTML and CSS only? It is part of the bonus challenge. Right now, I use the checkbox input to create the toggle button.
Any suggestions for improvements are welcome. Also, you can ask me any questions about the technique that I used.
If you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you!
Happy coding!
Yes, I created the toggle functionality with my code with just CSS. I also have a JS solution , but that's disabled.
I used the :has pseudoselector:
body:has(#annual:checked) .year{ display:block; } body:has(#annual:checked) .month{ display:none; } body:has(#monthly:checked) .year{ display:none; } body:has(#monthly:checked) .month{ display:block; }
The year and month classes are <span> elements within the html body.
They are positioned next to each other within each <li> element.
As you can see I can't complete imitate the original challenge due to my limited knowledge in CSS field. I tried to set padding and change height of middle container to be bigger than both left and right containers, it didn't work though. Instead of expanding vertically like the original design, it keep compressing the inner content instead. Learning more about grid should help fix this problem but I just can't wrap around it for the time being. Any feedback would be highly appreciated.
Hi, I'm not that great either at CSS, it's harder than it seems when you first get started! So don't worry, it's normal.
Try adding a media query for the desktop width , and within that adding
the following code:
.middle{ margin-top: -15px; margin-bottom: -15px; border-radius: 15px; }
You may need to adjust the negative margin value to make it work, but this worked for me.
Hello everyone! 👋
I finally completed another challenge. This is my first solution in 2023. 🎉
Surprisingly, I learned a lot while building this project. I mainly learned about progressive enhancement. In this case, the content of the site can be understood with HTML only. CSS and JavaScript are only for enhancing the site.
I have a question. How to make an accessible toggle button with HTML and CSS only? It is part of the bonus challenge. Right now, I use the checkbox input to create the toggle button.
Any suggestions for improvements are welcome. Also, you can ask me any questions about the technique that I used.
If you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you!
Happy coding!
Hi, about your question 'How to make an accessible toggle button with HTML and CSS only?'
I also started out with a checkbox, until someone (at freecodecamp) pointed out that is not the correct way to code a toggle that in reality isn't an on/off (one option) toggle, but two options toggle(annual/monthly). He said to use two radio buttons.
See the link below for an idea in the right direction: https://www.sarasoueidan.com/blog/toggle-switch-design/#if-the-switch-toggle-is-supposed-to-explicitly-offer-and-enable-two-separate-options%3A-public-and-private
Thanks, I usually validate my code at https://validator.nu/#textarea , which picks up small oversights like this. And the accesibility aria-label, yes I need to remember accesibility as well.
Do you know how to add the icons from fontawesome.com? If you do, Please, tell me how to do it in the comments below
Hi, yes to add fontawesome icons , just add the library link from cdnjs.com within your html head tag:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
And then add the icon <i> tag , of whichever fontawesome icon you want, before or after the html element where you want to insert it ,like so :
<a href='#home'><i class="fa-solid fa-house"></i>Home</a>
I wonder whether it is a good idea using two elements(div and img) to show the same image in desktop and mobile situation. Because I can not find flexible way of showing the image with only one element...
I haven't looked at your code, but it sounds like you may need to look into css flex?
