CSS Responsive Card Design | Mini-Project Tutorial for Beginners

Подписаться 313 тыс.

Просмотров 16 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Create a CSS Responsive Card Design in this mini-project tutorial for beginners. This CSS project pulls together concepts learned from previous lessons in the CSS for Beginners tutorial series.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Responsive Card Design | Mini-Project Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:26) Project Preview
(02:10) Starter Code
(02:52) HTML structure
(08:59) CSS Styles
(09:26) CSS Reset
(10:57) Utility Classes
(12:23) General Styles
(17:09) card class styles
(22:22) Small breakpoint media query
(24:31) Medium breakpoint media query
(26:42) Large and XL breakpoints
(28:34) Testing the breakpoints
(30:14) Mobile device landscape breakpoint
(33:34) Experiment and make it your own
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 HTML Special Characters and Entities: unicode-table.com
🔗 CanIUse.com: caniuse.com/
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: developer.mozilla.org/en-US/d...
🔗 MDN - Basic Concepts of Grid Layout: developer.mozilla.org/en-US/d...
🔗 MDN - Grid Template Areas: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Images: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Background Images: developer.mozilla.org/en-US/d...
🔗 Chip Cullen - Article on Content Layout Shift: chipcullen.com/what-width-and...
🔗 MDN - CSS Media Queries: developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about CSS Responsive Design and Card Project helpful? If so, please share. Let me know your thoughts in the comments.
#css #card #project

Опубликовано:

15 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 59

@DaveGrayTeachesCode 2 года назад

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

@moriayo8750 2 года назад

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❤️

@DaveGrayTeachesCode 2 года назад

You're welcome! And thank you for the kind words! 🙏🙏

@davidechoda9740 2 года назад

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!

@DaveGrayTeachesCode 2 года назад

Thank you for sharing, David! Stories like yours are what keeps me motivated! 💯🚀 And congratulations!

@gqcodes2169 2 года назад

That's awesome David! That motivates me to continue on the journey

@hiwayshoes 2 года назад

Hi Dave! So much love for this channel and for all you do to help us all get better at coding… Cheers 💖!

@DaveGrayTeachesCode 2 года назад

You're welcome! 🙏💯

@viniciusm.m.7822 2 года назад

Love you, Dave!!! Thanks for these awesome well-explained projects! Forte abraço do Brasil! God bless!!

@DaveGrayTeachesCode 2 года назад

You're welcome, Vinicius! 🙏

@PeteR-ji8ik 2 года назад

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!

@DaveGrayTeachesCode 2 года назад

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.

@PeteR-ji8ik 2 года назад

@@DaveGrayTeachesCode Geeezzzz, then I guess I will stay locked up forever 😂

@Grihlo Год назад

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.

@DaveGrayTeachesCode Год назад

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! 💯

@mohammadawais1566 2 года назад

Excellent work Dave 😍

@DaveGrayTeachesCode 2 года назад

Thank you, Mohammad! 🙏

@codernerd7076 2 года назад

Your css videos are awesome!

@DaveGrayTeachesCode 2 года назад

Glad you like them! 💯🚀

@xerxes1321 3 месяца назад

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!

@proddirtneck 2 года назад

How many of css tutorials are you planning on doing? and thanks for posting these for free, ur the goat!!🐐🐐

@DaveGrayTeachesCode 2 года назад

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. 💯🚀

@David-qv9vf Год назад

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

@DaveGrayTeachesCode Год назад

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.

@David-qv9vf Год назад

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.

@my-kz1ed 2 года назад

Thank you for everything

@DaveGrayTeachesCode 2 года назад

You're welcome! 💯

@shineLouisShine Год назад

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..

@DaveGrayTeachesCode Год назад

Keep at it. I think you will get it as you continue to work with it 🚀

@pythonantole9892 2 года назад

CSS is really underrated. I learn and discover new things everyday.

@DaveGrayTeachesCode 2 года назад

Glad I could help!

@hamza77v Год назад

Great content 💫♥️

@DaveGrayTeachesCode Год назад

Thank you 🙌

@myozimandis Год назад

great stuff

@DaveGrayTeachesCode Год назад

Thank you!

@9nikolov 4 месяца назад

17:20 Fix Navbar Link Scrolling Past Card (experiment with the value to get the right behaviour) scroll-margin-top: 8rem;

@stanislavaksenov1700 Год назад

Hi Dave! Wouldn't it have been easier to insert   between Dev and Rel instead of defining a .nowrap class?

@DaveGrayTeachesCode Год назад

You could, but I would rather not insert an entity in there. The class is also reusable. 😀

@ditarahmawati3719 Год назад

hello, i love your text color code.. what your extensions for your color text code and color theme? i love that :)

@DaveGrayTeachesCode Год назад

Github theme

@vaniavladimirova13 5 месяцев назад

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

@yatin1370 Год назад

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?

@yatin1370 Год назад

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.

@DaveGrayTeachesCode Год назад

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.

@yatin1370 Год назад

@@DaveGrayTeachesCode yes did the froggy. Getting comfortable with it day by day...

@liudmyladolzhenko516 Год назад

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?

@DaveGrayTeachesCode Год назад

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.

@liudmyladolzhenko516 Год назад

@@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.

@bnmbnm7278 2 года назад

Did you upload the started code in github?

@DaveGrayTeachesCode 2 года назад

Thank you for the reminder! Now uploaded! 🚀

@amirghiasi100 2 года назад

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

@DaveGrayTeachesCode 2 года назад

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.

@amirghiasi100 2 года назад

@@DaveGrayTeachesCode Thanks for replay man! 💖

@RhyminRome Год назад

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.

@DaveGrayTeachesCode Год назад

- 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