Played along the tutorial ||Learn CSS Grid the easy way|| but it didn't work the same
I played along the tutorial Learn CSS Grid the easy way in the git provided files but it didn't work the same as the mentor was doing. How to solve this problem?
It didn't create the three columns of 100pxs as it was shown in the tutorial
The problems were also coming in media queries just as
it didn't make every article ".testimonial " horizontal in the screen size below then 800px
27 Replies
Please check out #how-to-ask-good-questions, right now your question is unanswerable
to add to that now that I'm at a PC: You will have to describe what you expected to happen, what happened for you, and share your code, preferably in codepen or something similar, in a way that demonstrates what's going wrong. The video you're probably referencing (feel free to link those, btw, if they're not part of a paid course) is almost 40 minutes long so there's thousands of things that you could've copied down wrong or could've subtly changed in the last three years since that video came out.
@Jochem I have understood to send the url link of the codepen file but in that, where should I keep the folder of images?
Use placeholder images or host them somewhere. https://picsum.photos is a great site for placeholders
@Jochem I forgot to ask that where should I paste the file "style-start.css"? should I paste it inside CSS side of codepen? or it is not needed.
If your issue is clear without it, then no. Otherwise yes
@Jochem We all know the purpose of HTML and CSS files, but what is the purpose of "style-start.css"? does it have the same purpose as "style.css"?
I'm sorry, I don't have an encyclopedic knowledge of all of Kevin's videos, nor do I have the time to watch a 40 minute video. Include what you need to include to reproduce your issue
When kevin applied
at the frequency of 3:13 in the video, the position of his grids were horizontal, taking full width of the line and when I applied
the position of the grids are as follows: -
https://codepen.io/naumantech1/pen/VYZVNeG
I have pasted this link due to the reason that he said, in the video, "When you'll apply display:grid;, no change will happen."
There are other differences also, which will keep coming till the end of the video. This is the first one.
Why do you block out sections of your messages?
@Chris If you'll double click on them, they'll reveal themselves. It is done cause to highlight them whereas not being overlooked.
I just feel that it is just more unnecessary work for anyone wanting to help you. If you need to highlight something you can use bold or italics.
@Chris I have just begun using discord and am not much familiar with it. It has come into my knowledge. Okay, from now on, I'll be using bold and italics.
In the tutorial, from frequency 7:38-8:06, when grid-template-columns:100px; is done, it shows 1 column of 100px in the tutorial, but when I applied the same change in my file, it feels that it changes 2-4 grids simultaneously by doing grid-template-columns:100px;. You can view it as follows: -
https://codepen.io/naumantech1/pen/VYZVNeG
Ahead, when he does grid-template-columns:100px 100px 100px;, it shows 3 columns in the tutorial but when I do it, it doesn't show me 3 columns turn by turn.
Your grid-template-areas and media queries and other code are overwriting the grid-template-columns that you are defining.
I haven't watched this specific video (as far as I remember) but I suspect that Kevin defines the template areas etc. further along in the video so, at this point, they don't exist in his code and that is why he is able to create 1, 2, or 3 columns.
So, Should I comment grid-template-areas and what is inside media queries?
If you want to test what you are looking at in the video, yes.
Ideally, when following a tutorial you need to start from the beginning to ensure that you don't have more code than is required at the point you are watching. As is the case here, code that is added further along in the video is preventing this test (1, 2 and 3 columns) from working.
I don't know much about grid, and so can't personally point out, which code is preventing from test. The purpose of my question was to get a reply from a person, who knows the code about grid.
@Chris Bolson By reading your message, I got vibes that more than putting our attention to follow on the video, we'll have to test which code is unnecessary, for to comment it(<!-- -->, //, /* */) and then look at the ouput resulted the same as in the video. It is hell of a job for a beginner to do, which is impossible for him because he can't point out the code and if he does, he'll waste all his time in pointing out the code than the progress. he'll get bored.
Chris is correct you’re likely overwriting your css as I see you have duplicate selectors at the bottom underneath the media query - looks like another :root, pieces of a reset, another testimonial grid and testimonials children, utility classes again.
You probably want to combine it all so there is one selector per style sheet unless that selector lives in a media query. Then you will have all the styles in one place instead of scrolling up and down to compare styles
Even better since your goal is to learn, would be to nuke it all (except for one :root and the reset pieces) and start over
You also have a class on one of the grid children that I don’t see in the stylesheet (May be a tailwind class?) of grid-col-span-2 which can mess up your grid if you’re using template-areas. It will make that child span 2 until it’s explicitly reverted.
Getting familiar with the dev tools to see which styles are “winning” as well as being able to use the grid inspector , it’s a very valuable tool and helps you visualize. Right click on your element and choose “Inspect”
In the elements panel you’ll see your html , anything with a display: grid will have a little tag that says GRID (same with flex). Toggle on that tag and you’ll have a grid visualizer. Then in the styled drawer you can see which styles are being applied and selector specificity and much more . Look on YouTube for a crash course on “[YOUR BROWSER] developer tools”
Getting more familiar with grid and its properties will be helpful too
https://youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998&si=oR1T7F8C9_tFBhBS
https://youtube.com/playlist?list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY&si=6xarRsDoNIgmqISk
https://css-tricks.com/snippets/css/complete-guide-grid/
YouTube
CSS Grid videos
The CSS Grid is here, and it's awesome. This playlist is a collection of all the videos I do where I use the CSS Grid, whether it's a tutorial specific to us...
YouTube
CSS Grid Tutorial
Chris House
CSS-Tricks
CSS Grid Layout Guide | CSS-Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
@clevermissfox First, thanks for the links to Grids tutorials and your suggestions. The duplication of selectors and : roots that you saw in Codepen, was due to the dragging of two stylesheets named style.css and style-start.css because in GitHub, there were these two stylesheets with index.html files. I guessed these two stylesheets were important so, I pasted them in Codepen with index.html.
From what I can see, the way Kevin set this up was to have a starting style sheet "style-start.css" that contained just the inital styling, not relevant to the specific grid tutorial but containing the basics for a starting point. He then built on this inital style sheet over the duration of the video, resulting in the final stylesheet "style.css".
By importing/copying both of them firstly you are duplicating many property declaration (ie what clevermissfox said) and secondly you are making it impossible for your tests to work as you already have the complete file.
So, you need to start with just the style-start.css and work on that based on what Kevin does in the video.
You don't need to use style.css at any point other than possibly to reference or compare your final result.
Note - Kevin explains just this at around 2.20 in the video
We followed along with what he did, he was making changes in style.css so we also started changing style.css but didn't find the same result as he found. You're right about the frequency. I heard it but didn't figure it out.
He wasn't making changes in style.css. Kevin started with style-start.css.
styles.css was his final stylesheet with all the changes implemented.
He showed us the demo in style.css.
Note:- Kevin is doing it at around 3:15 in the video. display: grid; and so on. Okay, but that's right we had to do it in style-start.css.
also keep in mind that not all of his videos are meant as follow-along tutorials, but more as demonstrations. He might've done stuff off camera or in bits that were cut from the main video for time or clarity
okay that's understood