Skip to content

Branches-Sara#27

Open
sarashahbaig wants to merge 2 commits intoAda-C12:masterfrom
sarashahbaig:master
Open

Branches-Sara#27
sarashahbaig wants to merge 2 commits intoAda-C12:masterfrom
sarashahbaig:master

Conversation

@sarashahbaig
Copy link

Startrly

Congratulations! You're submitting your assignment.

Comprehension Questions

Question Answer
Describe a time you chose to use flexbox I use flex-box more then grid because it was easier for me one of the places were i used flex-box was at the beginning for my nav ul tag so i can easy arrange them at it was showing on the example given.
Describe a time you chose to use CSS Grid I used grid only ones for my assignment at the last for the image of five boxes, i felt for boxes image it will be easier to use grid and it did work well, but not exactly as the image example was given.
What was a challenge you overcame in this project? I was having difficult with using grid and flex which took a lot of time to figure out that how to use them so i can get what i wanted my page to look like. alining the images and paragraph beside them was difficult.
What concept did you get the most clarity on through Startrly? I got a better understanding of how and where to use classes and id. It also helped me to understand flex- box and grid use.

Copy link

@gracexinran gracexinran left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job! You used a lot of classes which are helpful to add the css attributes to specific section of code. I would also recommend to adjust maybe the flex-boxes setting (or other options) to make it more similar to the mobile view when shrink the screen size. Currently most of the images are not wrapped to the next line.

#why-box img {
float: left;
margin-right: 10px;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The space between each list (text and image) will be changed and they are not wrapped to the next line. It can be helpful if adding a flex-flow: row wrap.

}
.flex-item {
width: 33%;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May be give a value like 200px to the width then the images could be wrapped to the next line.


.team-item-container * {
margin-bottom: 10px;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice to use *!


.support-about div {
width: 33%;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also recommend to use the value of width.


nav ul li:first-child {
flex-basis: 50%;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of flex-basis and much cleaner than me!!

grid-template-columns: auto auto auto;
justify-content: space-around;
grid-gap: 50px;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw that at here the images for sponsors changes(shrank) when changing the size of screen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants