Skip to content
OverviewSolutions
10
Comments
16
P
Paul Olynek
@ePaulo

All comments

  • Paul Olynek•330
    @ePauloPosted 4 months ago

    I like how you made the UI responsive to mid-size widths... looks better than mine. The only suggestion I have is to include some code to adjust the "hrs" text displayed after the number of hours for current and previous times. For example, this is the code I used: const abbrHours = hours => (hours < 1 ? " " : hours > 1 ? "hrs" : "hr") // if hours is less than 1 (ie. 0)... then add nothing // if hours are more than 1... then add "hrs" // finally (default) if the time is 1... then add "hr"

    Marked as helpful
    0
  • Roselin Y•330
    @Vanillatte68Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy i can get the styling as close to the design including the mobile design. I was able to make this using single page HTML. making the form validation was also pretty easy.

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

    I was thinking about whether to make this as a single page or make another page for success message. but i decided to make it single page by changing the form and success message display on CSS.

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

    I wonder if you can use backend like php to display the success message and how to do it.

    Newsletter Sign Up Form (HTML + CSS + Javascript)

    1
    Paul Olynek•330
    @ePauloPosted 5 months ago

    Looks very good. Both desktop and mobile designs are very similar to the designs provided... well done.

    Only one suggestion: you could have set the newletter image in your mobile-first CSS styling (instead of in your HTML) then reset the link to the desktop image in the media query for the desktop styling updates.

    This is my CSS code for the newsletter image in my mobile styling: img.main-image { content: url('./assets/images/illustration-sign-up-mobile.svg'); width: 375px; height: 284px; object-fit: cover; }

    Marked as helpful
    0
  • Andy•140
    @AStombaughSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I think I kept the code simple and got close on the design. I don't know that I would have done anything differently, I felt like I had a good flow going with this project.

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

    The image swap. I couldn't remember how to do that, but I ended up using CSS and content: url() and that worked for me and made it easy enough to control.

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

    Ensuring that my HTML is clean and I kept the CSS simple. I tried hard not to "over code" this time.

    Responsive Product Card Using HTML & CSS

    1
    Paul Olynek•330
    @ePauloPosted 5 months ago

    I think you succeeded in making your code simple, "clean" and easy to understand... very well done. :-)

    1
  • Paul Olynek•330
    @ePauloPosted 5 months ago

    Suggestions:

    1. try using Semantic HTML in future projects... it's fairly easy to implement and (I think) makes coding HTML more interesting.
    2. try using margin to control spacing about inner-containers.
    3. try using line-height to add some spacing between lines in the paragraph.
    Marked as helpful
    1
  • Lucie•90
    @lucieheliasSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Everything because I start to be more efficient and more faster.

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

    On this one I didn't encounter any issue.

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

    Everything that can be help to improve my code and my way to do it.

    Responsive Product preview card component

    2
    Paul Olynek•330
    @ePauloPosted 5 months ago

    Your HTML and CSS look good. So does your UI based on the design files. I did notice the spacing between the lines is different from the provided design. I've been using the CSS styling "line-height" [https://developer.mozilla.org/en-US/docs/Web/CSS/line-height] to control spacing between lines. Give it a try... I find setting line-height very useful. :-)

    0
  • Paul Olynek•330
    @ePauloPosted 5 months ago

    Class naming is excellent. Responsiveness is very good. A couple of suggestions:

    1. Consider using a CSS universal selector (*) to match elements of any type when resetting margin, padding, border, and so at the top of your CSS code. See the MDN Web Doc... https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
    2. Consider adding line-height settings to content (i.e. the space between lines in a paragraph) to match the design a bit closer. See the MDN Web Doc... https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
    Marked as helpful
    1
  • arun81302•60
    @arun81302Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    i have some problem with flexbox and media query so step by step i am learning these things by applying

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

    there is nothing hard in this section.

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

    i can help with anything in this project.

    html and css

    1
    Paul Olynek•330
    @ePauloPosted 5 months ago

    Three suggestions:

    1. Place your CSS code in a separate file and link to it from your HTML file <head> block, eg. <link rel="stylesheet" href="./assets/css/styles.css" />.
    2. Use "class", instead of "id", when identifying either a specific HTML element or group of elements. Then use "id" to further identify a specific element if necessary. Also try using more descriptive names so it's a bit easier to read your code. For example, I used <p class="publish-date">Published 21 Dec 2023</p> while you used <span id="pub">Published 21 Dec 2023</span>.
    3. Link to the design font, in this case "Figtree", using Google Fonts, eg. <link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet"/>.
    Marked as helpful
    0
  • JacobKnittle•110
    @JacobKnittleSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Getting the responsiveness to work at the header and footer

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

    getting the layouts to work on the different screen sizes

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

    Any tips on laying out the hero and footer on different screen sizes using positioning, flex, or grid

    Meet landing page w/ flex, grid, vanilla css

    1
    Paul Olynek•330
    @ePauloPosted 5 months ago

    I just finished the same challenge and approached it differently. I have no idea whether the person creating the challenge expected you type of continuous responsive solution or my rigid 3 screen type solution. Would be interesting to know.
    You coded the designs VERY close. The few differences I noticed include:

    1. Deskstop:
    • top right avatars image is lower in the design,
    • margin above the "meet" logo is larger (compared to Tablet and Mobile),
    • text in the last section is left-justified.
    1. Tablet:
    • avators image doesn't "overflow" (hidden) a bit on the left and right side, i.e. to they appear to be partially cut off,
    • main title appears to need a bit of padding (left/right) so there's two words per line,
    • title ("Smarter...") also appears to need a bit of padding (left/right) to match design,
    • title ("Experience... ") also appears to need a bit of padding to reduce width to match design.
    1. Mobile:
    • avatar images don't overflow (hidden) so outer avatars are a bit cut off,
    • main title appears to need a bit of padding so two words per line,
    • appears the paragraph under the main title should be a smaller font-size.

    Things you did correctly that I was unable to... 1) in my last section, my divider does not sit over top of the image but fades slightly into it... 2) also in my last section, my download button is not over top of the image but fades slightly into it.

    0
  • git-Indrajit•320
    @git-IndrajitSubmitted 5 months ago
    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?

    Media Query

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

    Media Query

    testimonials-grid-section-main

    1
    Paul Olynek•330
    @ePauloPosted 5 months ago

    I just finished the same challenge and it took me a few tries to figure out how to reorder the testimonials to match the design. If you set both grid-row and grid-column you can get a bit closer to the expected desktop design.

    Marked as helpful
    0
  • Divyam Sharma•160
    @Divyamsharma-18Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    That I did it on my own, no help taken from gpt or anyrhing

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

    None

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

    I tackled it all.

    Four-Card-

    1
    Paul Olynek•330
    @ePauloPosted 5 months ago

    Looks good. One suggestion is to add a width setting to your <header> to limit the width of the text... if/when you decide to make your design look similar to the suggested design.

    Marked as helpful
    1
  • Akansha Yadav•50
    @Akansha82Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully completing this Frontend Mentor challenge.

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

    One of the major challenges I encountered was to properly align the images and text in card.

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

    Any guidance on improving responsiveness, optimizing code structure, or enhancing accessibility would be greatly appreciated.

    Responsive Blog preview card using CSS flex

    1
    Paul Olynek•330
    @ePauloPosted 6 months ago

    Desktop version look nice. :-) Suggestions:

    • use <h1> tag for your main (the most prominent) title, then <h2> for next prominent title/subtitle... then <h3> , and so on. Then use CSS styling for how each title/sub-title looks on the screen.
    • try using a media query to adjust the design for smaller screen sizes.

    My approach to responsive design... write the HTML code based on the desktop design, then write the first draft of the CSS code based on the mobile design, and finally add a media query to add or adjust css code specifically for the desktop design.

    Here's a link to begin learning how to use a media query: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

    Marked as helpful
    0
  • Paul Olynek•330
    @ePauloPosted 6 months ago

    Your desktop design looks good. :-) Suggestions:

    • using <h1> for your main title, ie. <h2>HTML a CSS foundations</h2>
    • try using a media query to adjust the design for smaller screen size.

    Here's a link to get started using media queries: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

    Marked as helpful
    1