Hi, I’m digging into front-end web design by creating a site for the family business. I have had a bit of experience with HTML, CSS, and JavaScript in the past, but it was usually editing work that someone else started. I’ve taken a few courses on Learnable (Getting Started with CSS, Responsive Web Design: Key Concepts), and Russ Weakly suggests using HTML5 Boilerplate. There seems to be a lot of info in those files that I’m not sure I’ll need (and my grasp on what they do is loose at best). I’m just wondering if this is a good place to start for my needs, and if so a beginner-friendly explanation of what everything in the boilerplate does.
The site I’m designing is essentially going to be a few gallery pages that shows some products with info, and links to Etsy pages where the products can be purchased. Nothing too crazy, but I would like the site to be mobile-friendly. So, where to begin?
You’ll get different advice from different people, but my preference is to start with a blank canvas and only use the code you need. That way, you also understand your own code, rather than having to trawl through a lot of stuff you don’t need, don’t understand and/or need to alter or override. (For mine, using a framework is like trying to assemble a new house from a pile of building rubble, which is harder than starting with new, fresh materials.)
Still, the boilerplate has a lot of interesting stuff in it, and it’s worth picking through it to learn tips and tricks and maybe extract useful, reusable bits. (You never know what you’ll find amid building rubble. )
Also, thanks for a great reply. I really like your rubble analogy. I’m seeing a lot of different things in this pile that make me wonder if there are parts I’m not considering. It’s kind of overwhelming to think about all of the browser specific workarounds that need to be handled. From a learning standpoint, I’m thinking it might be smart to just build from scratch, like you said, and test in different browsers. That way I can run into the problems on my own and then find the solutions. It will probably help me remember them better. That being said, that Sitepoint post seems to explain the Boilerplate a little more clearly, and I’ll be giving it a read.
Yes, although don’t feel compelled to dive into HTML5 elements yet. There is almost no advantage whatever in doing so, and there are distinct disadvantages—mainly to do with legacy browsers (IE8 and under). HTML4 and CSS2.1 have excellent cross browser support and there is rarely a true need to leave them behind.
and test in different browsers.
Yes, regular testing in browsers is essential, no matter what approach you take.
In my opinion i use http://www.getskeleton.com/ and then remove the parts that i dont need. This is a responsive barebones template that works on mobile, tablet and desktop really well. Boilerplate is too heavy for day to day use. There is twitter bootstrap which comes with alot of trash in it also. But these are a few suggestions. Let us know how you get on.
