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
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
If you want to make the font smaller, you can use the media breakpoints to specify different font sizes.
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
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.
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
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
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.
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
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.