Hi,
I cant figure out how to make part of the picture hidden while the box is visible. Also, I dont understand why my transition effect doesnt work.
Any other suggestions about better solution are welcome!
Thanks :-)
Hi Hana, nice job :)
Regarding your questions: If you add overflow: visible; on your .card I think you'll get what you're trying to do with the image. I see you have it applied in your media query, but it doesn't work on screens larger than 1044px.
What is the transition effect that you're trying to add?
Why does my text look different than what is exampled? What could I have done to make this a cleaner code?
Hi Jacob, congrats on completing your first challenge!!! 🎉🎉. The first of many I hope ;)
You've done a really great job, I just have a few tips for you:
First to answer your question about the text: you have applied the class="bold" to the <section> tag which wraps around your <h1>. If you apply that class directly to the h1 and delete your <section> tags you will see the text will change (and you can then edit to get it closer to the design if you wish to). Wrapping the <h1> like this is not really necessary for this challenge, same with the <main> tag that wraps the <p> - I would also remove <main> and apply class="text" directly on the <p> tag.
Read up on html semantics a little to get a good understanding of best practices (for example: https://www.semrush.com/blog/semantic-html5-guide/)
Try using indentation to make your code a little easier to read, for example:
<html>
<body>
<h1>Hello World</h1>
<p>Example text</p>
<div>
<img />
</div>
</body>
</html>
Keep going, you're off to an excellent start!
I am unsure about html section so if you have any feed back i would really appreciate it
Hi Abhi, do you have any specific questions regarding the HTML?
I think you did a good job getting it close to the design, so well done on that. I would suggest checking out the accessibility issues in the report and get those points cleared up.
Regarding your html code, the span tag could be changed to a heading tag, and the alt text on the image could be simply "qr code" - screen readers will already announce that it is image.
Hello frontend friends! 👋
This was long overdue but I finally completed my 2nd challenge on Frontend Mentor. 🎉 This project was an opportunity for me to test new approaches on the way I write my CSS.
Major challenge(s):
@each rules to generate helper classes easily. It is not perfect but I think is a good start.minmax() function with the grid-template-columns and grid-template-rows properties.Your feedback would be much appreciated, especially if you have other ideas about how to better implement custom CSS properties in your workflow.
Thanks in advance. 🙏
Wow Christopher, well done on this challenge! I plan to spend some time reading your code because I think I can learn a lot of new things from you - thanks for sharing! I've been wanting to try out GSAP and seeing your work has inspired me to jump in and give it a go :)
Just one thing I came across - the leaflet map is blank on loading, I get the location pin but the actual map is empty so maybe something worth looking into. I tried on 3 different browsers with and got the same issue on each.
Hey Frontend Mentor folk
I have completed another advanced challenge using my newfound Angular skills.
Overall, I really enjoyed this project and didn't have any major issues - but I felt it really stretched my skills.
I also added a little extra functionality, so that each photo on the story page can be clicked to open up more information about that photo/story - I didn't spend too long styling these extra pages, but let me know what you think.
As always, I would really appreciate any feedback!
Have an awesome day, happy coding!
Regards
Ollie
EST Time 20h | Actual Time 16h | WakaTime
Hi Ollie, awesome job on this project - it looks great on different screen sizes I tested with dev tools. I especially love that you added the extra pages, really nice touch!
Just one thing I came across - when I click on the image card the story page will load, but when I click on the "read more ->" section of the same card, it skips past the story page and loads the home page again. When I click back on my browser, I then see the story page. Maybe just checkout the functionality of that read more link :)
New to Front-End Development. Open to feedback.
Hi QWen, congrats on having a go at this one! It does look a bit unfinished, but I do commend you for your bravery!! It's quite a challenging one for people new to web dev, so kudos to you
I would recommend going through the html and accessibility report - there are some issues with headings not being in ascending order, and being placed where they shouldn't be (e.g in ul). The reports have useful links so you can learn more about these points.
Compared to the design, things look to be in the right place, but spacing and font sizes could be improved to get it a little closer. For example, in the We're Different section, max-width and increased font-size on the sub-headings will make it much more readable.
Keep going with it, and ask questions in the slack help channel if you get stuck or need assistance.
Hi, this is my next work. As always any remarks or tips would be appreciated.
Hi CoderPr0, you've done such a great job! Responsiveness is excellent and the theme switching works really well. There's not much I can say in terms of improvement, except to check out the html report.
Awesome work 😊
This is my second challenge that I have completed. Please provide any feedback on how to improve it.
Hi Shiva, really great job on this! You managed the positioning of those background circles really well 👍
Only thing I can see that's missing from the design is the horizontal line above the stats section.
On the code side, check out the accessibility issues noted in the report.
Keep going, you're doing really well 😊
In all honesty, I am kinda disappointed that this challenge was like 5 times harder for me that it actually looks like, i feel like i should've done it way faster and way better. Im looking for literally any kind of advice at both html and css so i can get better and keep going at my front-end adventure. Thanks in advance.
Hi Bernard, nice work! Your solution looks really similar to the design
Along with the comment already posted, I would just add to check out the responsiveness - it looks good on desktop and mobile, but tablet needs a bit of adjusting.
What were the things that you found most challenging? I also struggle with expectation vs. reality with a lot of challenges, but I try not to focus too much on that aspect. Identifying the harder bits so I can learn from them has become much more important.
Don't be too hard on yourself, you're doing a really awesome job!
Hi, this is my first challenge here, any sugestions to improve my code will be highly appreciated.
Hi Sudheer, congrats on completing your first frontend mentor project! 🎉 You've done a really good job with getting your solution to look like the design - nice work 👍
My main suggestion for improvement would be to work on using semantic html, as it will give better structure and readability to your code, and your site will be more accessible to screen readers and keyboard users. Currently, if I try to navigate around your page using only my keyboard, I can't interact with anything in order to change my subscription or go to the payment page.
Keep going, once you've got a handle on semantic markup, your projects will be lit 🔥
this was a great test that made me search about many things. I learned a lot from it. I know I'm not professionally completed it but it's an achievement for 3 days of learning HTML and CSS, I'm willing to solve more examples and expand my skills
Hi Mohamed,
Congratulations on completing your first challenge, and after only 3 days of learning? I’m super impressed! Well done!
I’ll just point out a couple of things:
When using multiple heading tags, they must be in numerical order from 1 - 6, so we can’t have a <h2> tag and then skip to <h4> for example. You can read more about them here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements If you check out the report it will also have some great info on how to improve the semantics.
The other tip is that you can use google fonts easily to match the design. Here’s some info on how to use it: https://developers.google.com/fonts/docs/getting_started You will find the font name that you need for this project in the design file.
You’re off to great start - keep going! 😊
Hey everyone! Hope you can give me some feedback regarding this code. Thank you a lot!
Hi Cindy, great job on this challenge!
It looks good on desktop and mobile 😊
The only feedback I can give is to avoid using <h> tags for things that don't make sense as headings. The stats it might be better for accessibility to use <ul>.
Keep going, you're doing great!
