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 :)
Hey Yuliya 👋
The design looks great!
I would like to challenge you with 2 things:
ash@loremcompany.com that you are always displaying.Best, Walid Hawari.
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.
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!
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.
Well done! You can only increase the heading/title font size to match the design, other than that everything looks in place. Bravo!
Basic one.
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.
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! :)
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
<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
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.
Well done! I would suggest not to use any frameworks when developing pure HTML and CSS code.
