How can I use the picture tag for a different size of images in this landing page? I tried it but it was just displaying two image even though I put a media attribute with different values just like this:
<picture> <source media="(min-width: 375px)" srcset="...mobile-image.jpg"> <source media="(min-width: 1440px)" srcset="...desktop-image.jpg"> <img src="...mobile-image.jpg" alt=""> <img src="...desktop-image.jpg" alt=""> </picture>
Setting custom properties and utility classes was worth it, kind of saving you from getting more frustrated and it will also make your code readable and less struggle when you want to change some properties values.
Let me know if there is some more improvements I can put on it. I forgot that I should styled the dark theme first 😣😅 Lastly why the layout sizes isn't match with the design? Although I really aligned the design with mine but here it is still not getting the pixel perfect haha. My goal is to learn more but it was more challenging to make the layout accurate with design.
I don't know why the layout becomes different when I submit a solution 😑 when I double check what it should look like in different sizes of browsers. Please give me some tips or tricks on how I can improve the layout in different browsers or devices. Is it because of what device you where developing at that will affect the layout of it? I use laptop by the way.
And why does the grid part of pictures are kind of invisible when someone wants the browser theme set to dark?
This was really hard specially in the part where you need to position the background image and making sure it is also responsive. Thanks to Ms. Elaine who gave me tips to utilize the power of
Although the layout is kind of decreased in size I still learned a lot!
It was challenging on the part of putting the hero image and making its responsiveness. Please give me some feedback on how I can improve it.
Just want to go back again in SCSS. That was more efficient rather than putting all your styles in one file.
Challenge done! This literally challenge me especially in the making of the content horizontally after I made the mobile view. I tried to change properties to fit the image in its parent container but it was already fit. The problem is the padding from the second content that made space in the top and bottom of the image container. So I just came up with a solution of scaling up and aligning the image container to get rid of the spaces but somehow it affected the overflowing share icons even though the image container is overflow hidden, because the share icons needed to overflow the article card. And that is how I made the challenge.
It was overwhelming when I started learning JS like what are these symbols, syntax and functions. All of that made me into frustrated with big eyebags person. And now as a newbie, I am starting to understand JS and feeling more excited to learn more.
After making of this challenge for almost 3 days, I finally finished this! Although my SCSS is kind of messy but I work hard for the layout and the responsiveness of this design. There are a lot of missed elements that needs to be bold or resize.
I really need to fix my media queries or the organization of it because it could cause a little irritation on your eyes : D haha I need some feedback and tips of how I can do it.
It was efficient and organized of making this project with SASS. I enjoyed it a lot, specially the partials in SASS. However, I am still learning how I can organize my media queries. And if you ever use SASS, can you give me some way of how I can do it?
Making this kind of challenge which is a junior level, really challenge me haha. As I am newbie at web development, I always get stuck at sizing of image or having lots of time in giving the font size of the texts. But my problem here is I really could not get the right direction of the links in the footer, can someone comment here of how you got the kind of format of it?
Finally! I finished this challenge. I really got learnings from using grid layout because the design was kinda needed to be coded using it. I want to know more about css grid layout and tips and tricks. Maybe you can put some in a comment? Thank you!
I think I get more improvement these days especially I just started to make mobile view first yesterday and I got less frustrated with that approach. You can try mobile view first, I promise it gets easy.
Hello again Guys!
Finally this newbie project is done. The coding of it got easier because I made the mobile view first and the coding of responsiveness got easier too. I suggest you should try to do the mobile first before the desktop view. Also can I have some feedback? Thank you!