Responsive Web Design Updates

Hello everyone!
I’m stuck creating a quiz, where it asks to add the region element in each section, but that’s all!
Here’s the activity!
2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-15

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

hi, i found a typography error in Responsive Web Design’s part learn css by building a set of colored markers


there in the instruction, color name is blue, it should be green, plz check, i did not know where to report so i am replying here

Does anyone know about how long it takes in (hours) to complete RWD module?

It varies widely from person to person - its pretty hard for us to tell you how long it will take you personally to finish the curriculum

1 Like

I didn’t know if there was an average estimate of how long each lesson should take uninterrupted. If that info is available please let me know.

It varies widely based upon each learner’s background

1 Like

greetings everyone. I’m having a challenge writing the media query of the following codes. please someone help me out. thank you all.

    <nav class="navbar navbar-expand-lg navbar-light bg-light text-capitalize main-font-family">
        <div class="container">
            <a class="navbar-brand" href="index.html"><img src="imgs/logo.png" alt="#" /></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#show-menu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="show-menu">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#home" style="color: white;">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="home.html" style="color: white;">rooms</a>
                    </li>
                    
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown"></div>
                    </li>
                    
                    <li class="nav-item">
                        <a class="nav-link" href="#" style="color: white;">OpulentHub</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html" style="color: white;">contacts</a>
                    </li>
                    <li class="nav-item book d-flex align-items-center">
                    <a href="tel:+2349040000902"class="nav-link">book now</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <header id="home">

        <div class="row">
            <div class="col-lg-4 col-12 lobster-font-family d-flex align-items-center">
               <img src="./imgs/video110.gif" class="photogif">
              <button><a href="#"></a></button>
          </div> 
        <div class="small-container">
            <form class="main-font-family text-center">
                <input type="search">
                <i class="fas fa-search"></i>
                <input type="submit" value="Search">
            </form>
                 </div>
            
            </div>
            <div class="h-slider roboto-font-family welcome d-flex align-items-center justify-content-center">
                <h1 class="text-capitalize">Welcome to <br><span style="color: white; font-size:58px; font-weight:bold;">Opulent Suites</span></h1>
                <div id="headerslider" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    
                    <div class="carousel-item carousel-eight"></div>
                    <div class="carousel-item carousel-seven"></div>
                    <div class="carousel-item carousel-six"></div>
                    <div class="carousel-item carousel-five"></div>
                   <div class="carousel-item carousel-four"></div>
                    <div class="carousel-item carousel-three active"></div>
                    <div class="carousel-item carousel-two"></div>
                 </div>
                  <a class="carousel-control-prev" href="#headerslider" role="button" data-slide="prev">
                    <i class="fas fa-angle-double-left"></i>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#headerslider" role="button" data-slide="next">
                    <i class="fas fa-angle-double-right"></i>
                    <span class="sr-only">Next</span>
                  </a>
                  <a class="carousel-control-next" href="#headerslider" role="button" data-slide="next">
                    <i class="fas fa-angle-double-right"></i>
                    <span class="sr-only">Next</span>
                  </a>
                  <a class="carousel-control-next" href="#headerslider" role="button" data-slide="next">
                    <i class="fas fa-angle-double-right"></i>
                    <span class="sr-only">Next</span>
                  </a>
                   <a class="carousel-control-next" href="#headerslider" role="button" data-slide="prev">
                    <i class="fas fa-angle-double-right"></i>
                    <span class="sr-only">previous</span>
                  </a>
                  </a>
                </div>
            </div>
        </div>
        <div class="st-rec"></div>
        <div class="rd-rec"></div>
    </header>
    
    <div class="about lobster-font-family">
        <div class="container">
            <h2 class="text-center text-capitalize">About our hotel</h2>
            <img src="imgs/shape.png">
            <div class="row">
                <div class="col-lg-6 col-12" style="background-color: orange; border-radius: 12px;">
                    <h4>A best place to enjoy your life</h4>
                    <p>
                        At our stunning boutique hotel, we have a comfortable all-day restaurant for our guests staying with us in downtown abeokuta. Conveniently situated right in the heart of the city, we are open 24 hours and offer from local dishes to gourmet burgers and fries. Come by and enjoy fine dining and drinks in elegant surroundings at any time of the day—we ensure a calm space away from the hustle and bustle that life may somethings present. </p>
                    <button><a href="#">Read more</a></button>
                </div>
                <div class="col-lg-6 col-12">
                    <div class="img"></div>
                </div>
            </div>
            <h2 class="text-capitalize" id="room">rooms & suits</h2>
            <div class="row">
                <div class="col-lg-4 col-12">
                    <div class="img"> <img src="./imgs/hor3.jpg" style="border-radius: 12px;"></div>
                </div>
                <div class="col-lg-8 col-12">
                    <div class="block">
                        <div style="background-color: lightblue; width: 100%; border-radius: 6px;">
                            <img src="imgs/shape.png">
                            <strong></strong>
                            <h5>luxury rooms</h5>
                            <p>Contemporary and comfortable, the Opulent Suites offers rooms and suites designed with neutral tones and modern amenities. Our standard rooms include a king-size bed and spacious bathrooms with a shower.Enjoy the hotel’s secure and quiet setting, and our signature Nigerian hospitality</p>
                            <button><a href="#" class="text-capitalize">Read more</a></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="gallery lobster-font-family" id="blog">
        <div class="container">
            <h2 class="text-calitalize text-center">Our gallery</h2>
            <div class="row">
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="pic-one"><h4>Relaxed swimming</h4></div>
                    <div class="pic-two"><h4>conducive working environment</h4></div>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="pic-three active"><h4>Your place of comfort</h4></div>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="pic-four"><h4>Romantic dinner</h4></div>
                    <div class="pic-five"><h4>Our Restaurant</h4></div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="slider main-font-family">
        <h2 class="text-center text-capitalize main-font-family">what our clients say</h2>
      <div id="slideToNext" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#slideToNext" data-slide-to="0" class="active"></li>
          <li data-target="#slideToNext" data-slide-to="1"></li>
          <li data-target="#slideToNext" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="carousel-caption d-block" style="background-color: olivedrab; border-radius: 12px;">
                <img src="./imgs/fam2.jpg">
              <h5>Mike Kehinde</h5>
              <p> This place is amazing, the staff go above and beyond to make your stay perfect.<br>Great location, affordable prices, and all amenities that are needed for a great stay.
                 </p>
            </div>
          </div>
          <div class="carousel-item">
            <div class="carousel-caption d-block" style="background-color: orange; border-radius: 12px;">
                <img src="./imgs/cus1.jpg">
              <h5>Stephen B. P</h5>
          <p>"Extremely welcoming, immaculately clean and always greeted with a smile.<br> Excellent for money, and the best night sleep you could ask for."</p>
            </div>
          </div>
          <div class="carousel-item">
            <div class="carousel-caption d-block" style="background-color:rgba(165, 42, 42, 0.651);border-radius: 12px;">
                <img src="./imgs/abju.jpg">
              <h5>Mechael Yahaya</h5>
              <p> 
                “Opulent Suites is set in a beautiful location.”
                “Best glamping site ever”
                “Best place we have stayed”</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="contact main-font-family text-center">
        <div class="container">
            <h2 id="contact">Get in touch</h2>
            <div class="row">
                <div class="col-6">
                    <div class="contact-form">
                        <form>
                            <input type="text" placeholder="Name">
                            <input type="email" placeholder="Email">
                            <input type="text" placeholder="Phone">
                            <textarea placeholder="Message"></textarea>
                            <input type="submit" value="submit">
                        </form>
                    </div>
                </div>
                <div class="col-6">
                    <h2 class="text-right">Book Your Holiday Best for relaxed retreats and cultural encounters</h2>
                    <img src="imgs/shape.png">
                </div>
            </div>
        </div>
        <div></div>
    </div>
    
    <footer class="noto-font-family">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-12">
                        <h3>Useful links</h3>
                        <ul class="text-capitalize">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Rooms</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contacts</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12">
                        <h3>Find us</h3>
                        <p>22/24 Oke Ibukun Road,<br>
                            Adjacent Aladesami, 
                            by Madojutimi Junction,Abiola Way<br>
                            (+234) 0904 0000 901<br>
                            (+234) 0904 0000 902<br>
                            customerservice@opulentsuites.org
                        </p>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 form">
                        <h3>Suscribe to Our News Letter.</h3>
                        <form>
                            <input type="email" placeholder="Email">
                            <input type="submit">
                        </form>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="https://www.instagram.com/opulent_hub/"><i class="fab fa-instagram"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    
    <div class="copyright noto-font-family">
        <p>© 2022 All Rights Reserved, opulent suites. Design by <a href="#">Stephen Paago</a></p>
    </div>
    
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
   
</body>
1 Like

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like

I guess we might need to start over

Why do you say that?

This is not so much a problem as it1s a 1question about the HTML code in course itself. My understanding of the ‘class’ and ‘id’ elements was that ‘class’ was to be used when there are multiple occurances of the same element. ‘id’ is be used if it is a unique apperance. Always seemed redundant, but hey, rules are rules. Anyway, since most of the ‘classes’ in this code appear only once, should they not be 'id’s? Or is that practice been dropped?

1 Like

You use a class for one or more elements to style and id for a unique element you want to identify.

The projects start small, so sometimes there are not a ton of elements with the same class.

1 Like

I’ve done the legacy course and now I’m doing this one, I have to say, lessons after the tribute page really keep you in the dark, after a while you’re just doing what you’re told and personally, I have no clue what I’m doing whatsoever.
it’s just all crowded and little explanation, you bring up webkits and aria labels all out of the blue and I have to go check out what they are and it makes me lose track of what I’m doing. The general idea of a more interactive course is excellent, but it’s executed poorly. I’ve only done until the Picasso painting now, nutrition label and the quiz page were also a little confusing, but I honestly have no idea what I’ve been doing with the balance sheet and the Picasso painting were very crowded, too much information suddenly pouring without context, I hope the rest of the course isn’t like this

3 Likes

Well, actually the rest of the course after these couple of lessons I complained about was great and not at all confusing.

2 Likes

I’m sorry to hear that you are experiencing issues with your progress not saving in the web design curriculum. Here are a few steps that you can take to troubleshoot the issue:

  1. Clear your browser’s cache and cookies: Sometimes, issues with progress saving can be caused by a buildup of cache and cookies in your browser. Try clearing them and then logging back into the curriculum to see if your progress is being saved.
  2. Check your internet connection: Poor or unstable internet connections can sometimes cause issues with progress saving. Make sure that your internet connection is stable and that you have a strong signal.
  3. Contact the curriculum support team: If the above steps do not work, you can reach out to the support team for the web design curriculum. They will be able to look into the issue and provide you with a solution.
  4. Use a different browser or device: If the issue persists, try using a different browser or device to access the curriculum. Sometimes, compatibility issues can cause problems with progress saving.

I hope that one of these steps helps you to resolve the issue and that you are able to continue with your coursework without any further issues.

1 Like

this is awesome!! :wink: :triumph:

1 Like

I share with your permission.

okay just started today for the first time

1 Like

please i need help on level 11

1 Like