Skip to content
OverviewSolutions
9
Comments
9

Jamie Reed

@jreed-11Portsmouth, England120 points

Been learning front-end webdevelopment since Jan 21 and been a tough when working full time and being a dad. Loved computers since i was little and only now just reliased that i love front-end web development. Really want to change my career and is my goal and dream. Just wish i had someone to hand

Latest solutions

View more solutions

Latest comments

  • P
    Josephine Fitalvo•280
    @fitalvojosephine
    What challenges did you encounter, and how did you overcome them?

    Grid and responsiveness of the design. I need to keep on practicing and practicing to make this precise. Because some of the industry they need an accuracy and perfect pixel.

    What specific areas of your project would you like help with?

    I want to make the design as precise as possible. However, I have an issue with a group of images. I want to separate them and use a grid layout for each one on both the right and left sides.

    Please provide feedback and help me simplify this. Thank you.

    Meet Landing Page

    #bem
    2
    Jamie Reed•120
    @jreed-11

    Hi,

    I j=was Just looking at your meet page and there is a problem when you start to resize the window smaller. The hero section has overflow.

    Jamie

  • P
    yoyov51234•240
    @yoyov51234
    What are you most proud of, and what would you do differently next time?
    1. I didn't give up. I made it.
    2. The code is heavy for different screens, aslo it's a small project, but I've already feel the file management is out of control, need to work on this.
    What challenges did you encounter, and how did you overcome them?
    1. For the same font, same size, same padding, same line-height, the paragraph's layout is different from the design, I looked for other devs code, and learned I can user padding to make the style.
    2. Used BEM, but not good at defining elements. Will check codes of others to learn.
    What specific areas of your project would you like help with?

    For example, I have a container with 1000px width, and i give this container a gray background, then some content inside the container. When resizing the screen, sometimes the issue occur that the content is outside the container, any suggestion to prevent this from happening? I tried max-width:100%, but it seems doesn't work.

    Meet landing page

    #bem
    1
    Jamie Reed•120
    @jreed-11

    Hi Yoyov, First of all ood effort with this project it had many challenges to overcome and tested a lot of skills to acheive the layout. To answer your question about some content outside the container. Its becuase you are using fixed units 1000px for max with is not dynamic. Try changing px to rem for example.

    The hero section with the imageswas tricky i notice yr images a cut of tp and bottom. To achive the design layout you use padding to move each image up and down and Object fit /poistion to reposition the image as the design shows the image is cut off right and left. Again the hero container should be in dynamic units like rem not px. Becuase your hero container is in px it is cut off top and bottom and the container can't adjust its self based on the content inside. see here at my soloution https://jr-meet-landing-page.netlify.app/.

    Apart from the hero section you done pretty well. Only other thing i would suggest is really look at the sizes onthe design (widths) as your layout is eaxcatly the same. Again when set widths for containers don't usestatic units like px as they can't grow and shrink based on the content inside the container.

    Hope this helps

  • Jamie Reed•120
    @jreed-11
    What are you most proud of, and what would you do differently next time?

    Really proud of this project and on geting the layout close to the design using different CSS techniques

    What challenges did you encounter, and how did you overcome them?

    only a few on how to use CSS grid and ordering items in flex mode so i searched for the solution and solved the issues

    What specific areas of your project would you like help with?

    N/A

    Responsive CSS Grid and Flexbox skills

    2
    Jamie Reed•120
    @jreed-11

    Hi Krishna,

    Thanks for your kind feed back

    CSS Flexbox see - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Css Grid see - https://mozilladevelopers.github.io/playground/css-grid/

    These useful site may help

  • RadaidehDaniel•430
    @RadaidehDaniel
    What are you most proud of, and what would you do differently next time?

    Nothing

    What challenges did you encounter, and how did you overcome them?

    Nothing

    What specific areas of your project would you like help with?

    Is it possible to make a responsive layout in this challenge without using Media Query?

    Testimonials grid section

    1
    Jamie Reed•120
    @jreed-11

    really good effort and near perfect to the design. Made great use of flexbox and grid to get the desktop and mobile layout. The only thing i could point out is the mobile design the cards need to be less width so more square. all in all a great effort

    There is a new way to get a responive layout without media queries and that is @container queries - reference here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

    Marked as helpful
  • Donovan Romero•100
    @nsvonod12
    What are you most proud of, and what would you do differently next time?

    Practice my CSS skills

    What challenges did you encounter, and how did you overcome them?

    I didn't remember how to arrange the cards

    What specific areas of your project would you like help with?

    At the moment, none

    Four card feature section - CSS Grid

    1
    Jamie Reed•120
    @jreed-11

    Nice try with this project and i see you used made good use of grid for desktop and flex for mobile and using custom CSS properties with custom varibles. only advice i could give was is getting the correct width of the Card and title containers slightly bigger than desgin. maybe USe rem units rather than %.

    To set the oder of the flex items you can use the order property see here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items to rearrange the order of the flex items.

    Overall good effot just the width sizes needed to be a bit smaller.

  • SandyAstorga•480
    @SandyAstorga
    What are you most proud of, and what would you do differently next time?

    .

    What challenges did you encounter, and how did you overcome them?

    .

    What specific areas of your project would you like help with?

    .

    Product Preview Card Component

    1
    Jamie Reed•120
    @jreed-11

    Hi Sandy,

    Really clean solution and looks like the design. Love your use of the custom varibles for the colors and like how you added the box shadow at the bottom of the card. Responsivness from Desktop to mobile is slick and great use of flexbox to achieve it. All in all keep up the good work

View more comments