Skip to content
OverviewSolutions
9
Comments
9
P
Brian Meinert
@bmeinert8

All comments

  • Brian Meinert•160
    @bmeinert8Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how much quicker and accurate I am getting at building these projects.

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

    My biggest challenge was getting the view image hover on the desktop version set up and working properly. I feel like that there is a much better approach than the one I took to get it working, and would love input on this part.

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

    Any and all suggestions and constructive criticism is welcome. Thanks for looking

    Responsive NFT Preview Card

    2
    Brian Meinert•160
    @bmeinert8Posted 3 days ago

    Unsure why the screenshot is moving the price and time left to 2 lines. It does not do this on the live site. Tested on Mozilla Chrome and Edge, as well as on many devices using responsively app, and all pan out in a single line.

    0
  • Brian Meinert•160
    @bmeinert8Posted 9 days ago

    Hey @YonHuJJ, great work on this project. You absolutely nailed the desktop layout portion of this project! I Do have a few suggestions for you to really help out this project and future projects down the line.

    • Responsiveness. You did a great job mimicking the desktop display, but the layout leading in for smaller screens gets a bit messy. Add a few extra breakpoints in your media queries to help clean up the layouts as the screen sizes shrink down.

    • Semantic HTML. Your HTML is written well and works, which is wonderful, but I could suggest using more semantic tags such as <main> <article> <section> <picture> and so on where possible, to really push your html to the next level. Using semantic HTML instead of <div> for everything greatly enhances and helps with SEO. Here is a great article that helped me out a lot with this.

    Overall great work! Keep building and growing your skills!

    0
  • Brian Meinert•160
    @bmeinert8Posted 13 days ago

    Hey @AnneClr, great work on this solution. Everything looks great, code is very readable and well. Only suggestion I have that I am able to offer on this is possibly switching from the 4 card diamond layout to a single column layout for smaller tablet sized screens as well. When I was inspecting your site and playing around with different screen sizes, around 800px screen size the text and images inside the cards started to look a little smushed together with the smaller widths. That's really all I got on this, great work and continue building!

    Marked as helpful
    0
  • Jaypo16•30
    @Jaypo16Submitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of my page looking similar to the example that was given to me because I was struggling with responsive design before this, but I am understanding as I practice. What I would do differently next time is slowing down and taking my time.

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

    Challenges I encountered was trying to get the correct font and colors, but I remembered about google fonts and the read.me file that's where you get the styles from and colors

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

    Getting the responsiveness of the site to look more like example that was given to me I could work on that, but other than that just practice and I will continue to get better.

    Tools like ChatGPT and techniques like the flex property

    2
    Brian Meinert•160
    @bmeinert8Posted 23 days ago

    Good work completing the assignment. I have a couple suggestions to offer that you may find helpful.

    -Adding semantic tags to your code. Semantic tags such as <main> , <section>, etc. help break the code up and make it more readable instead of using divs for everything. It also helps search engines identify your content.

    For media queries I've always gone with dimensions of small medium and large. small being mobile, anything ranging up 576px or 36rem in width, medium being tablets or screens ranging from 577 to 991px or 36.063rem to 61.938, and large being larger tablet screens, laptops, and screen sizes up ranging from 992px or 62 rem. -work with mobile layouts first and then add as you go up. The less code you write the better off you are. For example create your entire design around the mobile layout then adding a media query to change the layout as the screen width expands past the mobile layout.

    -Don't forget about your flex direction. By default flex direction is set to row. When you want your items to stack like in a mobile layout set your flex direction to column to get the contents of your container to stack properly and stay in the column direction for those different sized mobile layouts. before expanding to the row direction for the bigger screens.

    A quick note on flexbox that helped me understand and grasp the responsiveness and what properties to place on which element is this. Parent elements recieve the properties of display (setting how the display is), gap( the space between the child items in the container), flex wrap (when flex direction is row, flex wrap will automatically move the items to the next line when space is needed.), flex-direction ( do you want your child items aligned in a row (default) or in a column.), Justify-content (this works on the main axis of what your flex direction is), and align-items(this works on the cross axis of what your flex direction is.). Child Items recieve flex-grow ( how much space an element will take up in a flex container relative to other flexible items in the same container.), flex-shrink(controls how much a flex item shrinks in relation to other flex items in the same container.) flex-basis (this acts like width).

    Hope this helps you out a bit, keep building and don't give up. The more you create the easier this all becomes! good work so far.

    Marked as helpful
    0
  • Matias Nuñez•50
    @MatiasDN19Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I like the effect on social networks with the "hover"

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

    with the distribution of html code, I was guided with the help of the community on discord

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

    I would like to receive improvements in the html

    Solution N°3

    1
    Brian Meinert•160
    @bmeinert8Posted about 1 month ago

    Hey @MatiasDN19, you really did a great job on this solution! I have a few suggestions that might help take your HTML to the next level!

    • The first suggestion I would make is to wrap the main content of your page in <main> element tag. I never really used the main tags myself until some recent learning. What I've learned is that its best practice to have the <main> tag inside your <body> element as this will help clearly identify the main content of the page. This will help with accessibility and how your content is viewed and understood by search engines. Here's some great documentation on the main element to give you a deeper dive on its use.

    • The next thing I would suggest that I recently learned and have started implementing in my projects is the use of semantic tags such as <header> and <section> tags. This will help break the code up making it more readable and clean up the HTML a bit. Here is some great documentation to help with how to lay these tags out properly in your HTML.

    You've done some wonderful work and I hope this helps you out a bit in future projects. Keep up the awesome work and don't stop building and learning! Can't wait to see what other great things you create!

    0
  • Brian Meinert•160
    @bmeinert8Posted about 1 month ago

    You did a great job creating the project! a few things I would add that I recently learned would be in the CSS, instead of using pixels use rem and em instead. Pixels work best for exact sizing but don't scale well, where rem is a relative unit and will adjust better to different user settings a devices. To help convert from pixels to rem you can use this pixel to rem converter. All and all great work and keep building!

    Marked as helpful
    0
  • Brian Meinert•160
    @bmeinert8Posted about 2 months ago

    good work!

    0
  • gjrestifo•30
    @gjrestifoSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am getting more comfortable with sketching out the structure of HTML code and setting up the proper architecture from the Figma files.

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

    I had to figure out how to use flex containers and gaps to properly separate items.

    Blog Preview Card

    2
    Brian Meinert•160
    @bmeinert8Posted about 2 months ago

    Your finish product looks great, you nailed the desktop version of the design. A few things I noticed from the design that are missing that you may go back in and add if you'd like.

    1. The first thing I noticed missing was when hovering over the page the box shadow hover effect was not present such as in the design.
    2. Another missing piece I noticed was also with the hover effect. You had the main title text change color, which is excellent, but the cursor did not change to a pointer.
    3. There are some very slight changes to sizing in the font and container itself from the desktop to the mobile version of the challenge that I didn't see.

    Again, these are just things that I noticed, and you don't need to go in and make these changes if you don't want to. All and all I think you did a great job! Your code looks good and the design looks right. Keep up the good hard work my friend :)

    0
  • Brian Meinert•160
    @bmeinert8Posted about 2 months ago

    You're very close to the design! What I notice is your margins are a little too wide between the image and the edge of the container. Try reducing and or removing the left and right padding. Otherwise, good job!

    0