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
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
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.
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.
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.
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?
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.
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