@whawari
@O-Julia-O
Submitted
What are you most proud of, and what would you do differently next time?
I learned how to use the Chrome Debugger with JavaScript, how to use JavaScript for form validation, and how to use regular expressions and the test() method to check inputs(strings). Additionally, I learned how to work with CSS classes using JavaScript.
What specific areas of your project would you like help with?
Any comments will be useful :)
@whawari
Posted
Hey Yuliya 👋
The design looks great!
I would like to challenge you with 2 things:
[email protected] that you are always displaying.Best, Walid Hawari.
@Alexandru-Enescu
Submitted
What are you most proud of, and what would you do differently next time?
I improved my Tailwind skills by using breakpoints and styling more types of elements like lists and tables.
What challenges did you encounter, and how did you overcome them?
When styling lists I struggled with spacing, but I solved the problem by randomly trying different ways and also searching for answers online.
What specific areas of your project would you like help with?
For this challenge I did not need help with any specific area.
@whawari
Posted
You got it almost 100% the same good job.
However I noticed something regarding the responsiveness of your page. You are using a breakpoint at 640px. At exactly 640px screen size your design look compacted, you can solve this by using width: 100% on your main tag along with max-width Check my solution to this challenge on how I tackled this.
Wishing you the best in your Tailwind learning journey!
Marked as helpful
@Alexandru-Enescu
Submitted
What are you most proud of, and what would you do differently next time?
I've learned more how to use Tailwind and I will continue using it in the next projects.
What challenges did you encounter, and how did you overcome them?
I managed to find everything I needed using Tailwind documentation.
What specific areas of your project would you like help with?
For this project I didn't need help with any specific area.
@whawari
Posted
Well done! You can only increase the heading/title font size to match the design, other than that everything looks in place. Bravo!
Marked as helpful
@Dhruvmehta1311
Submitted
What are you most proud of, and what would you do differently next time?
Basic one.
@whawari
Posted
Good work! Try editing the code and place the dice button inside the card and give it absolute position then align it to the bottom center as in the design.
@O-Julia-O
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of doing readable and understandable code. I used BEM Methodology for naming block.
What challenges did you encounter, and how did you overcome them?
Small challenge was with margins in flexbox block_subscription. I delete them and used flex-grow.
What specific areas of your project would you like help with?
Did I use BEM correctly? If no, what should I change? How about responsiveness? Does it readable for you? If no, please, share you opinion!
Any feedbacks are important! :)
@whawari
Posted
Hello Yuliya, Great work! I would like to comment on the structure of your HTML elements and the usage of BEM methodology.
HTML elements structure: you do not need to add extra unnecessary divs, example:
<div> <a class="card-subcription__button">Change</a> </div> Always think of [block and inline level elements](https://www.geeksforgeeks.org/html-block-and-inline-elements/).BEM methodology: You can find all your answers in this article
<main class="background"> <article class="card"> <img src="./images/illustration-hero.svg" alt="hero image" class="card__hero" />
<h1 class="card__headline">Order Summary</h1>
<p class="card__paragraph">
You can now listen to millions of songs, audiobooks, and podcasts on
any device anywhere you like!
</p>
<div class="card__subscription">
<img
class="card__icon"
src="./images/icon-music.svg"
alt="icon music"
/>
<div class="card__details">
<h2 class="card__plan">Annual Plan</h2>
<p class="card__price">$59.99/year</p>
</div>
<a class="button button--text">Change</a>
</div>
<button class="button button--contained button--primary">
Proceed to Payment
</button>
<button class="button button--secondary">Cancel Order</button>
</article>
</main>
Best, Walid Hawari
Marked as helpful
@lora-khan
Submitted
@whawari
Posted
I noticed that you have used height 140vh on the main html element. you could use the min-h-screen Tailwind CSS class which translated to min-height: 100vh; using min-height instead of height is better for responsiveness.
@minnaingkoko
Submitted
@whawari
Posted
Well done! I would suggest not to use any frameworks when developing pure HTML and CSS code.
