@Joshtemi0
Submitted
What specific areas of your project would you like help with?
How to make it fit on every screen size and look perfect. If possible without making use of media query.
@Joshtemi0
@Jorgel7202
Submitted
@Joshtemi0
Posted
Nice
What are you most proud of, and what would you do differently next time?
Using flexbox and css-grid, projects can be responsive without using media queries. What I would do differently: work better on the css design and learn how to structure my html files.
What challenges did you encounter, and how did you overcome them?
Could see that grids can be added within other grids, You can also use css-grid and flexbox in the same project. Always consulting Google Geminis (consulting artificial intelligence, AI).
What specific areas of your project would you like help with?
Understand the difference between using the background-image property in the css file and the img tag in the html file. In general, learn how to structure the html file, using BEM technology.
@Joshtemi0
Posted
Hi Lisbeth Emperatriz Polidor Solano
background image
is used in css while img
is for html
hero {
height: 50vh;
background: url('./background.jpg') center/cover no-repeat;
color: #fff;
position: relative;
}
while for img
<img src=" image" alt=""img >
Hope this helps
}
Marked as helpful
@AKR2803
Submitted
What specific areas of your project would you like help with?
I need some review on my CSS, also should I be too worried about CSS or just go on to learn Javascript rather than perfecting HTML and CSS?
@Joshtemi0
Posted
You should also learn HTML
and CSS
for front end developer or is important
I think you will have to write a lot of code in javaScript
to make it function as css so try leaning html
and css
they are even easier to learn than javaScript.
Hope this helps.
What are you most proud of, and what would you do differently next time?
This time I tried to use semantic tags like ,
, . I also put `display: grid;` & `place-content: center;`, `min-height: 100vh;` on the body for the centring purpose. I've learned how to use
& `` tags for images with 2 different file sources.
Challenge was rather easy, so I'm gaining confidence with projects like that. So let's go to the next one!
What challenges did you encounter, and how did you overcome them?
The main problem was the image formatting. I used Kevin Powell solution with and tags, which is alternative to standard solution with two different background-images from different sources.
@Joshtemi0
Posted
Almost perfect with the design. Great job
What are you most proud of, and what would you do differently next time?
I was careful of using the proper HTML tags. I studied which tags to use for which case and tried to use them appropriately rather than using all the time. I studied tags from https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
What challenges did you encounter, and how did you overcome them?
I design for table using CSS was bit hard and customizing the list put me through some challenge.
What specific areas of your project would you like help with?
@Joshtemi0
Posted
Great Job
.card {
background-color: hsl(0, 0%, 100%);
width: 38%;
overflow: hidden;
padding: 2%;
border-radius: 15px;
}
I will advise you to stop using percentage for you side it should be in px, rem, em
etc because it will be 20%
of every screen size. So try changing it to px, rem
...
And use midea query also for mobile sizing
Hope this helps
What are you most proud of, and what would you do differently next time?
I was careful of using the proper HTML tags. I studied which tags to use for which case and tried to use them appropriately rather than using all the time. I studied tags from https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
What challenges did you encounter, and how did you overcome them?
I design for table using CSS was bit hard and customizing the list put me through some challenge.
What specific areas of your project would you like help with?
@Joshtemi0
Posted
Great Job
.card {
background-color: hsl(0, 0%, 100%);
width: 38%;
overflow: hidden;
padding: 2%;
border-radius: 15px;
}
I will advise you to stop using percentage for you side it should be in px, rem, em
etc because it will be 20%
of every screen size. So try changing it to px, rem
...
And use midea query also for mobile sizing
Hope this helps
Marked as helpful
@LarisaKampe
Submitted
What are you most proud of, and what would you do differently next time?
My first table ever, I never thought that I would make it but it was fun!
What specific areas of your project would you like help with?
I did a bit of research about and elements and I think I figured it out but any feedback on this topic is more than welcoming. :D
@Joshtemi0
Posted
Great job
But your mobile view is not the same as the given one
The is no margin for the mobile view Hope this help
Marked as helpful
@VincinChristmas
Submitted
What are you most proud of, and what would you do differently next time?
I am proud that it didn't take me long to do this.
What challenges did you encounter, and how did you overcome them?
I had some slight problems in CSS because I forgot to set the max-width. Perhaps my image is a little too big? It doesn't look good on desktop full screen. It is blurry.
What specific areas of your project would you like help with?
image resizing
@Joshtemi0
Posted
Nice
Viewing it on the web browser the image is perfect in sizing
But I case you are still looking for answer you can use
img {
width: 2rem; or any other one you preferred one like px, %, just make sure they are the same height and width
height: 2rem;
}
Marked as helpful
@aeleneh
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of being able to use responsive unit like rem for measurement. Which enhances responsiveness
What challenges did you encounter, and how did you overcome them?
I'm always challenged with being able to get the right measurement for the width and pixels.
What specific areas of your project would you like help with?
The responsiveness on mobile and desktop devices. I still do not understand the concept of media queries yet.
@Joshtemi0
Posted
Great work
From the little I know
You can set the card in the center by using
.blog-content {
position: absolute;
top: 50;
left: 50;
transform translate(-50%, -50%);
}
And for midea queries it will that more time to explain it here so hope this is helpful at this point.
@VincinChristmas
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud that it didn't take me long to complete the project and I was able to do it without any help. I also learned about using new tools such as Figma. It gave me a chance to understand more about design files.
What challenges did you encounter, and how did you overcome them?
I wasn't sure about the font-sizes to use. I had to guess on the font-size for the h1 element.
What specific areas of your project would you like help with?
not sure when I should ever use px.
@Joshtemi0
Posted
Great job
Not a problem using px
. It is just that you will have to be using higher number in setting px
. So for me I do use rem
and it is easy to calculate
Hope this is helpful.
Marked as helpful
@code269
Submitted
What are you most proud of, and what would you do differently next time?
Organized CSS to the best of my current ability
What challenges did you encounter, and how did you overcome them?
Been a while since I've coded, a small difficulty was familiarizing myself with clean code practices and how to manipulate CSS again.
What specific areas of your project would you like help with?
I would want tips on how to best write clean code, whether CSS or HTML. I would like to move forward with the learning path using good practices so that I can rebuild the habit of writing clean code for collaboration in the future.
@Joshtemi0
Posted
Wow great job on the first work here
And to me your code looks clean ๐