I would suggest a modified BFS. It's much more fun and practical to learn HTML and CSS at the same time. I would highly recommend though for you to learn and have a good foundation in graphic design first before jumping to web design so that you won't have to deal with unnecessary frustrations (visual design frustrations) when you start learning to code.
Here's a modified and simplified list with bits of details if you want to dive into web design.
- Graphic Design. Make sure you get a good solid foundation in this one before jumping into coding. Web design needs to be beautiful, functional and organized. Without the proper knowledge in this will just keep you at bay to produce outstanding work. Web design heavily relies on 3 major things in graphic design. That is Typography, Grid and Color Theory.
I highly recommend the following books to get you started:
Once you have a grasp on those things, read a few more things about web grids. In my estimate, around 90% or more websites nowadays are using grids. Grids such as 960 Grid System. Famous frameworks like Twitter Bootstrap (http://getbootstrap.com) and Zurb Foundation (http://foundation.zurb.com/) uses web grids. Why? For modularity purposes, design and code wise. It's been proven over the years that it's easier and faster to code designed web pages that uses grid.
Make sure to practice and get your hands busy with what you learn in this stage. Design web page mock-ups using Photoshop or Sketch. You will definitely have a hard time at first, but don't be discouraged. If you're having a hard time, try replicating or redesigning your favorite websites or create a web page about yourself!
Lastly, If you're planning to do this for a living, you have to be passionate with it. Like everyone else in graphic, visual design. You need to learn to see. You need to continually develop an eye for good and great design. You have to be immerse yourself in the vast ocean of visual design. Check out the works of the talented passionate designers all over the world. You can see them hanging out on Dribbble, Behance and the likes. Create and follow pin boards on Pinterest. This is going to be your fuel to be able to produce outstanding work.
- HTML & CSS. After spending a focused month or two learning the basics of graphic design. You're probably more than ready, even itching to start implementing your designs to actual code. Learning HTML alone is boring and since you already have designed web pages and layouts, you probably want to see those designs come alive section by section, element by element.
There are bunches of ways to start learning to code HTML and CSS at the same time, but before doing that, make sure you have a decent text editor like Sublime(http://www.sublimetext.com/). I highly recommend the split code view so that you can see your html and css code simultaneously. (see screenshot below)
In my experience, It's easier to learn HTML and CSS through series of experiments. Bit by bit, element by element. Test out css declarations to see what happens. That's actually how I learned. At first, It will be magical when you see text, borders and background change its color.
I've been hearing a lot of good reviews from friends that HTML and CSS: Design and Build Websites by Jon Duckett, is a good book to learn HTML and CSS.
You can also try learning HTML and CSS interactively through Codecademy's HTML & CSS track.
- Javascript. This is where much more fun part of doing web designs happens. It's awesome to see your design from photoshop, fully coded using HTML and CSS but it's much more magical to see things happen on the top of it. You can consider Javascript as the icing on a cake. HTML and CSS is definitely much more important since they're the foundation, but it's nice to add a layer of interactivity to your webpages.
Javascript can help you add animations and cool things such as sliding banners, carousels, and lightboxes. Though some of this are now attainable using CSS3. Javascript is much more dynamic.
I definitely recommend you to read Eloquent JavaScript. It's discusses much more technical stuff about javascript than what you need as a starter, but It will definitely help you in the long run since you're now diving into real programming. HTML and CSS are for presentation purposes only most of the time, but Javascript can build way more awesome stuff.
One popular JS frameworks you might want to start to play around with isjQuery. If you liked Codecademy, you can start learning through theirJavaScript and jQuery tracks.
To be honest, you actually don't have to be a hardcore JS programmer if you're having a hard time grasping the concept of programming it. There's been a lot and still expanding libraries of easy to use plug-ins all over the interwebz (Ok, internet.)
You can also check-out CodePen and Github for awesome JS or jQuery plugins.
Once you learn those 3. You can gradually learn more advance/technical topics about web design. Usabilities, UI/UX (user interface and user experience), Information Architecture and similar stuff will definitely take you further in this endeavor.
Source: Quora(Jan Harold Diaz).
You have to be aware that HTML/CSS/CSS3 is a Front-end development skill and not web design. Though It's a practical skill to have if you're a web designer because one, you can easily implement your design from your mock-ups/wireframe and two, you know the best practices and limitations of the web.
Like you, I learned HTML right away before learning web design. I also struggled when completing designs so I did my research and found out that I have to start from its very foundation. Graphic Design, and to jump straight to what I think are important to learn if you want to be a web designer are:
- Typography. You have to learn how to properly choose the right fonts(typefaces). This also includes proper combinations of fonts. You can easily produce beautiful designs if you'll use the right fonts for your project(s). Quick tip. Use 1-2 fonts (maximum of 3 if necessary), I highly recommend as a starter to use families of fonts. I also recommend you to watch Helvetica(documentary).
- Grid and Layout. This is very much important if you want to achieve organization and balance with your design. Learn a few things about the rule of thirds/golden rule. You will heavily rely on grid more specially in web design, this will also help you create modular designs on the way, aesthetically and front-end coding wise. Famous frameworks like Twitter Bootstrap, Zurb's Foundation, Skeleton and the likes, uses and promotes grids.
- Color Theory. This part is probably my hardest struggle when I was just starting out. Like you, I immediately learn how to code and without proper knowledge how to use colors, I never was able to produce anything that I'm happy or proud of. Having a solid foundation of how colors work, how and where to use them will help you in the long run. Web design or just even when you just need to produce banners or graphic assets.
Having a solid foundation of those 3 that I mentioned will definitely help you in terms of design.
Sadly, having to design a complete web page doesn't end there. You can't design something if you don't have content. As many people quote and say, "Content is King". It is. You can't layout or do any design without it. It's important to know the content of the page you want to design. Though there are typical design elements and sections that a webpage should have like brand logo, navigation and footer, you still need to figure out your content. If you're struggling to produce a complete web page, maybe because you haven't figured out what and where to put things(content) or simply because you don't have enough content in the first place. One more thing that I highly recommend you to learn if you want to cope with this dilemma is Information Architecture. Basically, it just means organizing content properly.
Here's a list of recommended exercises you can do to improve your skills and get use to it:
- Redesign a web page/site you don't like. Something that looks like it was from the past.
- Design a web page for your favorite brand(s)/celebrity. It could be about your favorite shoes or your favorite band. And yes, I need to stop saying 'favorite'.
- Design a web page for a fictitious product, service or company. Do you have a crazy idea? An app or something that you think that will change the world? Go ahead, create a web page about it.
Lastly, I highly recommend you to immerse and digest design materials. It can be books, articles or just screenshots/images/design studies from Behance and/or Pinterest. This will inspire you and hopefully open your eyes for good design.
Hope this helps :)
Update: Here's an Inspiring person who built 180 websites in 180 days.
180 Websites in 180 Days: How I Learned to Code - Lean In
According to me HTML and CSS are very easy to learn. But, it might seem intimidating in the beginning. I would suggest you to follow these steps -
Step 1:
Start learning HTML, JavaScript/jQuery and CSS fromhttp://www.codecademy.com. It's the best site for learning how to code. You'll enjoy this step very much.
Step 2:
Now, if you have followed Step 1 correctly, you should have become a semi-pro in HTML and CSS. Now, you need to learn advanced practices like "Cross Browser Hacks", "Transition Effects", "CSS3 Animation", "HTML5 Canvas" etc. For this I would suggest you to use css-tricks.com. This is a very helpful resource. Practice all the tricks which you learn and start implementing them in the websites which you make.
Step 3:
Ok. So, if you have followed Step 2 correctly, you have now become a good web developer, now it's time to become a web designer. I would suggest you to learn things such as "Typography", "Color Theory", "UI Design" etc. from Hack Design.
Step 4:
So, if you have followed all the steps correctly, you have now become a good Front-end Developer. Now, it's time to hone your skills. I would suggest you to join http://www.forrst.com, it's a social networking site for website designers. You'll get to learn a lot from this site by interacting with other like-minded people. Also, you should start reading blogs such ashttp://www.smashingmagazine.com.
Step 5:
Now, all you need is practice. Build your own personal website, put it up on the internet. Interact with web designers/developers or graphic designers. Try to get clients. If you are still intellectually curious, and want to learn more, I would suggest you to do the HCI (Human-Computer Interaction) course in Coursera, which is offered by UC San Diego.
https://www.coursera.org/course/.... You can also learn Ruby, and then eventually learn Ruby On Rails, by using these languages you can make your own web applications. Also, learn Twitter Bootstraphttp://getbootstrap.com/, this framework is massively used to make responsive websites.
Hope this helps :)
