I’m honestly lost. I of course went through the CSS section and I’m on Pomodoro Clock but I don’t feel like doing it without learning more CSS goodness. I make ugly webpages and write difficult to maintain code. I’ve just recently learned that inline styling is really really bad (FCC didn’t tell me that or maybe I missed it somehow). My sites are not responsive. They look terrible on mobile and even some look bad when resizing the browser. When I used bootstrap, important ! didn’t work and that’s why I wrote inline style :(. But I’m willing to correct my mistakes and rewrite all my front end projects, but first I need to learn better CSS.
I saw some of you guys’ projects and they looked beautiful. Did you go through other resources outside of FCC? Maybe I should revisit the CSS section in FCC and see if I missed something?
I’m sure there are good courses out there that are not dry and can help guide me through how to make webpages look good. I have access to lynda.com and am willing to purchase on udemy also, but if I’m going to buy on udemy, it should have more than just CSS and HTML in the course.
I can relate. Honestly, you can pick up a lot of CSS from books. Have a look at Amazon and see what has good reviews. I’d also take this time to get a Bootstrap book or watch Bootstrap videos as well as they go hand-in-hand and Bootstrap is the way of the future.
CSS is one of those things that is a real pain in the ass at times, but I wouldn’t call it “hard.” When explained properly, it is very straightforward, but there are definitely some tricky parts.
But I agree with you. To be honest, the FCC curriculum in my opinion is very weak but the community is strong which is why I am here. And this isn’t to knock FCC, I love it and I in fact would love to be apart of improving it. But I honestly don’t see how anyone could not pull every last hair out by just following the “map” curriculum and nothing else. That said, pretty sure the curriculum is intended to be that way, which is why Quincy posted a lot of links to free books.
The thing that drives me nuts is how people keep linking me to references like MDN and W3C all the time… Some people don’t seem to get that not everyone learns well by reading bland reference material, some of us actually need creative instruction. If you are really lost with CSS/HTML, I found the book Head First HTML and CSS helpful. It does a good job of teaching thru example and exercises.
Good that you brought it up. I kind of feel the same. My JS skills are pretty good and I feel confident about it , on the other hand, my projects are looking so ugly. And I am spending more time debugging my CSS then actually making the website does what is supposed to. I feel bad too when I see other developers posting beautiful websites.
The “CSS: Core Concepts” course in that Path is very good and taught me a lot. I also highly recommend “HTML Essential Training” which is very thorough and up-to-date on modern HTML conventions and standards. Actually every course in that Path is really good, I highly recommend doing the whole Path if you can. It was a way better investment for me (not only in terms of money, but also time) than any other MOOCs I’ve tried on other sites that have included Coursera, edX, and Udemy. Udacity is also very good, but I personally didn’t do very many courses on there because I felt I got a more thorough primer to front-end development through Lynda.
I actually found Udemy to have some of the worst MOOCs for one reason or another, and would recommend that you spend no time or money on any courses there—my biggest complaints about it were poor video quality (low production value, low-fidelity audio, and video that constantly slowed down my browser regardless of which one I tried between Firefox, Chrome, and IE/Edge), instructors with bad pedagogical approaches, instructors who clearly lacked sufficient knowledge to teach the material, and instructors with flat-out inaccurate knowledge. And since Udemy has no “vetting” of the instructors and allows anyone who thinks they can teach to offer courses, the instructors range from woefully inadequate to only marginally acceptable. I thought it was shameful to find some instructors who called themselves “industry professionals” or even “teachers” were egregiously inaccurate or inept on critical subjects. And so many courses on Udemy claim to be “Complete” but none of them are, it’s a totally bogus claim.
With Coursera and edX offering courses from real colleges & universities, and Udacity and Lynda offering courses from actual industry professionals, Udemy just doesn’t hold up against them with their poor excuses for “instructors”.
Lot of good books recommended here, but I learned by looking at the best of Codepen every day and trying to recreate things I thought I might be able to make. I ended up learning small tricks with pseudo selectors, centering with transform, flexbox etc.
Dribble is great for design inspiration as well. Also, look up other people’s FCC work, especially the ones you think look nice. Look at their CSS instead of JS so you don’t feel like you’re cheating. In my opinion, trying to make something and looking at cool stuff other people made is a lot more effective than reading CSS books.
EDIT: I would advise you to dump Bootstrap at least for the FCC projects. It’s hard enough to learn CSS without having to deal with a huge external stylesheet as well. Not to mention, almost every Bootstrap site looks very obviously like a Bootstrap site.
First, thank you so much for all of the suggestions!!! I greatly appreciate each of you taking the time to write/list the options here.
lynda.com has great lectures, but sometimes there are just a lot of concepts and could be quite dry. I was 15% into the CSS: Core Concepts and was falling asleep, so I was hoping for suggestion of more interesting ones. But since it is recommended here, I will finish it.
I will also start on Odin and look into books and other choices listed here. I didn’t want to learn Ruby for now, so Odin was never on my mind.
I didn’t think Udemy would be bad in general. I’m going through The Complete iOS 10 Developer Course - Build 21 Apps (just finished section 4), and I thought it was really good so far. I’ve been learning a lot and am able to do simple apps myself vs my prior experience of going through Apple’s Start Developing iOS Apps (Swift), which I did finish and couldn’t remember anything or was able to recreate it. So I thought some courses on CSS on there would not be bad, but I will make sure to be more selective in the future.
One of the big things I’m struggling with is making the website looks good. Yes, I could look at those great projects and try to recreate the design, but it still wouldn’t be my idea, if you know what I mean… I want to be able to come up with that. I always used the same font because I couldn’t make the more interesting font looks right with what I had… Even the colors I chose sucked. They didn’t blend together well. Sometimes, you guys just know how to add that final touch, minor, but it just pops and it makes the page looks so good. I can’t come up with that. And I didn’t want to look at the code of the campers working on the same projects because it would be difficult to resisting copying that awesome code!! It would be cheating.
Anyway, again, thank you everyone . The FCC community is the best.
I didn’t mean to say you should copy the entire thing. Codepen is brilliant because it’s a showcase of little things you can do with CSS instead of a huge project, and you could incorporate those ideas into your design by looking at how that developer used the trick. Copying code and learning from it are very different things.
An example:
I was looking for an SVG twitter icon for my Random Quote Icon and came upon this pen. I thought the gradient was pretty cool, and if the writer took the pain to take out the perfect colors for it. Instead he’d used Sass’ hsl() and for loop to create it. So I searched what the heck hsl is and learned more about Sass.
I decided to make my calculator using the same trick, but without looking at that code again, about a week later. It is copying to a degree, but my loop is different from the original and it helped make my calculator look a lot cooler. It’s 10 lines of code within a 145 line CSS document. Plus I learned a cool Sass trick because of it.
I also gave a link and mentioned the original pen in my comments, which is something you’ll notice a lot of developers on CodePen do, if you check their code. Everyone is picking up someone else’s idea, and improving it, integrating it or adding upon it. That’s the beauty of open and free code.
I do understand your viewpoint though, and maybe you can avoid looking at the other FCC projects so you can come up with something someone else hasn’t. Looking at Codepen and Dribble work however, I can’t recommend enough. Even if you don’t look at the code, just play around and find something you might want to use someday. In that case, heart the pen for later.
P.S. For colors I find coolors and palleton to be amazing resources. Coolors randomly generates color palettes, and also has a showcase of palettes from other users. Paletton gives complementary colors to a color you give it. Both combined make for a fantastic palette.
I understand exactly how you feel. I think teaching Bootstrap early makes me depend on it too much. I realized I didn’t know much CSS after finishing my first four projects. But I also get frustrated with CSS because of the code bloat and “un-programming” behavior it has when compared to Javascript.
So now I’m re-learning CSS the right way. I’m using SASS written in SCSS which is very similar to CSS. You can rename your .css files to .scss files and they should work fine. There’s an extra step to compile the .scss files to .css. But its way better than CSS, allowing you organize your code better. It’ll be easier to debug.
Right now I’m using SCSS with the book “CSS: The Missing Manual, 4th Edition”. The book is quite thorough. Combining these two you should have a better grasp of CSS.
I would like to recommend Front-end blueprint at http://skillcrush.com/blueprint/front-end-developer/ . In the second section 206, we had to build a 7 page mobile-first responsive website from a photoshop PSD file that had design for mobile, tablet and desktop for each page. It took me 2 weeks and spending atleast 6-8 hours every day to finally complete it. I went through 3 revisions during that time. I learnt so much building that site that I can finally say I can do basic CSS in my sleep now after all that typing. Till then CSS to me was voodoo. I just couldn’t get past the very beginner stage. It’s like a light bulb went on after I completed the project and now I feel I have the confidence to build a website of easy to medium level complexity using just HTML and CSS and soon with javascript and JQuery.
If you are a visual learner like me, you would benefit from this course. What I really like about skillcrush is the friendly, supportive community, mini-lessons except for this 7 page project, their forums and regular video office hours. That made a huge difference in my learning. I have programming background in other languages and could pick up beginner javascript easily. But CSS was really hard till now. Initially I thought I would be bored first month of the course as I know basic HTML, CSS, but I learnt quite a bit even in that first month and was able to re-inforce concepts I knew. I do have to mention that we got a lot of hand holding till little bit into the 7 page project and then we were told to build it on our own. I was frustrated in the beginning that we were not getting the same help we got till then. But I am so glad we didn’t get as much help. It forced us to do our own research online to find ways to solve the problem now that we had foundation of CSS. And the students motivated each other and helped each other with finetuning the process on how to build such a website.The instructor did help us but I think she wanted to see if we could figure out amongst ourselves first. skillcrush is more women friendly and they say about 30% of the students are men.
If you do decide to take this course, some things that I figured out:
Don’t go too fast unless you don’t need help. They create a post for each day’s lessons. If you go ahead and need help, you have to email them as they don’t post or look for stuff that’s ahead of that day’s lessons. They will help you with the older lessons though.
Be patient and don’t get frustrated that you know all the concepts in the first month of the course. I was more than half way through freecodecamp’s front end certification when I took this course and I still learnt a lot by doing the mini-projects of 1-page websites and other homework.
I would definitely recommend “HTML, CSS, and Javascript for Web Developers” from Coursera. CSS section of the course is pretty explanatory. Check it out: Cousera CSS
Hey, Thanks for the comment. I just went through your work. I liked it.
I was wondering if you can tell me what path did you follow to learn web development- real projects. i also want to learn the web development and build websites. but can’t understand where to begin and how to continue learning.
. The FCC community is the best.