Just wanted to share with you all my finished (for now perhaps) Fotomatic Project. Just a few things to note–some of the specs on my project differ from the specs we were given. I found out that some of the specs given to us were not correct or conducive to the way the project “should have” looked. I took creative liberty on some things while doing the best I could to follow the specs given to us. I did my best to put into practice the lessons learned for that portion of the responsiveness sections.
In general, just want to share my code and looking to see if there are any other ideas or tips to make my code more understandable/optimal/efficient. Particularly on media queries–I’ve read some articles/posts that say it is better to place media queries at the end, others say after each corresponding section, others say it doesn’t really matter where just as long as it is easily readable. I’ve seen examples using all three methods and not sure how it really is in the professional world.
Also, on the naming conventions for divs–I usually tend to give my divs names that describe the content of each section. I see however that a lot of Codecademy’s solution codes to projects have div names such as “jumbotron” or “banner”. Just wanted to know if this is standard in the professional world? Is it something that professional coders are expecting to see when they take a look at my code? Just wanted to get an experienced coder’s take/opinion on this. Furthermore, I changed all the div names as compared to the solution code and deleted many divs since I felt that a lot of those divs were unnecessary.
Aside from that, just want to share with the Codecademy community my progress thus far. Any tips on bettering my code are very much welcomed! My github links are below:
Your project looks great. Parts look a little different from the template, but the point of the project is to learn how to make a site responsive and your project looks great, very responsive.
I’ve noticed there are a lot of different techniques in web design and doesn’t seem they are right or wrong, just a preference. Your question on media queries, I usually put the media query under the class its replacing. I don’t think its’ right or wrong to put it there or at the end, but if you put it above the class it would break the code. So I wouldn’t worry to much about if your preferences are right or wrong, but making sure it doesn’t break the code. From what I understand, if you work for a company they will make it clear the way they want it. This also applies to div names. long or descriptive div names are preference and if an employer wants it done differently it is clarified how they do it.
Wow! Yeah that makes sense. Every company is different so different needs and different way of doing things. Great! Thanks for the feedback Robert. It is very much appreciated. Gives me just a bit more reassurance that I am on the right track. Time for some more coding
Did anyone else notice that the solution code differed from the codecademy code that was on display in google dev tools? The green button for the “Follow us” part of the navbar isn’t there. I couldn’t find any code in the dev tools that had the same media querys as the solution code. I’m wondering if maybe I’m not using the dev tools correctly.
As far as naming conventions for classes go it seems names like “Jumbotron” aren’t industry standard. I have read a lot about BEM for css and although it might be a little bit overkill for what we are doing now I’m going to start using it. The following link is a good article about organization and naming. Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS
Hey, thank you for the input! Yeah–I found out that even the specs didn’t quite matchup with what was shown in the specs picture. And when trying to implement the specs to the actual project the project didn’t actually look all too similar. I tried doing it as close to the specs as I could but at a certain point it just dawned on me that I would probably not be able to get it exactly like the specs. So I modified my code to make it look similar but with my own personal touch.
I am fine just knowing that I do have the know-how and understanding to make the project with the specs provided but in this case though, it seems that the specs provided do not render what the specs picture is actually showing. So I aimed for code that would produce something similar to the specs picture.
The know how is what’s important. Your code looks good. Are you on a certain path in codecademy? I’m doing the full stack path now. I find that I learn faster when I find projects to follow on youtube so I meander off the codecademy path fairly often. I’m just starting to get involved in the forums. Apparently that’s an important part of entering the business. I’ll keep an eye out for your projects and comments. Thanks for the feedback.
I read and saw a couple of videos where some professional programmers opined that learning the front-end is better as a first step into entering the programming profession instead of doing an entire full-stack program off the bat. I figured that as an entry-level programmer my chances are better if I just focus on the front-end part first, land a job, and then increase my skillset to eventually become a full-stack engineer. Either way, once I complete the front-end program I will continue working towards the full-stack program. So that is the plan. Currently doing the front-end program but what I like about Codecademy is that portions of the full-stack program are already being checked off as I continue my learning in the front-end program.
Thanks for the feedback as well. Share your code for this project too so that we can exchange ideas…I have already picked up on other folks’ ideas and it has helped in bettering my code. Hope my coding does the same for others. I’ll be looking out for your projects as well. Keep going forward!
