Coming up with my own solutions to the issues I came across.
What challenges did you encounter, and how did you overcome them?grid layout
What specific areas of your project would you like help with?Any tips on best CSS practice and layout & how you like to format your CSS.
grid-template-rows: to specify how large (high) you want your rows to be.grid-template-rows: 150px 200px; that way you have more control over how large your individual cards aregrid-template-columns: 100px 150px 150px 200pxRelatively happy with my solution for the tab at the top.
What challenges did you encounter, and how did you overcome them?The cards in the left and right sides of the layout were not centered vertically, so I created 2 rows and had them span both.
What specific areas of your project would you like help with?This is actually my first time using Grid, and I'm not sure what best practices are for layout options. It feels like what I created isn't very flexible. I would be interested in seeing other approaches to this specific layout pattern.
<div class="main-cards">
<div class="supervisor cards">
<h3>Supervisor</h3>
<p class="card-text">Monitors activity to identify project roadblocks</p>
<img src="./images/icon-supervisor.svg" >
</div>
<div class="teamBuilder_Karma">
<div class="teamBuilder cards">
<h3>Team Builder</h3>
<p class="card-text">Scans our talent network to create the optimal team for your project</p>
<img src="./images/icon-team-builder.svg">
</div>
<div class="karma cards">
<h3>Karma</h3>
<p class="card-text">Regularly evaluates our talent to ensure quality</p>
<img src="./images/icon-karma.svg">
</div>
</div>
<div class="calculator cards">
<h3>Calculator</h3>
<p class="card-text">Uses data from past projects to provide better delivery estimates</p>
<img src="./images/icon-calculator.svg">
</div>
</div>
.main-cards {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 25px 25px;
}
-Apart from the difference on the y axis I cant really see a difference between your solution and the design on desktop
N/A
What challenges did you encounter, and how did you overcome them?I couldn't control the bullet points on the in the way that I wanted to, so I used the entity code for a middle dot wrapped in a element to get more precise bullets.
What specific areas of your project would you like help with?N/A
I think your solution looks really good. I also struggled with the bullet points of the unordered list and found this entry on freeCodeCamp to be really helpful and well explained. -https://www.freecodecamp.org/news/how-to-style-lists-with-css/
I'm starting to find my errors easily.
What challenges did you encounter, and how did you overcome them?I was bit confused in the CSS and I overcame by finding the errors.
What specific areas of your project would you like help with?Media query
The way I approach Media query is:
-if I want my <p></p> elements to have a default font size of 15px I write
p {
font-size: 15px;
}
-if I want the font size to be smaller on screens up to a width of 400px I could write:
@media (max-width:400px){
p{
font-size: 10px;
}
}
-if I wanted the font size to be bigger on screens from 1000px and higher I could write:
@media (min-width:1000px){
p{
font-size: 20px;
}
}
... and then apply the same idea to what ever I might want to adjust. I hope this helps
I am unable to see the preview of the website.
I think it might be because the index.html file is in another sub folder in your repository.
The way I understand it, you might have to follow this path on your laptop:
blog/blog-preview-card-main/blog-preview-card-main
and when you are in that folder upload the files to your GitHub repository.
The fact that i was able to do this whole thing without knowing that there was a design file at the first place.
What challenges did you encounter, and how did you overcome them?Guessing the right designs that would be preferable for the task at hand.
What specific areas of your project would you like help with?there are none actually.
Considering there are no questions and you did this without being aware of the design files:
