Order Summary Card - Frontend Mentor Project Built with HTML & CSS

Another Frontend Mentor project. I felt like coding it up today so I thought I might as well record it 😁. Apologies for the music volume, still figuring this whole 'video editing' thing out. Throw in any criticism/feedback in the comments, I always appreciate it. No matter how small/petty, thanks. I mentioned BEM but did not explain it in any great detail. I'll cover it in a future video. I think I recommended Kevin Powell's 'flexbox simplified' course, no affiliation, just found it useful myself and I recommend it to anyone who enjoys/wants to improve in CSS/Flexbox. Some resources: Github repo: https://github.com/grizhlieCodes/order-summary-component Frontend Mentor Solution: https://www.frontendmentor.io/solutions/order-summary-component-vanilla-solution-oR9G49rsU#comment-619ee02148968b4b048b3ac5 Frontend Mentor Challenge: https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj Chapters: 00:00 - Project Setup 01:07 - Quick Design Analysis 03:00 - Open VsCode and cleanup FEM HTML file 03:50 - Create CSS files 04:54 - Quick font-size-62.5% explanation 06:35 - Writing all HTML 10:51 - Showing variables & Discussing Style guide 14:01 - Styling Body 15:00 - Styling the card-container 17:47 - Styling img container & img 18:29 - Styling text container 25:59 - Rewriting a few main elements as BEM 26:51 - Styling text-container - heading 28:33 - Styling text-container - description 29:42 - Styling selected-services-container & children 32:28 - Styling the 'change' button for grid 38:38 - Styling a 'custom' underline for change-button 42:45 - Styling the final 2 buttons 46:20 - Final checks and corrections 50:20 - Main learning points of this video 52:24 - Beat laziness and decided to style the background too