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: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
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❤️
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!
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
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!
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..
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.
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 have the "Moto G Stylus 5G 2022" and the mobile query doesn't activate for it. My phone seems to meet the LARGE query set when in Landscape but in portrait it matches none of them except the default styles Phone Sizes: (509 x 1056) [Portrait]: Pixel Ratio: 2.125 (1056 x 485) [Landscape]: Pixel Ratio: 2.125 This lesson series is amazing!!!!
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!
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.
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.
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.
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
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: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
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❤️
You're welcome! And thank you for the kind words! 🙏🙏
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!
Thank you for sharing, David! Stories like yours are what keeps me motivated! 💯🚀 And congratulations!
That's awesome David! That motivates me to continue on the journey
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
That's outstanding! Congrats!
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!
Glad you like them! And thank you for the kind words 🙏 I'm still adding some content to this CSS for Beginners playlist each week.
@@DaveGrayTeachesCode Geeezzzz, then I guess I will stay locked up forever 😂
Hi Dave! So much love for this channel and for all you do to help us all get better at coding… Cheers 💖!
You're welcome! 🙏💯
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..
Keep at it. I think you will get it as you continue to work with it 🚀
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.
Great job, Grigory! Using the source code for the course to double check any issues you encounter is a great way to find the solution! 💯
CSS is really underrated. I learn and discover new things everyday.
Glad I could help!
How many of css tutorials are you planning on doing? and thanks for posting these for free, ur the goat!!🐐🐐
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. 💯🚀
Love you, Dave!!!
Thanks for these awesome well-explained projects!
Forte abraço do Brasil!
God bless!!
You're welcome, Vinicius! 🙏
17:20 Fix Navbar Link Scrolling Past Card
(experiment with the value to get the right behaviour)
scroll-margin-top: 8rem;
Your css videos are awesome!
Glad you like them! 💯🚀
Excellent work Dave 😍
Thank you, Mohammad! 🙏
I have the "Moto G Stylus 5G 2022" and the mobile query doesn't activate for it. My phone seems to meet the LARGE query set when in Landscape but in portrait it matches none of them except the default styles
Phone Sizes:
(509 x 1056) [Portrait]: Pixel Ratio: 2.125
(1056 x 485) [Landscape]: Pixel Ratio: 2.125
This lesson series is amazing!!!!
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!
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.
Thanks for your reply.
At this stage of my apprenticeship, I don't learn JavaScript yet.
So it is not a problem if the element is empty.
Great content 💫♥️
Thank you 🙌
Thank you for everything
You're welcome! 💯
Hi Dave! Wouldn't it have been easier to insert between Dev and Rel instead of defining a .nowrap class?
You could, but I would rather not insert an entity in there. The class is also reusable. 😀
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.
@@DaveGrayTeachesCode yes did the froggy. Getting comfortable with it day by day...
great stuff
Thank you!
hello, i love your text color code.. what your extensions for your color text code and color theme? i love that :)
Github theme
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.
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.
@@DaveGrayTeachesCode Thanks for replay man! 💖
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
Did you upload the started code in github?
Thank you for the reminder! Now uploaded! 🚀
does anyone told you today that you are a legend ....
Thank you for the kind words 🙏
Excellent work Dave😍
Thank you, Mohammad! 💯