Initial Page as per course ( Lesson 1 Section 10 : Add your project ) is not coming up.

[bhupendra1011]

Hi ,
I am learning Udacity course : https://in.udacity.com/course/intro-to-progressive-web-apps--ud811.
In lession 1 , I cloned this repo & when I started code folder { 1- 12- skeleton } from chrome web server . I am not able to view same page as shown in course , blank page with spinner. Instead I get Add your CIty .

Kindly let me know how to get loading spinner page.

[silviolucenajunior]

You need update you index.html file to insert stylesheet and script. Has comments on index.html page about location in code to add this.

[bhupendra1011]

@silviolucenajunior what is the location of index.html that I need to use . I guess it's missing in the repo

[swarupbam]

Just add the path of CSS file.
styles/ud811.css

[pengas]

Just curious why not link to the available stylesheet within the project?

[sunladyjoy]

Added the links to the css & js files yet Chrome's Web Server just keeps spinning & never loading.

ah, gesh https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
it's supposed to be doing that... and apparently only that at this point! hehehe

[kaquinones]

Modify the index.html
line 9: (Insert link to stylesheet here)
with this: (link rel="stylesheet" type="text/css" href="/1-12-skeleton/styles/ud811.css")
Need to do the same thing for app.js line 145 on index.html and images on the css file, for instance:
css file line 96: background: url(/images/ic_refresh_white_24px.svg) center center no-repeat; } you need add /1-12-skeleton before /images/ic_refresh_white_24px.svg
everything should be fine after those changes

[axixnix]

can anyone help me here? I have done the css and js linking but nothing has change the project is still as it was initially.

[axixnix]

this is what it looks like in my browser

[shawnoberrath]

axixnix, in line 10, you need to delete the slash in front of "styles," so "styles/ud811.css"

[apreshagarwal]

Solution to issue #4

• Step 1: Replace the <!-- Insert link to stylesheet here --> on line 9 in ud811-master/1-12-skeleton/index.html with <link rel="stylesheet" type="text/css" href="styles/ud811.css">

• Step 2: Replace the <!-- Insert link to app.js here --> on line 145 in ud811-master/1-12-skeleton/index.html with <script type="text/javascript" src="scripts/app.js"></script>

• Step 3: Replace the background: url(/images/ic_refresh_white_24px.svg) center center no-repeat; on line 96 in ud811-master/1-12-skeleton/styles/ud811.css with background: url(../images/ic_refresh_white_24px.svg) center center no-repeat;

• Step 3: Replace the background: url(/images/ic_add_white_24px.svg) center center no-repeat; on line 98 in ud811-master/1-12-skeleton/styles/ud811.css with background: url(../images/ic_add_white_24px.svg) center center #no-repeat;

• Step 4: Clean your browser cache and close the browser. Now open your browser again and then open the index.html in a new tab to see the changes.