I’m on this project where it gives you broken code and it wants you to make it look like the sample specs. it tells me to use chrome devtools but i have no idea what im doing.
would anyone be able to give me advice or help?
Hi there, Connor!
I also struggled with Fotomatic. I was completely overwhelmed. Probably because I cruised through everything so fast I didn’t conceptualize it, lol. What I would recommend is to load the broken page into Chrome (or browser you use), inspect the page, and turn off each class style JUST to see what each styling is doing to each element. Look at it section by section, and not just as one big chunk. That is what helped me in the end.
that makes me feel better haha. ill try my best and see what i can do. it comes with two style sheets, do i need to link them both in the html? also i prob need a refresh on how exactly to use vscode haha. i was able to open it in a browser but all i see is the text and a bunch of broken image icons lol i have no idea which style is linked to what i see the specs provided but i dont know if the html is messed up like are the images coded in right? i cant really tell where to start tbh i tried doing the inspect function on google chrome but i have a hard time telling what’s what
You can link both stylesheets. I just downloaded the files to see and the second stylesheet is the reset.css. Reset stylesheets are typically used to override certain browser settings. If you inspect with Chrome, you know which styles are applied via the reset.css from this:
You will want to look at these styles:
Once you link the style.css, the page is still going to look wonky. It’s supposed to! Your job will be to make it look like the reference picture given to you by the lesson.
You can use the DevTools to apply different styles or with VSCode, I recommend getting the LiveServer extension, which will display changes to the website as you save them to the CSS stylesheet rather than having to reload the page manually.
i tried to link both style sheets in the html but when i open in browser there is no observable change. is there a way to “run” it like you do in the codeacademy work space? i feel so lost lol like i was hoping to start a new career but maybe if i cant manage or understand this without being handheld then im doing something wrong or in the wrong field
i have 3 tabs open in vscode right now index.html, style.css, and reset.css and i linked both style sheets properly (i think) in index.html but i dont know how to “run” it or compile it all together
In VSCode, this is what your <head> should look like:
You may need to close the tab and reopen it.
I did not see you mention if you use Live Server or not, but I would absolutely recommend to do so.
This way you can see updates to the page as you save.
2 Likes
i linked them how you have it written and i downloaded the extension and when i try to open in browser it’s still a blank white page with text on it and broken image icons. i just found out that i had to file open folder in vscode but the css files arent showing up i dont know
Share the code so we can see what’s wrong. It might be an error with your href path, or something else. Won’t know until we see the code.
Cheers!
thank you for replying, how do I share the code? when i try to copy and paste it here nothing shows up when I post
You link the stylesheets with a relative path: ‘./resources/css/reset.css’
But I don’t see a resources folder in your F1C1_START folder.
Also, the style.css is not correctly linked: A slash is missing after the dot. Instead of ‘.resources’ it should be ‘./resources’.
The resources folder with the css files inside the css folder should be located in your root folder.
You can paste code into this window, then mark the code and click on the </> button in the editor.
when i downloaded the folder there is definitely a resources folder inside with both style sheets but in vscode it shows that there isnt a resources folder so i have no idea what’s going on
i added the / and when i try to open in browser it’s still a white page with text on it nothing else
Rightclick on index.html in VSCode and then click on ‘show in Explorer’ (Windows) / ‘show in Finder’ (Mac). Where is the folder F1C1_START located on your computer and is the resources folder in it? If not (which is probably the case here) move in there.
it’s in app/data/local/temp and you’re right it’s just the index.html file without the rest of the parts that came in the download i have no idea why or what im overlooking lol
Working from a temp folder doesn’t sound like a good practice. Store the downloaded files somewhere, where you easily find them like a ‘Codecademy → Fotomatic’ folder and then open that folder in VSCode.
in my downloads folder the whole thing is there but when i try to open in vscode my downloads folder where i would go to find the project folder i downloaded where it is located is empty
Move the whole thing out of the download folder and move it to another folder in your documents – like Codecademy. Then rename the folder ‘fotomatic’, check if all files are still in there and then open the fotomatic folder in VSCode.
okay i made a folder on my desktop called it code academy projects and downloaded the project folder into there and i was able to open the entire folder in vscode!! im sure this was the root of the issue i was having lol thank you for your assistance and patience. if i work in windows do i have to worry about the macosx folder that came with the project? i assume it’s just two versions of the same thing and you choose according to your os
one more question i have is that when i edit code in vscode does it autimaticaly save/update akin to the “run” feature in the codeacademy workspace or do i have to file save for the updates to take place?
1 Like
It depends on what script you are running. If you’re using a Webpack script with a file watcher (which I am pretty sure you aren’t) it does – as per default you have to save after changing your file. It shows a dot in the files tab if the file isn’t saved.
What’s in there?
the exact same files i think
i linked the stylesheet in vscode properly is everything is organized how it should be?
it looks a lot better like can work from this lol when i open in browser it shows the images that were included in the resources folder but two of them still have the broken image icon and dont show on the screen. do you know how to fix that? i dont know if it’s in the html or the css where im supposed to work