As the “Web Dev” path became the “Front-End” path I went back to make up the stuff that were not there before, including this project.
[Link to project]
This Project took me by surprise - It’s really not well explained but is actually simpler than it seems (too bad it took me a whole day to realize that).
Sans code samples, here is what I did to make it work: HTML (index.html):
Link the CSS stylesheet to your html!
Fix the links to the images so they would lead to their location in your local directory.
The comment that precedes the “quotes” section is missing a closing “>”, rendering the rest of the html a comment. Close the comment tag, to show the quotes section and footer.
CSS (style.css):
.image-container img : add a rule to set the maximum width as 100% - this is to make sure images are scaled down to the size of their container instead of being cut or overflowing.
Set the z-index of the header to a positive whole number.
sign-up section: add a background image that covers the whole container and doesn’t repeat.
Add a 38px padding to the feature content container.
The class selectors in the quotes section are incorrectly formatted.
I believe there are still more issues to fix with the index.html and styles.css document. I made the same fixes that you mentioned above however my website looks like this:
Thank you @yaelperez for providing us a simple way to look at the project.
This project was challenge for me hence if I may, I would like to mention one thing I believe it is not mentioned in above.
Set consecutive media screen size for tablet and mobile device.
Make adjustments according to the media size.
As mentioned in other posts, it seems like specs and solution code does not match. Personally this project was hard but had much to learn (importance of reset.css, how orders of code can be powerful in @media rule, and so on…). I tried to version control and somehow deleted many files via terminal… but files where recovered and made me want to learn code more. It might be a challenging project but I would go for 80% and keep learning rather than giving up on the project totally.
Guys, in regards to using the spec sheet, I’m finding it really difficult to implement the required amount of padding/margins etc (on the sign up section). This is because when I use the recommended margins, widths etc, the size gets ridiculous and out of proportion compared to the actual website created by codeacademy.
If you’re having issues with it still, you can add me on discord androo#9843 Might be able to help a bit. That goes for anyone else having issues with this project.
I know its been a few months since you were on this post but hopefully you see this. In the #feature section of the Fotomatic. The css selector titled simply “.feature” is grayed out on my atom. I spent over 8hrs throughout a couple of days trying to straighten that area out to no avail and I couldn’t find an error in that selectors group. I finally gave up went to the source of the finished section and copy and pasted it into atom. All of the sudden it was orange and the entire section was perfect. Any idea if this is a bug in atom, or something that I missed?
Sorry man just saw this. I’m not too familiar with atom but if its greyed out I’m assuming it means the css selector is not being used. That means that in the HTML the classes are miswritten (probably on purpose) and you had to fix the class name to target .feature css selector.
So the takeaway:
Make sure your class names in HTML and CSS are correctly pointed at each other
Make sure the CSS selectors are written properly. So I think what happened was in the HTML they did id=“feature” but in the CSS they wrote .feature {} which is incorrect. You would simply need to change .feature{} to #feature{} because # = id and . = class names. Sorry if thats confusing.
I am taking the Front-end engineering career path in Codecademy and I just came across the Fotomat project. I am completely done with the project and would like to have your feedback. Please check out the live version (https://ahman502.github.io/Fotomat/) of my project or if you are stuck in this project and need help with the code, please visit my GitHub (https://github.com/ahman502/Fotomat) and check out the different project files (HTML and CSS) as I have added a lot of comments to help understand how I am manipulating the code to render a similar website as the solution presented by Codecademy. Hope this helps.
