HTML / CSS Tutorial Create a Preview Card Component
FBTwitterReddit
video description
Rating: 3.3; Vote: 3
Improve your HTML and CSS frontend developer skills by creating an NFT preview card component. This is just a graphical element and you will not actually be creating an NFT. You can apply the concepts from this video to other types of front-end elements.
Code: https://github.com/Madisonkanna/nft-card
Project: https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U
Course Contents
(0:01:07) Project setup
(0:01:42) Intro to design tools
(0:03:03) Starter files
(0:05:16) Creating the project
(0:07:12) Hello world
(0:08:18) Intro To HTML
(0:09:57) Intro to CSS
(0:11:28) Stylesheet setup
(0:12:18) HTML, CSS and JS
(0:14:33) Class selectors
(0:16:03) Building the card
(0:16:28) CSS Variables
(0:20:57) CSS Specificity
(0:22:28) Card title
(0:25:23) Adding the nft image
(0:27:53) CSS Box Model
(0:34:42) Box-sizing
(0:40:28) Adding the font
(0:50:28) Building the active state
(0:51:13) Creating the image overlay
(0:53:15) CSS Positions
(1:00:09) Centering the eye icon
(1:02:14) CSS Opacity
(1:05:25) Block vs inline element
Suplays: Attempted this challenge a couple of days ago and did QR component before that and got stuck so many times. Had to figure out using w3schools. Thank you for this. Also for some reason they prefer semantic HTML which I found weird Date: 2022-04-05
