Ryan Abdaul
@RyanAbdaulAll comments
- @amittam104Submitted 10 months ago@RyanAbdaulPosted 10 months ago
Well, that's great bro you literally make the design as good as the challenge but there's one thing to note, I want u to read about responsive and how to master it, I know that reading articles is boring sometimes but you gotta do that, if you feel lazy I know a great vid I'll leave the link here so you check it out and learn responsive from it
A full course for responsive
https://www.youtube.com/watch?v=hS97LtBdM7I&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw&index=7
0 - @Gitgo012Submitted 10 months ago
What best practices can i do to make the code a little more readable?
@RyanAbdaulPosted 10 months agoHey buddy, sup man? <:
I see that you want us to tell the best practice of css so you make your code is more readable Well, I see this video is going to be helpful for you instead of just telling you the best practice of some things in you code the vid
https://youtu.be/8xCAf50UOA8
for the design, you just have few problems in responsive, but so on that you're awesome, flattery will not help you to fix these problems, so I brought for you another vid to help you under the responsive more, plus I see also you need to read about Flex and how to use it, also read about that's going to be so beneficial for you, if you are serious about that, I mean being from end developer, then don't be lazy and do you best to get better 🔥 Responsive vid :>
https://www.youtube.com/watch?v=VQraviuwbzU
grid article >
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
Flexbox >
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Marked as helpful0 - @Nithin2701sSubmitted 10 months ago@RyanAbdaulPosted 10 months ago
Well, I love people who going off on a tangent, like what you did by not making the exact design because it's easy, but there is one thing to note, I want you to read more about responsive and learn the best ways to do it, because the design is not appropriate with the mobile screen. here a great article to help ya
https://dev.to/rahxuls/mastering-responsive-web-design-l3c
0 - @harpsicordSubmitted 10 months ago
This was my first completed html/css project, so it's obviously not great 😭
There's a lot of space between each of the flexbox elements compared to the example. How should this be fixed?
Also,, I think the only way I could center the whole flexbox was to use margin on it (so I ended up leaving it out), but I'm pretty sure that's not the best way to do it, I think- how should I do that?
@RyanAbdaulPosted 10 months agoHey dude sup, I see you did make the design but you're only problem was how to fix it, I don't wanna tell you, I'm going to give you food for thought, I'll leave here a link for a vid you and then a link for an article so you read this article and watch that vid, so that you can learn many ways to align anything you want in several ways, an article about how to center your elements -> https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
a vid for that ->
https://www.youtube.com/shorts/njdJeu95p6s
please watch these and search about things and avoid asking people how can I do this or that so you learn more than one way to do the same thing, you did do great and hope to see you soon, fingers crossed🤞❤
0 - @HenriquecorcoviaSubmitted 10 months ago@RyanAbdaulPosted 10 months ago
Hey Dude I see you completed the challenge, but the img is not appeared, I guess there is problem
0 - @ezeroualnajatSubmitted 11 months ago
Hi there, I'm Najat and this is my solution for this challenge.
Any feedback on how I can improve and reduce my code is welcome! Thanks.
@RyanAbdaulPosted 11 months agoGreat job man, you almost made this design exactly as it should be, really appreciate your hard work.👌❤
0 - @marcusAzevedo93Submitted 11 months ago
HTML:
The HTML basically consists of a structure that includes metadata and a body with a div of class. Inside the head element, there is also the use of metatags for character and viewport configuration. There are also links to pre-connect to Google Fonts, a link to the favicon icon, and another link to the CSS style file. The page title is defined as and there is a custom grid attribute.
elements i Use
- google fonts
- grid
- links
- character and viewport configuration
CSS:
I used pseudo-selectors to select HTML elements based on their state or position relative to other elements. An example is the :hover pseudo-selector, which selects an element when the mouse is over it. In your CSS code, the :hover pseudo-selector is also used to style the link within the card header when the mouse is over it, including the yellow color.
I also used pseudo-elements to add fictitious HTML elements to the document. They are used to add content to an element without requiring an additional element in the HTML. In the CSS code, the ::before pseudo-element is used to style the fictitious element that appears before the card.
I hope this helps! Let me know if you have any more questions. 😊
@RyanAbdaulPosted 11 months agoI like your design and the way you created it, keep going man, you're doing great.
Marked as helpful0