This CSS Mini-Project designing responsive profile cards will incorporate many of the concepts from previous lessons in this CSS for Beginners tutorial series. We will use flexbox, images, media queries and more! If you are just beginning with CSS, I recommend going to the start of this CSS for Beginners playlist: ru-vid.com/group/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
I just want to say a big thank you to you for your awesome videos. Just landed my first job and I'm supper happy. Most of my knowledge of JavaScript and reactJs came from watching your amazing contents. Thank you Sir!
I just can't appreciate more the fact that your lectures are not only detailed but very, very organized. In fact, most beginner "only" learn how to code, but fail to learn how to properly organize their codes. You teach both. Code and proper organization. Thank you Dave❤️
Not often that I comment but I have to. These tutorials are just great. A no nonsens approach with great detail. Sometimes a little "dry" - but that's exactly what I need (the why, how, do and don't). Now I will lock myself in a room for a few weeks and study all the HTML and CSS content you have created. When those subjects are under my skin I will continue with you Vanilla JS section. Great work Dave. You're a star!
can't believe i made such a sick website!!!. used the tutorial as a reference point and made a formula 1 drivers profile. It's always fun to use your own images and names and modify them as per you. so fun. thankyou so much dave
Thank you Dave! I was following this project and few things didn't work for me.. that was a bit annoying but at the end I've found that there were few typo from my side.. Your github is very helpful for me in order to be able to check everything carefully.
i have changed the main to this: main { flex-grow: 1; min-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); place-content: center; gap: 1.25rem; padding: 1rem; } so that the media queries are reduced to this: @media screen and (min-width: 548px) { nav { display: none; } } /* || MOBILE DEVICE LANDSCAPE */ @media screen and (max-height: 425px) and (min-aspect-ratio: 7/4) { h1, h2 { font-size: 1.5rem; } nav { display: none; } } there are some alignment issues between 384px and 568px!
Wow. A tough one. When you're explaining it - All clear. When trying to do it by myself from scratch - Everything that related to display, So as everything that related to @media paragraphs - feel as procedural requirements for professional only..
Hey Dave ! Thanks again for your amazing work. I would like your advice about clickable card if you got time. I looked for the best way to build clickable card in HTML but there too much ways. In your opinion, what is the best way to put the markup : 1. img -- text 2. img -- text 3. img -- text ( is position absolute and covering the whole card with article in position relative) Thank you
I don't know if you are using JavaScript, but I would. I would keep a structure like you have or similar to #3. For a clickable card, you would add an event listener to the card or all elements with the card class - this is in JS.
You're welcome! I don't have a set number. I have just been following the content. There are a few more to go, but I think for a beginners series, we are getting close to the finish line. 💯🚀
I know it is a little too miuh to ask, but you never know, you may see and tell me.... Why in the body we had those declarations: display: flex; flex-direction: column; but we did see our parts as rows? Sorry for my english
Hi Dave, I am decently clear with flexbox and grid concepts on a simple one container and multiple items level. The problem comes when there are multiple inside each container; sort of like inception concept... I really have a hard time understand aligning internal elements and then each internal element further is another flex container... I get lost... I had a tough time understanding the flex model of body, main, card class Any suggestions?
I revisited this and previous video today again with a fresh mind. I drew the skeleton of HTML, put boxes around it wherever flex containers were created, wrote its initial flex-flow and then whenever Dave changed it in media queries I looked at the drawing and understood better. It was much better today. I'm gonna need a lot of practice for this to come naturally.
Not sure if you played the recommended Flexbox Froggy game from the Flexbox chapter, but it can help. There are also other flexbox games you can Google. The more you work with it, the easier it will become.
Hello Dave, thank you for the great lesson but I have some problems when I use an "inspect" and press on Matt or Jane or Joe it show me: Cannot GET /profile2 . I couldn't find any information about this problem on Internet. Could you help me solve this issue please?
Hi, I cannot guess what may be different in your code, but you can go to the course resources link I provide in the description and compare your code to my code for lesson 18 to see what is different.
@@DaveGrayTeachesCode Hi,Dave! Thank you for reply. I found my mistake and memorised a lot 😂 from lesson 18 repeating it again and again. You are really amazing teacher who always trying to help students to understand their flubs.
I followed your full HTML tutorial and the CSS tutorial up to this point. I have been able to mimic everything you've created but here I can not make the device frame show in developer tools, it will show for nest hub and nest hub max but not for any of the other options. I'm in chrome.
- Open Devtools in Chrome (Ctrl+Shift+i) - Click on the icon near the top of devtools that shows a tablet & phone - You should now have the responsive toolbar at the top of your window - Click the dropdown where it says "Dimensions" (near top left) and choose "Edit" at the bottom - Now you should have another Devtools window that says "Devices" and shows the devices you can add - and also provides an "Add Custom Device" button
Hey, I have a problem about lesson 18. with set a:focus color, after click on on link that link color stay at focus color and when i hover mouse on the links color dos not change on device mode on dev tools
Good questions! In reverse order of what you asked - Hover does not work on some devices. You will need to exit devtools to test that out, but you can tab through to check the focus style. You can use media queries to check if the device supports hover like: @media screen and (hover: hover) OR @media screen and (hover: none) if you want to style things differently for each. ...Now the "after click on link" question - You can change the :focus pseudo-class to :focus-visible. You will not see this change with devtools open, but without devtools, when you move your mouse away from the link, it will no longer display the focus state.
