codedamn

Convering non-responsive website to responsive

Created by Codedamn about a year ago

0

No description provided

20 Comments

    0

    Where to find the link to work?

    @gunasekaran

    Gunasekaran

    @gunasekaran

    0

    Where is the playground link for this project?

    @treyco

    Trey

    @treyco

    0

    Hello Mehul, is it possible to create files and code in the student playground version, while watching your video tutorials?

    @franklynsmall

    Franklyn Small

    @franklynsmall

    0

    Please provide the actual playground for this particular video

    @sarthakgupta

    Sarthak Gupta

    @sarthakgupta

    0

    I don't find the playground link anywhere???

    @asif4011

    Asif Sharif

    @asif4011

    0

    also a good approach to use:

    @media only screen and (max-width: 1050px) { #container { width: 400px; max-width: 100%; } }

    @anonsas

    Igor Lukjanov

    @anonsas

    1

    STEPS TO GET THE PLAYGROUND : To get the unresponsive website go to "https://dequeuniversity.com/library/responsive/1-non-responsive"Then inspect --> click on HTML tag , right-click and select edit as HTML --> copy the code and paste on playground.Then remove base.To get all the images back: https://dequeuniversity.com/ before src of img.

    @aryannchopraa

    Aryan Chopra

    @aryannchopraa

    1

    Cant find the link of this file to work along

    @imaxis

    Abhishek

    @imaxis

    0

    A link to a playground with starter files would be awesome.

    @wudok

    WuDok

    @wudok

    0

    Please Add Playground with starter files , would make the course interactive as As Basic Html and CSS course

    @arbaz2211

    Arbaz Shaikh

    @arbaz2211

    0

    TO get the Link

    1. Go to https://dequeuniversity.com/library/responsive/1-non-responsive. Go to inspect and edit as HTML then continue by clicking on the HTML tag. once you click on it, the source code shows.
    2. Copy the code and paste on playground 3)Close the STYLES tag to properly work on the HTML because they are written on some page after the BASE tag 4)Copy the href value in the base tag and place it in front of the src attribute in every image tag before deleting the base tag and we are good to go.
    3. cheers budddies
    @chineduwali77

    Chinedu Wali

    @chineduwali77

    0

    // HTML Code

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Non-Responsive Web Site</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="logo"><img src="https://dequeuniversity.com/assets/images/logos/dqu_wordmark.png" width="500" height="67" alt="Deque University"></div> <nav> <ul> <li><a href="https://dequeuniversity.com/library/responsive/1-non-responsive#">Learn about Accessibility</a></li> <li><a href="https://dequeuniversity.com/library/responsive/1-non-responsive#"> Testing Tools</a></li> <li><a href="https://dequeuniversity.com/library/responsive/1-non-responsive#">Discussion Forum &amp; Mailing List</a></li> <li><a href="https://dequeuniversity.com/library/responsive/1-non-responsive#">Blog</a></li> <li><a href="https://dequeuniversity.com/library/responsive/1-non-responsive#">User Guides</a></li> </ul> </nav> <main> <h1>This is an Example of a Non-Responsive Design</h1> <p><img class="floatleft" src="https://dequeuniversity.com//assets/images/accessibility_fundamentals/books-600.jpg" width="371" height="278" alt="A stack of old books, with the top book open and the pages fanned out">This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. </p> <h2>This is a subheading level 2</h2> <p>I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. </p> <h3>This is a sub heading level 3</h3> <p>This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. </p> <h3>This is another subheading level 3</h3> <p>This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. </p> <h2>This is another subheading level 2</h2> <p>This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. </p> </main> <div id="topics-list"> <h2>Accessibility Topics</h2> <ul> <li>Types of disabilities <ul> <li>Blindness</li> <li>Deafblindness</li> <li>Colorblindness</li> <li>Low vision</li> <li>Deafness</li> <li>Dexterity/Motor</li> <li>Cognitive</li> <li>Seizure</li> </ul> </li> <li>Assistive technologies <ul> <li>Screen readers</li> <li>Screen magnifiers</li> <li>Alternative pointing devices</li> </ul> </li> <li>Laws and regulations <ul> <li>Americans with Disabilities Act (ADA)</li> <li>Section 508</li> <li>Air Carrier Access Act (ACAA)</li> <li>(CVAA)</li> </ul> </li> <li>Guidelines <ul> <li>Web Content Accessibility Guidelines (WCAG)</li> </ul> </li> <li>Certification <ul> <li>IAAP Certified Associate in Accessibility</li> <li>IAAP Certified Professional in Web Accessibility</li> </ul> </li> </ul> </div> <footer> <p>Copyright 2015 Deque Systems. All rights reserved. <a href="https://dequeuniversity.com/library/responsive/1-non-responsive#">Terms of use</a>. </p> </div> </body> </html>
    @grinder21

    Rohan Sharma

    @grinder21

    0

    // StyleSheet

    body { margin:0; padding:0; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }

    #container { width:1000px; margin:auto; }

    #logo img { padding:4px; }

    nav { background-color:#325EB2; text-align:center; }

    nav ul { margin:0; padding:0; list-style:none; display:inline; }

    nav li { margin:0; padding:0; list-style:none; display:inline; }

    nav a { color:#fff; text-decoration:none; display:inline-block; margin:0; padding:4px 8px; font-weight:bold; }

    nav a:hover, nav a:focus, nav a:active { background-color:#213091; }

    img.floatleft { float:left; margin:0 5px 5px 0; }

    main { padding:10px 30px; float:left; width:700px; padding:0 10px 10px 0; box-sizing:border-box; }

    #topics-list { float:right; width:300px; box-sizing:border-box; padding:0 0 10px;

    }

    footer { clear:both; margin:20px 0 50px 0; text-align:center; background-color:#eee; padding:3px; }

    @grinder21

    Rohan Sharma

    @grinder21

    0

    This is really useful. I was aware of media queries but I need to know exactly the line @media only screen ... means

    @pritamchougale

    Pritam Chougale

    @pritamchougale

    1

    for those using the text from Rohan Sharma to copy paste the html into your IDE and cant get it to format correctly you can try https://www.freeformatter.com/html-formatter.html#ad-output to get it into a readable format

    @poseidon

    Javier Rivera

    @poseidon

show more answers
Your comment