Skip to content
OverviewSolutions
9
Comments
80
P
KonradJam
@KonradJam

All comments

  • P
    KonradJam•1,040
    @KonradJamPosted 3 days ago

    Hello @Lasha-Arveladze!

    Very good solution. In media query min-width also use rem unit.

    Marked as helpful
    0
  • P
    KonradJam•1,040
    @KonradJamPosted 3 days ago

    Hello @donia-elsayed!

    Your solution looks good, but you should fix some problems:

    0
  • Aline Rodrigues•40
    @Aline9402Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    Orgulho de conseguir estilizar boa parte do desafio e entender os erros de alinhamento

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

    Alinhar a ultima parte, o nome com a imagem do rapaz

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

    Estilização

    Blog Preview

    #pure-css
    2
    P
    KonradJam•1,040
    @KonradJamPosted 3 days ago

    Hello @Aline9402!

    Try to use relative units in future projects. You can read about relative units in my post on LinkedIn Also see my LinkedIn profile for articles on HTML5 semantics.

    0
  • Solaima Ismander•30
    @solaima2003Submitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    It's my first challenge so I'm happy how it came out. Next time I will use a framework.

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

    It was easy actually but I'm not pretty sure about my solution like I don't know if my way of typing the code is right.

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

    I tried to place the product image under the div (the card) so the div radius appears above the product image but didn't work so i made the image radius as same as the div's. Any little feedback is welcomed. Thank you :)

    Product Preview Card Component

    1
    P
    KonradJam•1,040
    @KonradJamPosted 4 days ago

    Hello @solaima2003 👋

    Well done!

    • Set overflow: hidden to @solaima2003 and now you can remove border radius from the image.
    • Refactor your solution according to HTML5 semantics
    • Use Relative Units
    • Load smaller image for mobile, larger for tablet/desktop. To do this, use srcset and sizes attributes of the image.
    Marked as helpful
    0
  • Paloma-Cardozo•40
    @Paloma-CardozoSubmitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of how I managed to make the card responsive using Flexbox and Media Queries. The smooth transition with the shadow effect on hover also adds a nice touch. Next time, I’d like to experiment more with CSS animations to make the interaction even more engaging.

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

    I struggled a bit with getting the image in the card to have perfect proportions across all screen sizes. Initially, it was stretching too much or getting cut off. After using object-fit: cover, it helped maintain the image's aspect ratio while covering the entire container, which solved the issue.

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

    I would appreciate feedback on my use of Flexbox for aligning elements within the card. I feel the layout is functional but am unsure if there is a more efficient or cleaner way to structure it.

    Blog Preview Card with Flexbox and Media Queries

    1
    P
    KonradJam•1,040
    @KonradJamPosted 4 days ago

    Hello @Paloma-Cardozo! 👋

    Good job! I don't see a problem with using Flex in your solution. But there are other aspects you could fix:

    • Delete media query. They are only destroying the centering of the component. Add padding to body, change .card width to 100% and max-width to 23.75rem. This will improve responsiveness.
    • Use Relative Units
    Marked as helpful
    1
  • Paulo Wells•530
    @wellsprSubmitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    I focused on replicating the original design while adding a third (tablet) view. I searched for the simplest structure that would work nicely on every layout. I also introduced a smooth animation to the Javascript interaction. I'm pretty happy with the result.

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

    I've put some effort into keeping the code simple and legible;

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

    Feedback is welcome!

    Responsive Article Preview

    #accessibility#animation#sass/scss#lighthouse
    1
    P
    KonradJam•1,040
    @KonradJamPosted 4 days ago

    Hello @wellspr!

    Good work. You don't need two share buttons. One when the share component is hidden and one when it is visible. Change the z-index for the share button to be above the share component.

    1
  • P
    mpujazon•60
    @mpujazonSubmitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    I've learned new features that I've never used before, such as color and spacing variables.

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

    Using Flexbox has been a challenge for me because I'm not experienced with it, and I still have issues positioning elements. I'm proud that I think this challenge has helped me solidify my knowledge of Flexbox.

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

    I had an issue with the rendering of "illustration-article.svg." If you check my solution, you'll notice a white line at the bottom, between the image and the box-shadow. I haven't found a solution for this yet. If anyone knows what the problem is, please let me know. Thank you!

    Responsive blog preview card using Flexbox

    2
    P
    KonradJam•1,040
    @KonradJamPosted 5 days ago

    Hello @mpujazon!

    The white space you see is the background color, but changing it to transparent won't fix the problem. You could crop the image, to do that, add this to card-image:

    max-height: 197px; //or convert to rem
object-fit: cover;
    Marked as helpful
    1
  • P
    kindlypi8MCeN7•120
    @kindlypi8MCeN7Submitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    Nothing in particular.

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

    Nothing in particular.

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

    Nothing in particular.

    Testimonials grid section

    2
    P
    KonradJam•1,040
    @KonradJamPosted 5 days ago

    Hello @kindlypi8MCeN7!

    Good Job! Some advice for you:

    • Improve HTML5 semantics. You could change <main> to <article>, for carts use <section>, in <section> use <header> and others <section>.
    • Add some inline padding for body.
    • Use Relative Units
    Marked as helpful
    0
  • P
    KonradJam•1,040
    @KonradJamPosted 5 days ago

    Hello @Goodboy619!

    Your solution looks nice, but it lacks an important feature.

    • Your article is not responsive. You don't have a media query.
    • First, you should style your article for mobile, and then add a media query for larger devices.
    • For styling is class attribute, not id.
    • Use Relative Units
    • Refactor your code according to HTML5 semantics
    0
  • P
    Nicholas Crawford•50
    @nicholas-crawfordSubmitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    I was pretty happy with how close it was to the design.

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

    I had to fix a lot of the responsiveness at the last minute and I realised some of the CSS resets were breaking some things so I had to remove them.

    What specific areas of your project would you like help with?
    • Does this need any changes for other devices?
    • Anything I could do to make this cleaner?
    • Are there any unnecessary or conflicting styles?
    • Does the site look and function consistently across different browsers?
    • Am I following current CSS and HTML best practices?

    Responsive Blog Preview Card

    #pure-css
    1
    P
    KonradJam•1,040
    @KonradJamPosted 5 days ago

    Hello @nicholas-crawford!

    Nice solution. One of the best I've seen so far. You could improve:

    • Reset CSS at the beginning of the CSS file.
    • Use Relative Units
    • You could use aria-labeledby for better accessibility.
    • Try writing your next code with logical properties
    Marked as helpful
    1
  • FlightReacts11•80
    @FlightReacts11Submitted 5 days ago
    What are you most proud of, and what would you do differently next time?

    idk

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

    media query to hide image on desktop size for when it has to change to mobile

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

    none

    Perfume

    2
    P
    KonradJam•1,040
    @KonradJamPosted 5 days ago

    Hello @FlightReacts11!

    Looks good! Some advice for you:

    • In this situation, don't use media query to hide/show the image. Even if you hide the image, it'll still load and consume extra bandwidth. Use the srcset and sizes attributes of <img>.
    • <h1>-<h6> are for headings, like in this challenge name of perfume. For other text, use <p> or <span>.
    • Read about HTML5 Semantic on my LinkedIn
    • Start using Relative Units
    0
  • baljit-webcoder•50
    @baljit-webcoderSubmitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    What are you most proud of?

    I'm proud of how I successfully built the Social Links Profile using clean and organized HTML and CSS. One of the highlights for me was making the layout fully responsive using media queries. The design adapts well to different screen sizes, which improved my understanding of responsive design principles.

    I'm also proud of the subtle hover effects I added to the social links. They provide a nice interactive experience without overwhelming the user. Using border-radius and object-fit for the profile image was another accomplishment I’m happy with, as it made the image display perfectly round and well-centered.

    Additionally, I improved my understanding of accessibility by ensuring proper alt text for the profile image and maintaining sufficient color contrast.

    What would you do differently next time?

    Next time, I would focus on refining my CSS further by using variables for colors and fonts, making the code more maintainable. I’d also consider using CSS animations for smoother hover effects, adding a slight transition for a more polished experience.

    Another area for improvement would be accessibility. While I included basic alt text, I would like to dive deeper into ARIA roles and landmarks to ensure better accessibility for screen readers.

    Furthermore, I could optimize my project using semantic HTML tags instead of relying too heavily on <div> elements. This would improve readability and make the codebase easier to manage.

    Finally, I would like to explore adding a dark mode toggle for a more user-friendly experience. Implementing that would also help me learn more about CSS variables and theme switching.

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

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

    While working on the Social Links Profile challenge, I faced a few challenges:

    1. Centering the Profile Section

    Initially, I struggled to perfectly center the profile card both horizontally and vertically. After some trial and error, I learned to use display: flex and justify-content: center along with align-items: center, which made the layout much simpler and cleaner.

    2. Making the Image Circular

    The profile picture was square, and making it perfectly circular without stretching or distorting it was tricky. I resolved this using border-radius: 50% combined with object-fit: cover, ensuring it retained its proportions while filling the designated space.

    3. Hover Effects

    Creating smooth and visually appealing hover effects was another challenge. At first, the transitions were abrupt. By using transition: all 0.3s ease, I achieved a smoother animation that enhanced the user experience.

    4. Responsiveness

    Designing for smaller screens was difficult as elements often misaligned. I used media queries to adjust font sizes, padding, and margins to ensure the design remained clean and responsive on all devices.

    5. Button Styling

    Getting the buttons to look stylish and match the design took some time. I experimented with different background-color, border, and box-shadow values until I was satisfied with the look.

    Through these challenges, I learned a lot about CSS layouts, responsiveness, and design consistency. I’m proud of how I overcame these issues and improved my skills in the process.

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

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

    While I'm proud of my progress on the Social Links Profile project, there are a few areas where I would appreciate feedback:

    1. Responsive Design

    I tried to ensure the design works well across different screen sizes using media queries. However, I would like feedback on whether the layout feels consistent on all devices. Are there any specific areas where the responsiveness could be improved?

    2. Button and Hover Effects

    I added simple hover effects to the social links using CSS transitions. I would love suggestions on how I can make these effects smoother or more visually engaging. Would adding more animations or interactive elements enhance the user experience?

    3. Code Structure and Readability

    Since I’m still learning, I would appreciate feedback on the organization of my HTML and CSS. Are there areas where I could use more semantic HTML tags instead of <div> elements? Are my CSS styles well-structured, or could I have used more efficient or reusable code?

    4. Accessibility

    I tried to follow best practices for accessibility by using appropriate alt text for images and ensuring good color contrast. However, I’d like input on any additional improvements I could make to ensure the site is more inclusive and accessible to all users.

    5. Design and Aesthetics

    Although I followed the challenge's design closely, I’d be grateful for any design tips or suggestions. Do the colors, fonts, and spacing work well together? Are there any areas where I could refine the visual appeal?

    Any detailed feedback or tips in these areas would be incredibly helpful for my learning and improvement. Thank you in advance for your time and insights! 😊

    Social Links Profile Solution

    1
    P
    KonradJam•1,040
    @KonradJamPosted 9 days ago

    Hello @baljit-webcoder!

    I have fixes for some major problems in your solution:

    • Use HTML5 semantic. My article about HTML5 semantic on LinkedIn
    • Use relative units like rem or em instead of px. Read my article about Relative Units on LinkedIn
    • Your solution is too wide. Change max-width to a smaller value and add width:100% for better responsiveness.
    • Reorganize your file structure. Create folder assets and in it add folders images, fonts, css for better organization.
    Marked as helpful
    0
  • P
    KonradJam•1,040
    @KonradJamPosted 9 days ago

    Hello @Eng4atou!

    Good job! I have some fixes for your code:

    • Try using HTML5 semantics more efficiently.
    <main> => <div class="container"
<section class="content-container"> =>  <header class="content-container">
<section class="card-container"> => <main class="card-container">
<div class="card [name]-card"> => <section class="card [name]-card">

    You can read more about HTML5 semantics in my post on LinkedIn

    • Use relative units like rem or em instead of px. My publication about Relative Units on LinkedIn
    • Add some padding to the main container, because on the 1024px resolution, card are touching the edges of the page.
    Marked as helpful
    0
  • P
    wstypr•40
    @wstyprSubmitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    I used a media query to set the card's responsive size

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

    How to apply media-query for different screen sizes is challenging.

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

    It is okay for now.

    Social Links Profile Using Media Query

    1
    P
    KonradJam•1,040
    @KonradJamPosted 9 days ago

    Hello @wstypr!

    It is okay for now. - but I will help you anyway 😄

    Marked as helpful
    1
  • P
    KonradJam•1,040
    @KonradJamPosted 9 days ago

    Hello @Thomas-Brito!

    Well done! I have a few tips for improving your code:

    • Don't set the default font size. Your sites or applications should take that from your web browser's settings. It's better to RWD.
    • You can solve this challenge without media query. Set width: 100% and max-width: 24rem, also add padding: 1.5rem to the body. Now you can remove the media query.
    • In this challenge it was mentioned to make fluid typography without media query. To do this, you could use the CSS Clamp() function. How to achieve this, you can read in my publication on LinkedIn about Clamp().
    Marked as helpful
    0
  • P
    KonradJam•1,040
    @KonradJamPosted 10 days ago

    Hello @saharzakersoltani!

    Your solutions look nice, but you don't have a mobile version. To make mobile version you should redesign your code, because firstly we design for mobile, and then we add media query for larder devices.

    Also read about HTML5 semantic. I recommend reading my post on LinkedIn about HTML5 semantics You will also find useful links in the comments.

    0
  • P
    KonradJam•1,040
    @KonradJamPosted 10 days ago

    Hello @PxMach!

    Well done! But you should add tablet layout. Also, you imported the font from Google Fonts into the CSS file, but you didn't use it. Add font-family: "Barlow Semi Condensed", serif; in your testimonials. You could also add box-shadow for testimonials to be more consistent with the challenge.

    1
  • P
    Oryan Hachamoff•230
    @oryanhachSubmitted 10 days ago
    What are you most proud of, and what would you do differently next time?

    I faced difficulties in every step of the way during this challenge. While my code is far from perfect, I am very proud of myself for finishing it. Had many problems figuring out the layouts as I am currently learning how to handle different layouts and Grid/Flex. I do not understand why this project was so soon on the Learning Paths, as it felt like jumping up a few steps instead of one at a time...

    Meet Landing Page Solution

    1
    P
    KonradJam•1,040
    @KonradJamPosted 10 days ago

    Hello @oryanhach!

    Yes, this challenge was tough, but you did it very well. A have some changes for you:

    • You could keep hero images connected to 1024px and above this size you could split them by text. Of course, you should then reduce the size of images.
    • If you want to make it even harder, you could load smaller picture of connected images for mobile, and above load larger images. I did that :D
    • Your numbers are also messed up. Wrap the line and number in <div>, set it to display:flex; and align-items: center; don't use <article> for decorative purposes. Use <div>for that.
    1