CSS Debugging Joan Boone jpboone@email.unc.edu Slide 1 Some common - PowerPoint PPT Presentation

INLS 572 Web Development CSS Debugging Joan Boone jpboone@email.unc.edu Slide 1

Some common problems Changed the document, but it looks the same in the browser • Did you save your changes first? • Is the page you are viewing the same as the one you changed? Added a graphic, but the broken image icon appears • Is the image file name spelled correctly? • If the image is in a different folder than your HTML or CSS, then you need to include the folder name so the browser can find it. For example, If your HTML references an image in an images folder, you might  reference it as “ /images/cool-photo.jpg ”. If your CSS is in a folder and it references an image in an images folder,  then you might reference it as “ ../images/cool-photo.jpg ” It all depends on where the resources are located in your website folder  structure. Style rules are not being applied (or only some of them) • Typos (peachpuff is a valid color name, peechpuff is not) • Invalid syntax: missing } : ; </div> Slide 2

Some common problems Links to pages are no longer valid • Over time, external and internal links may no longer point to valid web pages, resulting in “link rot” • If you have links to external websites, then you should periodically verify that they are still valid. The website may still exist, but if it has been reorganized or perhaps dated material is removed, then you may have a broken link. • Similarly, with your own website – if you reorganize, rename, or remove resources, then some of your links may break If a visitor to your site enters the wrong URL, or clicks a broken link, the result • is an HTTP response code of 404 – Page not found. Most web hosting services provide a default 404 page for you, but you can create your own Some creative 404 pages: Blizzard, AListApart, Medium  Awwwards: Collection of 404 Error Pages  Smashing: The 101 Course on Crafting 404 Pages  Validation tool: W3C Link Checker Slide 3

Debugging HTML and CSS HTML • Browsers parse HTML permissively – this means that even if syntax errors are found, the page will still be displayed. Browsers have built-in rules that define how to interpret incorrectly written markup. • Some common problems: missing closing tags, misspelled tag names, no closing quotes, improper nesting of elements. • Debugging tools: W3C Markup Validation Service, W3C Link Checker, Chrome DevTools and Firefox Developer Tools CSS Browsers also parse CSS permissively • If a declaration has a syntax error, or the feature is not supported, then it will ignore the declaration and move on to the next one. • If a selector is invalid, then it doesn't select anything, and the whole rule does nothing. Again, the browser moves on to the next rule. • Debugging tools: W3C CSS Validation Service, Chrome DevTools and Firefox Developer Tools Source: MDN web docs: Debugging CSS Slide 4

Exercise: HTML and CSS debugging Should look like this nc-national-parks-debug.html Slide 5