Skip navigation

Start your free month on LinkedIn Learning, which now features 100% of Lynda.com courses. Develop in-demand skills with access to thousands of expert-led courses on business, tech and creative topics.

 Start My Free Month

Creating an Adaptive Web Site for Multiple Screens

Welcome: Creating an Adaptive Web Site for Multiple Screens
Welcome: Creating an Adaptive Web Site for Multiple Screens
Author
Skill Level Intermediate
3h 9m
Duration
261,816
Views
Show More Show Less
Resume Transcript Auto-Scroll

Q: I have set my WAMP server to point to the document root path in the http.conf file as shown in the beginning of the course (C:\Users\myname\Desktop\lynda\Ex_Files_Adapt_Sites\Exercise Files\working folder\staging.mexsantos.com).

This doesn't include the specific exercise file folder (04_04, etc.) in the path. So when I make changes to individual files in those folders, I'm failing to see them appear when I navigate to localhost in a browser. Did I miss a step where the documentroot path was changed? Has a step been missed? Please advise.

A: Your WAMP server/documentroot path is set up correctly. However at the beginning of each chapter, you need to replace the contents of the working folder with the exercise files for that chapter, as instructed in the "Using the exercise files" movie.

To do so, open the exercise file folder for the chapter (e.g. 04_04) and copy and paste the staging.mexsantos.com folder into the working folder on your computer.

Q: I'm having a problem with the exercise files for this course. None of the links work and some of the CSS appears to be broken. 

A: This is probably a file path issue you've encountered due to placing the exercise files into a different folder structure.

The links in the files use an absolute URL, which starts with a '/'. So, take a link like this.

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

This link assumes that you've placed the exercise files in the root folder of your website.

Say that your website is called http://mywebsite.com and that instead of putting the files in the root folder (the folder on your site with every other folder), you move them into a subfolder called "mexsantos". The example above would have to be changed to:

    <a href="/mexsantos"><img src="/mexsantos/images/mexsantos.png" alt="Mexsantos Logo" /></a>

The links to the CSS files would also need to be changed, so that:

    <link rel="stylesheet" href="/_/css/style.css" />

would become:
 
    <link rel="stylesheet" href="/mexsantos/_/css/style.css" />

You can also use relative references. So this link:

    <link rel="stylesheet" href="_/css/style.css" />

becomes:

    <link rel="stylesheet" href="mexsantos/_/css/style.css" />

Notice that this when using relative link references. Any links to the root '/' will need to point to index.html. So this link:

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

becomes this:

    <a href="index.html"><img src="images/mexsantos.png" alt="Mexsantos Logo" /></a>

If you need help with absolute vs relative URLs, check out my course on Managing a Hosted Website. See the video called Understanding link references.

Q: I'm having a problem with the exercise files for this course. None of the links work and some of the CSS appears to be broken. 

A: This is probably a file path issue you've encountered due to placing the exercise files into a different folder structure.

The links in the files use an absolute URL, which starts with a '/'. So, take a link like this.

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

This link assumes that you've placed the exercise files in the root folder of your website.

Say that your website is called http://mywebsite.com and that instead of putting the files in the root folder (the folder on your site with every other folder), you move them into a subfolder called "mexsantos". The example above would have to be changed to:

    <a href="/mexsantos"><img src="/mexsantos/images/mexsantos.png" alt="Mexsantos Logo" /></a>

The links to the CSS files would also need to be changed, so that:

    <link rel="stylesheet" href="/_/css/style.css" />

would become:
 
    <link rel="stylesheet" href="/mexsantos/_/css/style.css" />

You can also use relative references. So this link:

    <link rel="stylesheet" href="_/css/style.css" />

becomes:

    <link rel="stylesheet" href="mexsantos/_/css/style.css" />

Notice that this when using relative link references. Any links to the root '/' will need to point to index.html. So this link:

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

becomes this:

    <a href="index.html"><img src="images/mexsantos.png" alt="Mexsantos Logo" /></a>

If you need help with absolute vs relative URLs, check out my course on Managing a Hosted Website. See the video called Understanding link references.

Q: I'm having a problem with the exercise files for this course. None of the links work and some of the CSS appears to be broken.

A: This is probably a file path issue you've encountered due to placing the exercise files into a different folder structure.

The links in the files use an absolute URL, which starts with a '/'. So, take a link like this.

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

This link assumes that you've placed the exercise files in the root folder of your website.

Say that your website is called http://mywebsite.com and that instead of putting the files in the root folder (the folder on your site with every other folder), you move them into a subfolder called "mexsantos". The example above would have to be changed to:

    <a href="/mexsantos"><img src="/mexsantos/images/mexsantos.png" alt="Mexsantos Logo" /></a>

The links to the CSS files would also need to be changed, so that:

    <link rel="stylesheet" href="/_/css/style.css" />

would become:
 
    <link rel="stylesheet" href="/mexsantos/_/css/style.css" />

You can also use relative references. So this link:

    <link rel="stylesheet" href="_/css/style.css" />

becomes:

    <link rel="stylesheet" href="mexsantos/_/css/style.css" />

Notice that this when using relative link references. Any links to the root '/' will need to point to index.html. So this link:

    <a href="/"><img src="/images/mexsantos.png" alt="Mexsantos Logo" /></a>

becomes this:

    <a href="index.html"><img src="images/mexsantos.png" alt="Mexsantos Logo" /></a>

If you need help with absolute vs relative URLs, check out my course on Managing a Hosted Website. See the video called Understanding link references.

Skills covered in this course
Developer Mobile Web Responsive Design Web

Continue Assessment

You started this assessment previously and didn't complete it. You can pick up where you left off, or start over.

Start My Free Month

Start your free month on LinkedIn Learning, which now features 100% of Lynda.com courses. Develop in-demand skills with access to thousands of expert-led courses on business, tech and creative topics.

Start My Free Month