Jack• 490
@Jack-WebDev
Submitted
Any feedback would be great.
Chyunjet
@Jetyun
All comments
- Chyunjet• 620
@Jetyun
Posted
If You can:
- 100% the height on the profile picture when it is in desktop mode
- maybe start the desktop view around 1016px width? because when I adjusted the screen width until 769px the web design for desktop view is a bit distorted.
- insert max-width for your main-content class so that it is adjustable based on the screen width, and you can match the desktop design better for a bigger width for the text
- you could put a logo for mobile view and another logo for desktop view which you can include in the main-content class so that you don't have to put absolute position for the logo in desktop view and the position for the logo will be consistent when you adjusted the screen width
0 - Kevin Garcia• 40
@kevdev04
Submitted
how do you know when it's better to use flex or grid?
Chyunjet• 620@Jetyun
Posted
hmmmm, for me, flex i will use it to arrange the element that needed to be in row or column, so that i no need to use margin or anything to make them tidy, just use justify or align to space each element neatly with each other.
for grid, i think it is best to use it when you have a lot of boxes of content. Imagine that instead of one picture and a textbox, you will have to code 4 more, each with different sizes. On that situation, i will use grid-template-areas to set the template of the design. if you need to amend the size, just go to the grid-template areas to amend the size, no need to set margin and/or padding, width or height on each boxes.
You should try Testimonials grid section challenge and 3-column preview card component challenge to get the idea on usefulness on grid template area
Marked as helpful
1 - Luis Olivero• 170
@Luis-Olivero
Submitted
How do you get the profile picture to be centered between the top image and the body of the card?
How do you get the background images to be positioned in the top left and bottom right?
Any other suggestions are welcomed!
Chyunjet• 620@Jetyun
Posted
you can put the bubble image in the card as background image, then you can use margin to arrange the position of your image.
0 - Abdul rehman• 650
@abymani
Submitted
Setting navigational menu was difficult for me . I think my javascript code is not optimal it does work but there must be a way to do it better. any suggestions will be appreciated.
Chyunjet• 620@Jetyun
Posted
- the Accessibility issue, you can put header tag to contain all the tag that is not in the main tag.
- for HTML, i can only comment on the img tag issue, where you no need to put unit on the width and height (the system knew that it is pixel)
on design:
-
I think you missed the active state on certain button (career, about, login, register and learn more)
-
On the greyed out section in the mobile view, i actually used a div with position: absolute with background color of almost black paired with opacity setting to recreate the design. the div, you can just put above the big picture, no need to put anything in the div tag. Then just use JS to amend the display between none and block when you clicked the menu icon. remember to set the width and height of the div so that the grey area actually covered the same area in the design.
Marked as helpful
0 - Abbas Roholamin• 30
@abbas-roholamin
Submitted
Do you find it easier to work with flexbox or grid to create a responsive layout?
Chyunjet• 620@Jetyun
Posted
hmmmm, for me, flex i will use it to arrange the element that needed to be in row or column, so that i no need to use margin or anything to make them tidy, just use justify or align to space each element neatly with each other. In this challenge, i use flex to change the image from the top (mobile view) to the side (desktop view) from column to row.
for grid, i think it is best to use it when you have a lot of boxes of content. Imagine that instead of one picture and a textbox side by side, you will have to code 4 more, each with different sizes. On that situation, i will use grid-template-areas to set the template of the design. if you need to amend the size, just go to the grid-template areas to amend the size, no need to set margin and/or padding, width or height on each boxes.
You should try Testimonials grid section challenge and 3-column preview card component challenge to get the idea on usefulness on grid template area
0 - Luis Olivero• 170
@Luis-Olivero
Submitted
My image after my media query was squished until it reached a bigger size, how do you make the image more responsive. How do you add the shopping cart icon to the button?
Chyunjet• 620@Jetyun
Posted
- You can put the cart img tag into the btn class tag
Marked as helpful
0 - John Michael Mapilisan• 30
@mikowesome
Submitted
Need help in setting page width for desktop and mobile.
Chyunjet• 620@Jetyun
Posted
-
For mobile, maybe you want to set the container width to be smaller than 350px, because in the design, it seems that there is still some space to see the light blue background color due to the design smaller width.
-
For desktop, you can put @media screen and (min-width: 1440px){} and put the css setting in the curly bracket. When you use F12 and amend the screen width to 1440px, you will see the changes. This is called media query. maybe you want to watch youtube dave gray tutorial on media query to learn more.
- in addition, I think you accidentally insert the paragraph into your footer.
- If you want to you can delete the style tag in HTML and put the .attribution css styling into css file. This is not wrong, but I think it would be a hassle to look for the css styling in future if the styling is not all included in the CSS file (Other challenges may require you to wrote a longer CSS file)
Marked as helpful
0 -
- Omar Vega• 130
@oavaDev
Submitted
I've found it difficult to reduce the size of an image and use it as if it were a div
Chyunjet• 620@Jetyun
Posted
the image, you can just set the width and height in px based on the card class, but a bit smaller. I take time to tamper with it to find the perfect width and height that matched with the design pic. the white space that is between the card class and your image, you can use margin:5px ( or more, I not sure, you can adjust it until it matched with the design pic} to create it.
Marked as helpful
0 - Cole Y.• 60
@Koruxx
Submitted
I had a rough time with this one... it took me more than 3 hours to complete. I spent most of that time trying to figure out how to create the interactive overlay for the image. I also don't understand why my image became was zoomed in whenever I converted it to a link... I could not figure it out and I eventually succumbed to the urge to submit so that I could see what others are doing. If anyone has any advice on how they did it, I'd love to hear!
Chyunjet• 620@Jetyun
Posted
in CSS
- Set the cube picture and container of the picture as position: relative.
- Set the icon view.svg as position: absolute.
- set the cube picture:active (to amend the condition of the picture when you clicked it to see the active state, not :hover) to opacity:0.5 which will make the cube picture 50% transparent when it is clicked so that you can view the icon view.svg behind the cube picture .
Additional: you can put background color on svg file, and padding which will position the eyes to the place you want
in HTML
- Put in the icon view.svg into the same container of the picture. Placed it the line before you put the cube picture in HTML so that they overlay with each other (make sure you do the step 1 and 2 in CSS for them to overlay).
Marked as helpful
1
