Skip to content
OverviewSolutions
33
Comments
152

beowulf1958

@beowulf19581,970 points

Javascript and Bootstrap

Latest solutions

View more solutions

Latest comments

  • Rapheal24-maker•110
    @Rapheal24-maker
    What are you most proud of, and what would you do differently next time?

    Still learning nothing to to proud of and write the code code with no mistake.

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

    Try to create a way to use unordered list or table, with try and error with research.

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

    I want guidance on how to make the active-state look like that and the desktop and mobile look different? I want guidance on the mistake i made which i am unknown of?

    nft-coding

    1
    beowulf1958•1,970
    @beowulf1958

    First, congratulations on completing this challenge. This was not an easy one. You made good use of flexbox. Your choice of <ul> was unique.

    That said, I have a few suggestions. Best practice is to put the styles in a separate file and link it to the html with a <link> in the <head>.

    Also, make sure you apply the styles to the index.html file, and not any other file. The browser is looking for the index.html file, so your project did not display properly. I was able to view it by copy-and-paste the "nft.Thinking-coding.html" into an index.html on my local computer.

    The ".text p" is very hard to read; consider making it a darker color.

    To answer your question, the part you are missing is the overlay. The heart of this challenge is to find a way to create a square the same size as the image and stack it on top of the image. This is done with the position property.

    First, add an empty <div> with the class of .overlay inside .box, next to the image in the html:

    <div class="box">
    <img class="image" src="./images/image-equilibrium.jpg">
    <div class="overlay"></div>
</div>

    Next we must make an adjustment to .box in the CSS

    .box{
    width: 250px;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
/* to stack our elements we must set their container's 
   position to relative */
    position: relative;
}

    Now we can style the .overlay

    .box .overlay {
/* make the overlay the same size as the image */
   width: 100%;
   height: 100%;
/* add a a background with a color and the veiw icon. 
           note that the color is cyan with 20% transparency */    
   background: hsla(178, 100%, 50%, 0.2) url(./images/icon-view.svg) no-repeat center;
/* stack the overlay on top of the image using position */
   position: absolute;
   top: 0;
   left: 0;
/* set the intiial opacity to 0 */    
    opacity: 0;
}

.box .overlay:hover {
/* when the mouse hovers over the box, the overlay appears*/
   opacity: 1;
}

    Hope this helps. Keep on coding!

    Marked as helpful
  • precious umeh•170
    @precious-umeh
    What specific areas of your project would you like help with?

    The project has two images, one for desktop and the other for mobile. I used the picture element to add both images but then, after writing the media queries and I adjust the screen, I noticed it's still the desktop image that's displaying both for smaller screens. I will really appreciate if I can get a feedback on that so I can adjust it.

    Responsive stats preview card component using css grids and flexbox

    2
    beowulf1958•1,970
    @beowulf1958

    Congratulations on completing this challenge. Overall, the page looks great. Your markup is super clean and formatted for easy reading. The CSS has a nice flow, and separating the media queries from the main styles will make it simple to maintain and scale. This separation of concerns led me straight to the solution.

    I was intrigued by your problem. I also used a similar <picture> and sourceset arrangement with an overlay. Here's what I found:

    First, remove the height from the image (or set it to auto). This will allow the image to resize as expected. However, now the overlay bleeds out of the container. Next, adjust the height of the .img-container in the /* Below 320px */ styles in the media queries:

    /* BELOW 320px */
@media (max-width: 25em) {
  html {
    font-size: 43.7%;
  }
    .img-container {
    height: 33rem;
    grid-row: 1;
  }
}

    Now it work at 1440px and 375px. You may need to adjust the other sizes. Hope this helps

  • kaleab tenkir•70
    @KalSol12
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I was able to build a clean, responsive product card that matches a professional design. I successfully used Flexbox and media queries to ensure the layout adjusts properly between desktop and mobile views. Additionally, I managed to apply consistent styling, spacing, and visual hierarchy, which gave the project a polished look.

    If I were to do this project again, I would spend more time exploring advanced CSS techniques like CSS Grid or transitions for smoother animations. I would also consider using utility-first frameworks like Tailwind CSS or integrating a component-based approach using a JavaScript framework (e.g. React) to better structure and reuse the UI components. Finally, I’d pay more attention to accessibility (e.g. keyboard navigation, contrast) and performance optimization.

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

    One of the main challenges I faced was getting the layout to be fully responsive across different screen sizes. Initially, the card looked fine on desktop but broke on smaller screens. I overcame this by using flex-direction: column for mobile views and row for desktop using media queries. Another challenge was fine-tuning the spacing, font sizes, and button alignment to match the design exactly — small details made a big difference.

    Additionally, working with unfamiliar CSS properties like gap, object-fit, and hover transitions required me to do extra research and testing. I overcame this by reading documentation, testing values in the browser, and referencing examples from trusted CSS resources.

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

    I would like help with improving accessibility — making sure the layout and buttons are fully usable with screen readers and keyboard navigation. I'd also appreciate guidance on how to optimize the project for better performance (such as image loading, minimizing CSS, and faster rendering).

    Additionally, I’m interested in learning how to refactor this layout using modern tools like Tailwind CSS, or how to turn it into a reusable component with frameworks like React or Vue. Finally, I'd love feedback on how to better structure my CSS for scalability and maintainability in larger projects.

    flex

    #c#
    2
    beowulf1958•1,970
    @beowulf1958

    Congratulations on completing this challenge. It looks great on both desktop and mobile. I especially like the way you commented your styles making it easier to read and understand.

    The next step is look into semantic html. Semantic HTML is the cure for div-itis, provides a clear structure for screen readers and other assistive technologies, and makes the code easier to read, understand, and maintain.

    So for this project, you might have <main class="container"> with an <article class="card"> containing two sections <section class="card-image"> and <section class="card-content">.

    You should also use CSS variables. This would make the site easier to maintain. Move the base styles into the <body> styles and then code for the differences.

    body {
  background-color: var(--color-cream);

  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--color-gray-200);

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  padding: 20px;
}

    now you only need to change the elements with different fonts, font-sizes, etc .title, .price-section { font-family: 'Fraunces' } which will save a few lines of code.

    Can't wait to see what you do next. I'm using Tailwind CSS now, and once you get the hang of it, Tailwind saves a lot of time. I am just starting the Vue.js framework which will make my projects reusable and scalable.

  • Lynn Mungai•10
    @amar2pro
    What are you most proud of, and what would you do differently next time?

    I am extremely proud that I got to figure this out on my own without using AI to think of me. The only thing I'll do differently next time is to go for a different challenge with a more complex concept

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

    I didn't understand how to centre the section with the white background but eventually I used "className = 'max-w-2xl mx-auto'" and it worked. Secondly I didn't know how to add the horizontal line between the rows in the table

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

    Trying to understand grid and flex and how to use them to create tables

    Omelette Recipe with TAILWINDCSS YAY!

    #tailwind-css
    1
    beowulf1958•1,970
    @beowulf1958

    Congratulations on completing this challenge. I love that you used Tailwind CSS ! I am also learning Tailwind.

    I have a few suggestions. First, <div class="bg-pink-100 rounded-2xl my-8 p-4"> Your <div> needs some margin. Also the color of the headings is too light; people with poor vision (like myself) have trouble reading it. You should always check the dev tools to make sure the contrast is in the proper range. I suggest 'text-amber-800`, which is closer to the design colors.

    That said, the real challenge in this project is changing the list markers in the <ul> and <ol> Using Tailwind CSS, this is super easy. Tailwind supports the ::marker pseudo-element. Just add it directly to the marker you are styling.

    <h2 class="font-young-serif font-semibold text-2xl text-amber-800"> Ingredients </h2>
<ul class="list-disc pl-6">
        <li class="pl-4 marker:text-amber-800"> 2-3 large eggs</li>
        <li class="pl-4 marker:text-amber-800"> Salt, to taste</li>
        <li class="pl-4 marker:text-amber-800">Pepper, to taste </li>
        <li class="pl-4 marker:text-amber-800">1 tablespoon of butter or oil</li>
        <li class="pl-4 marker:text-amber-800">Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>       
</ul>

    Again, you did a great job and I can't wait to see what you do next.

  • Abdulhamid Abdullahi Sulaiman•230
    @Yaseeru
    What are you most proud of, and what would you do differently next time?

    Nothing much, i just did this cause i was bored

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

    How to style a bullet list

    Recipe Page Solution

    1
    beowulf1958•1,970
    @beowulf1958

    Congratulations on completing this challenge. The page looks great.

    One suggestion: the body text should be 'Outfit' for a cleaner look; only the headings are 'Young Serif'.

    To answer your question: what you are looking for is the ::marker pseudo-element. It allows you to change the color of bullets on ul and numbers on ol -- you can even use it to change the list markers to an emoji! This article explains it all.

    In your project it would be a simple matter of changing the ::before to ::marker, simplifying the styles somewhat.

    section ul li::marker {
     color: var(--Rose-800);
     font-weight: bold;
}

ul li::marker, ol li::marker {
     color: var(--Brown-800);
     font-weight: bold;
}

    Hope this helps.

  • rouhollah-sari•80
    @rouhollah-sari
    What are you most proud of, and what would you do differently next time?

    In this practice I tried to write a clean and easy to edit code. I think I learned bootstrap grid a lot in this practice.

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

    The most difficult challenge I faced in this practice was the column width in bootstrap. The problem was how to set the column size to avoid extra space and benefit from aligning the lines at the same time.

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

    I am a little wonder about the font size and font type in this practice.

    Responsive page using bootstrap

    #bootstrap
    1
    beowulf1958•1,970
    @beowulf1958

    Congratulations on completing the project. It looks good. Your code is well organized, with the different sections in the html matching up to the section in CSS. The comments in CSS are super important. You made good use of CSS variables and the page is responsive.

    Great job using Bootstrap! I am also learning Bootstrap. It is easy to see you put in a lot of work. Maybe too much work? Bootstrap allows you style the font-size, font-weight, padding, and margins as you are marking up the html, saving a lot of time on the backend when applying your custom styles. Also, it is best practice to give each class a meaningful name: class="ingredients" instead of class="part_4" and then each element would be class="ingredients-title" and class="ingredients-text"

    The next step would be to make your html more semantic. Every page needs an <h1>. So in this case you would have a structure something like:

    <div class="main">
  <section class="heading"></section>
  <section class="preparation"></section>
  <section class="ingredients">
   <section class="ingredients">
     <h2 class="pt-4 mb-3 fw-semibold">Ingredients</h2>
       <ul>
          <li>2-3 large eggs</li>
          <li>Salt, to taste</li>
          <li>Pepper, to taste</li>
          <li>1 tablespoon of butter or oil</li>
          <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs.</li>
        </ul>
    </section></section>
  <section class="instructions"></section>
  <section class="nutrition"></section>
</div>

    which simplifies the CSS somewhat

    /* Style for the ingredients*/
.ingredients{
  border-bottom: solid 2px rgba(00, 00, 00,0.1);
  background-color: var(--White);
 }

 .ingredients-title{
  font-family:'Young Serif'
  color: var(--Brown-800);
  font-size: 175%;
 }

 .ingredients-text{
   font-size: 125%;
 }

    Again, great job and keep up with Bootstrap. Once you are familiar with it, it will save you a lot of time.

View more comments