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.
Thank you so much!!
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.
Lynda.com has a really good Path called Become a Front-End Web Developer that I completed a few months ago: https://www.lynda.com/learning-paths/Web/become-a-front-end-web-developer
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”.
I learned a lot doing Codecademy’s CSS projects. That requires a monthly sub though.
This short little website does a good job showing just what CSS can do
Jonathan White has a good article on sources for learning CSS.
And whenever you browse the web keep an eye out for designs you like
Here’s a resource that helped me a lot: https://css-tricks.com/
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.
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.
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.
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.
Hope this helps.
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.