@marc115
What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?
css grids still cause difficulties
What specific areas of your project would you like help with?
I will be grateful to those who point out mistakes
@marc115
Posted
Good work, I find nothing wrong with this solution.
@KevinBlyweert
Submitted
What are you most proud of, and what would you do differently next time?
None
What challenges did you encounter, and how did you overcome them?
None
What specific areas of your project would you like help with?
Responsive font size
@marc115
Posted
If you want to make the font smaller, you can use the media breakpoints to specify different font sizes.
@Said-Outaleb
Submitted
What are you most proud of, and what would you do differently next time?
I know now what I can do. I was scared to fail before, but when I started, I got things done. I am proud of myself.
What challenges did you encounter, and how did you overcome them?
how to make it responsive that all
@marc115
Posted
To make a page responsive, there are many options to choose. It's possible to do so with simple HTML and CSS, but personally, I recommend using Tailwind CSS because it makes it quite simple.
Tailwind manages certain states of your app, and among those are the current viewport size. So you can write code that changes according to the viewport. Let me give you an example.
<div class="md:w-6/12 w-full">
</div>
This is a div that changes its width depending on the screen. The md in the class stands for medium, meaning a screen of a medium size, and the w stands for width. The first class essentially means that when the viewport has a size of medium and up, apply a width to this div of 6/12, meaning around half of the available space.
The second part, w-full, tells the div to take all the space it can, as opposed to the previous class w-6/12 class. You would think that these two declarations would conflict, but because you've specified that you want a width of 6/12 specifically when the screen has a medium size (meaning desktop screens or similar), tailwind will apply the 6/12 width instead. Otherwise, it'll just take the full width, as should be the case with mobile devices.
Marked as helpful
@MohamedKerkeb
Submitted
What are you most proud of, and what would you do differently next time?
third challenges
What challenges did you encounter, and how did you overcome them?
third challenges
What specific areas of your project would you like help with?
third challenges
@marc115
Posted
Looks good, nice work.
@Merlinn269
Submitted
What are you most proud of, and what would you do differently next time?
design to code
What challenges did you encounter, and how did you overcome them?
size and space of the elements. I searched
What specific areas of your project would you like help with?
size and space of the elements
@marc115
Posted
For the sizes and spaces, you can check that out on the figma file the exercise provided. Though your solution is almost a 1:1 with the design, so there's little to improve there.
@ghostofegypt
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of the style of the content I may be add some colors and decoration next time
What challenges did you encounter, and how did you overcome them?
i encountred some problems in the external css link and be solved by editing the link itself
What specific areas of your project would you like help with?
may be putting the content inside a box
@marc115
Posted
To put the content inside a box, you should wrap your content inside a <div> element and give it a class name like so:
<div class="box">
...
</div>
And from there, you should be able to define all of its properties in CSS like this:
.box {
...
}
Among the properties that you'll need are one to make the background white, another one for padding, making the box have rounded corners, and make it align its elements vertically in a column.
Marked as helpful