@RobalexgSubmitted over 2 years ago
P
Theo Harris
@Theosaurus-RexAll comments
- P@Theosaurus-RexPosted about 2 months ago
Hey, this looks pretty close to the design, well done!
Some notes on design diffs:
- The background colour is meant to be a slightly off-white color, which is provided in the style-guide doc in the starter code
- Your header images look a little distorted in the screenshots but are okay on the live site for me, but you might want to double check them just in case!
In terms of the code:
- I don't really think a
navelement is appropriate where you've used it, as there are no navigation links inside there, just a logo - Your heading elements need to be in order from smallest to highest number, and you can only have one
h1element per page - Your buttons should appear interactive when moused over, but my cursor remains normal when mousing over them - I can't see anything in the code that would override the default behaviour though, so I'm a little confused as to why I'm seeing this behaviour
0 - @rizkibagusSubmitted 2 months agoWhat specific areas of your project would you like help with?
whatever, i'm open to it
P@Theosaurus-RexPosted 2 months agoHey @rizkibagus, a couple of small suggestions to improve accessibility!
- You need to have a
<h1>tag in the page, before the successive<h2>and<h3>elements. For this design, you can visually hide the<h1>since there is no obvious design element that indicates where it should be included, but it needs to be present for accessibility. - The alt text for your images should be descriptive, and communicate the image contents as though you were describing the image to someone who cannot see it, e.g. "A headshot photograph of Daniel Clifford, wearing a shirt and suit jacket and smiling at the camera"
Hope this helps, and nice work on the design!
0 - You need to have a
- @MoatazJSSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
It's my first ever interaction with DOM manipulation and event handlers.
What specific areas of your project would you like help with?I'd like to know if there is anything I did poorly in html structure ,if there's anything unnessecary in the css file and if there's a cleaner way to write the JS code.
P@Theosaurus-RexPosted 2 months agoHi @MoatazJS !
This is a good first attempt, and the design looks very close to the original here!
However, in terms of markup, the underlying HTML for this should really be a
<form>with a<input type="radio">for the number selection. You can then utilise a button inside of the form element, which will automatically behave as a "submit" button inside of the form tag, and utilise the submission behaviour to update the DOM to the completed state!Here are a couple of useful links:
0 - P@gabeiSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how compartmentalized the card's style code is. I tried to keep it all together and I think it came out nicely.
I also think I was able to finish this project relatively quickly by sticking to some methodologies like BEM (Block-Element-Modifier) and SCSS nesting classes. Much of the project bones were completed before spinning up the page to see how it looked. By the time I did, it was almost complete.
What challenges did you encounter, and how did you overcome them?I had a bit of trouble figuring out how to wrap a background color around a short line of text. A little bit of research and trial-and-error gave me the result that I want, but I'm not super happy with the semantics of the HTML that gave me that result.
What specific areas of your project would you like help with?I'd like some advice on using semantic HTML to write a component like this. There are only a few different tag options that are viable, but I am not 100% sure I covered all my bases.
P@Theosaurus-RexPosted 2 months agoHi Gabe, great work on this solution!
Honestly, a span is totally fine for the "Learning" category element in my opinion - I probably wouldn't even nest the paragraph inside of there.
A couple of small notes on the semantics in the rest of your markup:
- You'll want to change your
<h2>to a<h1>in this case, since it's the first heading on the page - I'd actually never seen the
<cite>tag before today, but from reading the MDN docs, I think that tag is used to link to works such as academic papers or novels, not to the author themselves. Still, I learned something from your code!
This looks great and very solid on the semantics compared to most of the solutions for this challenge I have seen, so well done!
Marked as helpful1 - You'll want to change your
- @Student-AdilSubmitted 3 months agoP@Theosaurus-RexPosted 2 months ago
Hi @Student-Adil,
In your solution code, you alternate
h1andh5tags, but this is not semantically correct.When using heading tags in a HTML document:
- There should always only be a single
h1tag, which captures the main topic of the page. For this project, I would suggest that the text "Reliable, efficient delivery Powered by Technology" should be inside ah1tag - Successive heading tags then need to be in descending order, i.e. you can have a
h2followed by ah3, and then anotherh2. - You also cannot skip number levels, but you have jumped straight to using
h5tags.
I highly recommend brushing up on these semantics by reading the MDN docs on this topic
Additionally, I would leave the alt text for these images blank, as they are purely decorative in nature.
0 - There should always only be a single
- @ObiwummaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the fact that I'm learning how to use media queries. Next time I won't use both tailwind CSS and vanilla CSS in one project
What challenges did you encounter, and how did you overcome them?I used both tailwind CSS and vanilla CSS in one project. The tailwind loads on the HTML but the CSS doesn't load. Adjusting view from smaller to larger was a bit difficult. As well as changing the image once the screen gets bigger
P@Theosaurus-RexPosted 3 months agoHi @Obiwumma,
Your live site seems to differ from the design quite a bit. I'd recommend sticking with using just CSS until you are very comfortable, and then moving on to Tailwind, as Tailwind is a lot easier to use and a lot more effective when you have a strong grasp of what it's doing under the hood (it's all just CSS, after all!)
Additionally, some notes on your HTML:
- The first heading element in a document must ALWAYS be a
<h1>, but you've used a<h2>for the product title. - I'd recommend letting the text wrap naturally rather than adding in explicit
<br>tags in the middle of sentences. This will ensure a better experience for users across different device sizes (it doesn't have to match the text exactly as it appears in the design - it's more important that your site is usable) - I'd strongly recommend using an
<img>tag for your image - I can see that you did that previously but commented it out, but that is the correct approach for this markup.
0 - The first heading element in a document must ALWAYS be a
- @JohnsonSamuel324Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Creating a basic responsive website with button transitions
What challenges did you encounter, and how did you overcome them?I had the button transitions just in the button:hover instead of just the button, causing the transition to ease in but not ease out
What specific areas of your project would you like help with?Any feedback is appreciated!
P@Theosaurus-RexPosted 3 months agoHey @JohnsonSamuel324, this looks great - probably one of the closest solutions to the original design I've seen in terms of sizing and layout!
One bit of feedback on the semantics - the
<button>elements in your markup should be<a>tags, as they're simply links to other URLs (e.g. Jessica's LinkedIn or GitHub profile). Buttons are typically reserved for actions such as submitting a form or closing a modal.Otherwise this looks fantastic, and those transitions are really smooth!
Marked as helpful0 - @AbhayNegi01Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Still can write code in Vanilla HTML and CSS.
What challenges did you encounter, and how did you overcome them?To write code in HTML and CSS. JSX with Tailwind CSS still better.
What specific areas of your project would you like help with?nothing
P@Theosaurus-RexPosted 3 months agoHey @AbhayNegi01, this looks good!
A couple of small bits of feedback:
- Your
<h3>tag for the Preparation section should actually be a<h2>- heading elements must be ordered numerically from smallest to largest from top to bottom of the page, so going straight from a<h1>to a<h3>is not semantically correct. You can read more about this on the Mozilla Developer Docs - For the alt text in the top image of the omelette, I would recommend either leaving the alt text blank, i.e.
alt="", or providing a more detailed description, e.g.alt="A photograph of an omelette on a white plate, filled with green vegetables". Your current alt text does not convey any valuable information to screen reader users, so it's best to either provide that information or, in this case, you can probably treat the image as purely decorative. I've written up an article with some example cases if you'd like to see more. - It looks like your colours are a little off in some places - just a reminder that you can find the colour values in the
style-guide.mdprovided with the starter code in most projects :)
Other than that, great job!
Marked as helpful0 - Your
- @TanoyPaulSubmitted 3 months agoP@Theosaurus-RexPosted 3 months ago
Hey @TanoyPaul, visually this looks near perfect!
I've tested your live site with a screen reader and have a couple of suggestions:
- I'd recommend using a
<s>or<del>tag for the previous price rather than a<p>- this will tell screen reader users that the old price is no longer applicable, as screen readers announce that element as "deleted" - You can have an empty alt tag on the cart icon inside the button, as that icon is purely decorative and doesn't need to be announced to screen readers.
Awesome job on this one!
0 - I'd recommend using a
- @jdtb4Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm glad I finished this challenge, I thought it would take less time but at the end I managed to solve it.
What challenges did you encounter, and how did you overcome them?The biggest challenge was to make the desing as reliable as possible.
What specific areas of your project would you like help with?I would like to know what i can improve in my code. Thanks :)
P@Theosaurus-RexPosted 3 months agoNice work @jdtb4! This looks great!
One small suggestion - when adding an image of a QR code to a website, we should explain where it links to inside the
alttag, e.g.alt="A link to the Frontend Mentor website. This is so that vision-impaired users are still able to understand the purpose of the image and its context within the page.I've written about this in more detail inside this blog post on alt text if you're like to learn more :)
Keep up the great work!
Marked as helpful0 - @bergonzinifrancescoSubmitted 3 months agoP@Theosaurus-RexPosted 3 months ago
This looks great! My only suggestion for improvement is looking into how you can write more descriptive alt text for the image at the top - a good rule of thumb is to describe the image as you would describe it to someone over the phone, who cannot see it.
I'd recommend reading a little more about why alt text is important in this article by Chima Mmeje
Great work!
Marked as helpful1 - @rkrhlikarSubmitted 3 months agoP@Theosaurus-RexPosted 3 months ago
Hey @rkrhlikar, great work! Love that you included proper descriptive alt text for the QR code, that tends to get missed by a lot of people even in production code :)
Just one note - heading elements have to be in numbered order from smallest to largest on a page, and the first heading must always be a
<h1>. If this was being used as a component in a larger page, having a<h2>makes sense, but since this is on a self-contained page,<h1>would be the semantically correct choice.Other than that, this looks great!
0 - @jacquebentoSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
This was my first project, I felt excited but a little rushed, I'm not sure if I did everything right so next time I want to be more detailed.
What challenges did you encounter, and how did you overcome them?Trying to discover the values of margins and paddings was difficult, there was a lot of trial and error
What specific areas of your project would you like help with?Please tell me if I did something wrong or if I didn't use the tagging conventions correctly. Is it ok to use rem in padding?
P@Theosaurus-RexPosted 3 months agoHey @jacquebento, nice work!
Yep, using
remfor padding and margin is a pretty common thing in production code, so you're all good there!Just caught a small issue in your markup - you have the first line of text wrapped between two non-matching tags (I'm assuming they're both meant to be
h1tags):<p>Improve your front-end skills by building projects</h1>One other note is that when providing an
altattribute for QR codes in particular, we should describe where the QR code links to for users who may be using screen readers due to vision impairments, e.g.alt="A link to the Frontend Mentor website". Great work remembering to include thealttag though, as a lot of people don't even though it's a required attribute onimgelements!Overall, fantastic job on this project :)
0 - @Denilson15Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of the fact that this is my first real html and css project. Trying to build to recreate something with very little experience was challenging but it gave me the opportunity to mess around with different tags and styles and see how things worked. Next time I will try to make better choices in the tags that I use, I think when I began the project I was throwing "ID" in the mix a lot even though it wasn't best use case for it.
What challenges did you encounter, and how did you overcome them?I had learned a majority of the CSS basics a day prior to starting this project. Prior to this I had really only worked with C++ and a little bit of JS which are completely different so trying to implement what I learned was a bit challenging given my lack of practice. I overcame those challenges by asking others in the Frontend Mentor community and looking up videos on youtube to better my understanding of specific styles.
What specific areas of your project would you like help with?I think the two main things I would like help with is understanding when to use certain tags and also just a more thorough break down of how to use specific styles.
P@Theosaurus-RexPosted 3 months agoHey @Denilson15, this is great for a first project considering you only learned CSS basics a day prior!
I'd honestly say you've done a good job using the right tags for this project! A
<h1>makes sense for the top text and a paragraph is perfectly suitable for the body text :)One pointer that will make your code for accessible for folks with vision impairments that may be using assistive technologies - when we have an image of a QR code on a page, best practice is to add the
altattribute with a description of where the QR code links to, e.g.alt="A link to the Frontend Mentor website". Generally you also want to provide an alternate way of accessing the content the QR code points to, as well, but the design here doesn't include that.Anyway, great job, and I hope you enjoy the switch from C++ to the wonderful world of frontend web!
Marked as helpful0 - @EdelmiroAntonSubmitted 3 months agoP@Theosaurus-RexPosted 3 months ago
Hey @EdelmiroAnton, this looks great!
One small suggestion - you're using
aria-labelledbyon your section, but I don't think it's necessary for this use case. Even if it is, this is an attribute specifically for screenreader users, so I would suggest making the value something human-readable that describes the purpose of the section.Other than this, great work!
0 - @matheusbarbSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how smoothly I was able to develop this code. I found the process to be surprisingly intuitive, and it allowed me to bring my ideas to life with relative ease. It's gratifying to see the project come together and function as intended.
What would I do differently next time? Looking back, I realize that there were moments where I could have been more efficient with my time. Next time, I aim to streamline my workflow and be more proactive in identifying and addressing challenges as they arise. Additionally, I want to take the opportunity to further refine my skills in Tailwind CSS, as I believe there's always room for improvement and growth in mastering such a versatile tool.
What challenges did you encounter, and how did you overcome them?While this project was relatively straightforward, I did encounter some challenges when trying to incorporate certain elements using Tailwind CSS. At times, I found myself struggling to achieve the desired styling or layout with the predefined utility classes. However, through experimentation, research, and trial and error, I was able to overcome these obstacles and successfully implement the required features.
This experience not only helped me to accomplish my goals for the project but also significantly improved my proficiency with Tailwind CSS. By grappling with these challenges and finding solutions, I deepened my understanding of the framework and expanded my toolkit of styling techniques. Overall, while the journey presented its share of hurdles, overcoming them ultimately contributed to my growth as a developer.
What specific areas of your project would you like help with?I would like to offer assistance to individuals working on frontend projects using Next.js and Tailwind CSS. If you're facing challenges or seeking guidance in developing better user interfaces or improving your skills with these tools, I'm here to help. Whether it's troubleshooting issues, providing code snippets, or offering advice on best practices, I'm committed to supporting your growth as a frontend developer.
Additionally, I welcome feedback and questions from anyone interested in learning more about Next.js and Tailwind CSS. Your input helps me understand how I can better serve the community and tailor my assistance to address your needs effectively. So please feel free to reach out with any inquiries or suggestions you may have. Together, let's elevate our frontend development skills and create exceptional user experiences
P@Theosaurus-RexPosted 3 months agoHey @matheusbarb, great work!
A couple of suggestions based on things I've picked up working with Tailwind and general frontend code over the years:
- When using Tailwind, try to minimise using arbitrary values if possible - you'll save yourself a lot of headaches if you ever have to overhaul your styles on a larger project! For example, I can see you have
text-[16px]in a few places, but tailwind already has a builtin equivalent that achieves the same behaviour -text-base - I'd suggest having a look at how to write useful alt text for images to improve the accessibility of your web pages - I've written a beginner-friendly guide that covers some common use cases. In this case, I think the abstract image could be considered purely decorative, so we can leave the
alttag empty, but the avatar could benefit from a more in-depth description.
Regardless, this is great! Next is a very powerful framework at scale, so I'd be curious to hear how you go with it if you use it for larger projects :) Great work!
0 - When using Tailwind, try to minimise using arbitrary values if possible - you'll save yourself a lot of headaches if you ever have to overhaul your styles on a larger project! For example, I can see you have
- @LordmarcSubmitted 3 months agoP@Theosaurus-RexPosted 3 months ago
Hey @Lordmarc, this looks great!
A couple of minor suggestions that you may find useful for further challenges:
- When adding an image of a QR code to a page, it's generally best practice for accessibility to include an
altattribute that describes where the QR code links to. - Rather than being restricted to using the predefined Tailwind colour palette, I'd suggest having a crack at implementing your own colours through the tailwind config file
Other than that, great work! 🎉
0 - When adding an image of a QR code to a page, it's generally best practice for accessibility to include an
- @DicksenTSubmitted about 1 year agoP@Theosaurus-RexPosted about 1 year ago
Hey Dicksen, sorry it took me so long to getting around to leaving feedback - thanks for your patience!
Here's a couple of things I found that could help improve this project a bit:
- Your calculator has form validations which is great, but users are able to enter a negative number of people to split the bill between! You might want to catch this case when validating
- I can see you've used a
<h1>for the logo, but you should use the image provided in theimagesfolder with the template download - You can't have an
<input>as a child of a<ul>element - you can only have<li>elements inside a<ul> - For a form like this, in a production app I would personally be using
radioinputs for the percentage amounts, rather than just list items. - Instead of using all-caps in your markup on the Reset button, you should type it normally and use CSS to transform it to all uppercase letters using
text-transform: uppercase;. This helps screen readers and other assistive technology parse your page better.
Otherwise, this is a big improvement compared to your previous challenges, nicely done!
0
