@SzymonRojek
Posted
Hi Shreya,
Well done :D
I have checked your HTML structure, CSS, a few tips for me:
- every testimonial you can treat as a article with header;
- I think status (graduate) doesn't have to be the heading;
- this component we can see as a single page component so also we can add the h1 tag, for example for screen readers => sr-only class with hidden;
- possibly the blockquote can be also added;
- I would suggest to use readable classes (descriptive) => If you didn't learn BEM I'd recommend to start learn it;
- remove styles from CSS and transfer them to the CSS file;
- in this project it will be better do not leave an empty alt;
- reset the styles by adding selector * { margin/padding 0 and box-seizing: border-box };
- don't add height and width to the card (that's a reason why you have to learn flexbox or grid => sometimes we have to add height or width but depends on the project);
- in this project don't use position relative or absolute;
- it will be better to start building project from mobile first with one column, then for tablets: create two rows with two boxes each and below the 5th box for the entire length of the container and finally: desktop design pattern;
- check your HTML issue report (try to six it).
In the end, @sayide mentioned already about it, but I'd recommend firstly start to learn flexbox and when you will be confident with it start to learn grid (don't rush, it will take some time and it is better to learn slowly but effectively) => then you will be able to create good RWD for mobiles, tablets, desktops. Also, about headings: when you want to start your HTML5 structural elements with a h2 (if h1 has been used on the page of course) and then you have to move down the levels gradually if there are other subheadings.
Two courses providing by Wes Bos for free:
Greetings :D
@SeyideHundeyin
Posted
@SzymonRojek I really liked your detailed response. what do you prefer to use, flexbox or grid?
@SzymonRojek
Posted
@SeyideHundeyin
Thank you so much. I like both of them :) it is good to connect them => I still learn grid because it is difficult, lots of details we have to remember. I have read that flex is good for elements inside of the box etc but the grid is amazing for layouts. Of course, it all depends on a project. Sometimes we can use only flexbox which I did a few times :D
Try to see them as a technologies - flexbox and grid => not flexbox / grid
@shreya-bera
Posted
@SzymonRojek Thank you so much for this detailed feedback. I will surely look into this and update the code ! 💕💕💕💕
@SzymonRojek
Posted
@shreya-bera
I am glad you like it. Have a nice coding! :D
@SzymonRojek
Posted
@SeyideHundeyin and @shreya-bera
According to our conversation, Seyide it was a good question flex or grid. I have a read this article from the => MDN.
I really like it.
Cheers! :D
@shreya-bera
Posted
@SzymonRojek Thanks! I will definitely go through this article!😊
@SeyideHundeyin
Posted
@SzymonRojek Thanks, I will check it now!