I’ve set out to learn front end development several times and every time I work myself through the basics of HTML and CSS and then get frustrated for not being able to apply that knowledge.
I want to be able to practice that knowledge and take a mock up of a website a convert it to HTML/CSS; I can’t seem to wrap my head around how to do that.
At what point should I expect myself to be able to tackle projects like that?
That’s an oddly specific goal. I’m not saying it doesn’t happen, or that it’s even rare, but I’ve never once done it professionally. I would suggest that you go through the FreeCodeCamp curriculum, but start each project by creating your own design in some non-code specific way. This could be Photoshop, or the GIMP, or Paint.NET, or crayons and finger paints, but give yourself some sort of design spec to adhere to before you start coding.
Try watching YouTube videos. I like watching DevTips
That’s a good idea for my next project.
Why not try and test your skills by replicating websites?
Thanks for responding, PortablStick!
How do you mean it is an oddly specific goal? If I want to be able to be a front end developer then shouldn’t I expect myself to be able to take a design mock up and code into html/css?
I’m going through Free Code Camp curriculum and I’ve actually gotten to the part to code my own portfolio page. Do I make a crappy portfolio page that meets the bare minimum requirements and keep moving on?
Thanks for responding, jx2bandito, I’ve actually watched that whole series and I can follow along, but I am floundering when it comes to actually doing it myself. Does that make sense?
Hey Cowwy, that is actually kind of what I am talking about. Either taking a website mock up or a website and trying to replicate it using HTML/CSS. I just keep getting stuck.
Kevin, I do this all the time. The Photoshop mockup I presented in getting the “Go ahead” approval to start the project, is the same PSD file I use to create the first html/css template for that project. I might even let the client play with this html/css template so they can see how it finally looks in a real browser, be able to scroll, see the mouse-over/tabbing or another animation effects.
Of course, if you’re working in a big company where duties are subdivided, then a person may not do this kind of task. But if you’re running your own solo dev biz, well, you’ll be doing this and a lot more (writing proposals, quoting the project, closing the sale, billing the client, etc).
I just keep getting stuck.
How do you eat a big elephant? One bite at a time!
Look at a page (or your photoshop mockup), and divide it into the typical header, content, footer. Just get the big picture. That’s 3 div sections. Then write the CSS for those 3 Div section. Is it supposed to be centered, or fluid? What’s the background-color for each div? Is there a specific height for the header and footer? If yes, specify it in the css, etc… you get the picture?
So now, concentrate at your header section… typically, there’s a logo and other stuff, maybe social icons, a menu, etc. Write divs for those items. Then style them in your css, position them, apply colors, etc. Apply an id so you know your css styling will only affect this particular id. Like div id=“sitelogo” and in your css, create the specifics for #sitelogo.
And you just plow through it, one section at a time. That’s the idea.
But you really need to be familiar with CSS to do this easily, the limited CSS covered in fCC won’t do. There’s a lot, lots and lots of CSS properties not even covered by fCC. So google it up, go to w3schools, or buy a CSS reference manual/book and familiarize yourself with what’s available. — then just practice, practice, practice. Pretty soon, you’ll look at another website or PSD mockup and have a general idea of what to do.
I think I know what the problem is… I have that problem too. 
You’re stuck in the learning loop and not coding enough.
I say stop “learning” and start doing it even if it looks crappy. You’ll learn from those mistakes and you’ll get better overtime.
I have a log of what I did. It doesn’t look like I did a lot, nor I spent a lot of time doing. If I do a comparison, I did a lot. Here is my codepen if you need some ideas.
Code some small stuff in codepen and build your website locally. See how it goes 
Yeah, totally. I don’t think it’s a bad or useless goal, just that it’s, I think, a strange one. It’s just something that you’ll be able to do naturally at some point after having coded for a while, so why make it your immediate goal? You have a long journey ahead of you, and building from spec is a skill you’ll pick up as you gain fluency in CSS and HTML. But, it’s not some ridiculously bad way to spend your time, either. If it makes you more comfortable to practice this, then cool beans. Please don’t stress about it, though.
Yes. I always suggest that people make the ugliest piece of eye-violence they can possibly make. It’s really easy to get paralyzed by analysis and planning, especially when it comes to aesthetics, but when you’re building these projects it’s far more important to just bang them out. You can always go back to change them in any way you’d like, but if you don’t start, you won’t learn. Incidentally, this idea of getting working, usable, but ugly code ASAP is actually far more applicable to front-end work than PSD mockups are. There’s just no room for polished masterpieces in 
Agile Methodology .
Thanks, Owel, for responding! This in conjunction with a post I just read from CSS Tricks about the box model is really helpful. Everything in CSS is a box, I can resize and position those box, and developing a web page is really putting all the boxes on a page and arranging them.
I know that is true. I keep relearning the same CSS properties because I’m worried that I’m not applying it, but learning the same properties isn’t helping me apply it. Do you have a reference book for CSS that you think is best?
You are absolutely right, Cowwy, I am stuck in a learning loop and I think you and PortableStick have a point about needing to just code more. I’m going to keep myself pushing ahead in Free Code Camp 30 minutes every day. What else would you recommend I do to keep myself coding and not sticking in a learning loop?
I understand your point now. Thanks for helping me. I guess I was using it to try to get myself coding more but it really isn’t doing it because it is a huge task. What would you suggest I have as my immediate goal (in addition to pushing through Free Code Camp) to keep me coding?
I really appreciate this advice.
I didn’t use a book when I was learning CSS. Just google it, w3schools is an easy, good site to get started fast.
Also, HANDS-ON PRACTICE is more important than reading, or watching a tutorial video. What you just read/watched won’t stick in your brain if you don’t use it and experience it first-hand. So, don’t cut and paste code when you’re still learning… type it all from scratch. It’s tedious and may be error prone, but you need to burn in your memory what you’re typing and repetition (practice) is key. And when it doesnt work because of typos, it’s great debugging exercise too.
You may also want to get an editor that has code completion. You’ll discover new css properties. Then google it quickly to see exactly what it does, try it out, preview it, play with it.
Hi Kevin,
For learning, I would like to add to the discussion: udemy.com (free and paid ), Khan Academy (free), Codecademy (free and paid) and many more.
I’ve really liked the courses I found on Udemy (they have deals on courses for $10 quite often). One of the reasons I like Udemy is there are so many different teachers with different teaching styles. Some of the courses are “HTML & CSS”, others are “Build an entire project using React or PHP or whatever”. The courses range from 1 hour long to 30+ hours. Just depends on what the different teachers are offering. Also, with some of the courses, the teachers also walk you through setting up your own development environment (or using JSFiddle, JSBin, CodePen, or whatever).
Once you get comfortable building things by following along with tutorials, you may consider signing up for Daily UI and using Dribbble. When I first got into development, this was a great way to find things that designers mocked-up that I could build (designers are encouraged to tag their projects with #dailyui on Dribbble). Basically, this method allowed me not to waste time coming up with the design and instead focus on turning that design into code.
Lastly, don’t forget to seek out other like-minded individuals. In your city, look to see if there are any development meetup groups. There are countless developers that love to share their knowledge and are willing to help new people.
Good luck!
Thanks for responding, Adam! I really appreciate the resources that you linked to and your thoughts.
I don’t understand Dribbble at all, but I feel that I need to be looking at it at least every now and then. I like your idea about finding things that have already been designed so that I can focus on putting it into code.
My local community doesn’t seem to have any meet ups that are happening, but we do have a Facebook page for an area Free Code Camp. I decided to be proactive and I organized a meet up for tomorrow night - hopefully some people show up!
Do you have any thoughts about what meet ups should look like and how they should be ran?
I feel that this is an awesome goal in becoming a great front-end developer.
P1xt has posted a number of guides on this forum that encourage you to do just that - clone things. A part of me hates copying things as I am generally creative and prefer to build my own stuff, but I have recently realized the value in these projects.
When you build your own projects you have complete control of your design so if you don’t know how to do something you can simply avoid it - whereas when you copy something you have no choice but to learn how to build it yourself. There usually are several ways to achieve a design but you have to know at least one of these ways, and often one way is better than another.
In a professional setting the situation is usually similar - you don’t control the design and so you have to be prepared to build anything, often for a range of devices and browsers. And this ability really just comes down to being strong in CSS.
There as lots of awesome CSS frameworks that streamline the process of building attractive UIs, but in order to clone things you really just need to understand the fundamentals and be willing to spend some time researching and trying things out.
In my job, the UI designer provides mock-ups using PS or Sketch and uploaded to Zeplin, a tool that lets us see pixel widths and even generates somewhat helpful CSS (not worth copying most of the time, but good for hex colors, border-radius dimensions, etc.). Taking these designs and making accurate HTML/CSS versions are definitely an important skill for an FE dev.
I found Guil’s CSS courses at teamtreehouse.com (paid) really good honing my CSS and practicing making designs into code.
You could also check out this medium post which gives a lot of steps/ideas for learning FE skills and practicing this skill (he links to several codepens and sites): From Zero to Front-End Hero Part 1
Thanks for responding @RadDog25! I agree with this; it is too easy to allow yourself to only do things you know if you are the one creating the criteria for what needs to be done. If I don’t know how to do something then it is hard for me to know to put that into my design so I can learn to code it.
I’m 100% here. I want to stay away from frameworks completely until I understand the fundamentals that make those frameworks work. I don’t want to learn Bootstrap for an easy way to layout my page until I know I can do it the hard way with just CSS.
Thanks @blackmorrow for the confirmation that it is a needed skill and the recommendation for resources! The Medium post is actually what spawned my thoughts on this topic.
If you don’t mind me asking, how long have you been coding professionally and at what type of company?
I’ve been working almost 6 months on a 4ish-person front-end team exclusively working on a new single-page app (web and desktop via Electron). The company is ~200 person company that started with native mobile/desktop apps, so my team is building a newly-designed web/desktop app with the existing back-end APIs.
For base style framework, we’re using Turret CSS, and for pre-processor we use LESS. But I find I really only use LESS for its nesting specificity and variables (colors).
That is pretty exciting! One day, when I grow up, I’m going to do that too. 
Kevin, congrats on organizing your first meetup!
Meetups come in a variety of shapes and sizes.
For example, one of the meetups I attend, Phoenix JavaScript, will have speakers one week and then the following week, have what is basically open study hall. Other meetups are at coffee shops and people talk and write code and it’s very casual. Some meetups have 75 people show up, others have 5. I find them all valuable in one way or another.
Dribbble is basically a place where designers post their creations. You can find a lot of really great looking designs for inspiration there. Just use that search box to look for something like “website” or “home page”. Once you find a design that you think will challenge you a bit, start building it. For example, here’s one I was inspired by and here’s what I built
Keep on honing your skills and working at it. A good attitude and dedication can make all the difference in getting that first job as a developer. Let me know if you have any other questions.
When i started messing with CSS i really got overwellmed by some pretty complex stuff and i was trying to build a template for it from scratch that looked like most of the WordPress templates i found out around the internet. And i aknowledge this is provably not the best way to start unless you are pretty pretty motivated because you will get stucked a lot of times until you reach a point that you really know what you are doing, so i will leave you my suggestions if you go down this road…
1 - Use W3School, google and stackoverflow A LOT (aswell as this forum, although i didn’t had this resource because i just found out about it 2 days ago lol)
2 - If you are trying to base your template on some existing website use A LOT “Mouse Right Click > Inspect” over the elements you are trying to get done and look at the code of the site and compare to yours, try to understand how things are made in there and then do your own without being copying it (try to make your own changes)
3 - When you still get stuck (because you will… lol) and if you are trying to use an existing template try to get the code of it and open it in Brackets or Atom or whatever editor you use and try to mess with the CSS and HTML to be able to understand how really it is built… If this didn’t worked: stackoverflow, this forum or google should be the way to go ;D
Just so you know my way to really understand CSS was by spending over 1 week trying to make one menu that was hidden in the left hand side and when you hitted a button he poped up then when you clicked anyplace outside the menu it would disappear again… I was trying to make it look like a existing free template i found in the internet and really liked so i made the 3rd advice i just gave you and mess with the HTML and CSS and i finally get it… turned out that my biggest issue was that i was trying to edit a button that was supposetly in the header and in reality the whole menu code, including that button, was supposed to be in a nav tag inside the body… This resulted in a lot week, well not exactly lost since it made me understand exactly how things worked, so i guess it lead me to real progress and was indeed a lost week that made me progress like a month trying to learn CSS xD
Hope it helps you in some way ;D
Thank you @adamgonzls and @gpedro! I’m continuing to work on it; I’m motivated and I’m just constantly pushing forward.
Like right now I need to make my Tribute Page mobile responsive but that is frustrating right now and I’m a little tired of looking at it; so, I’m moving on to JavaScript and I’ll come back in a little bit.