How did you learn to use HTML5 and CSS?

Careers & Mentoring
#1

I am sure this is a question that comes up again, and again, and again. If so great apologies.

The question is more about how you got contextualised experience of actually applying code. There seem to be dozens of ways to learn, via courses, website, books, or a DIY hack. The problem is if you learn anything without learning in context (for example learning a language without talking to anyone that speaks that language), then you don’t pick up any practical experience.

So how what live/personal projects did you use? Did you write the code in a code editor and preview in a browser, did you hack an existing site and tweak with colours and type sizes, or did you happen to know a developer who gave you some tips?

I’m asking as I recently had a chat with a dev, and he said ‘you need to learn bootstrap, it is easy!’ He sent me a file which did not have lines of code that I recognised at all (no positions, no fonts, no colours or alignment)? It went over my head. I’m not stupid and can certainly learn, but some pointers would help?

2 Likes
#2

I, like a lot people, learn best when doing. Loads of resources online (Codeacademy, Udemy, HTMLdog etc). Choose one and just go for it. Do the tutorials then build something as soon as you can.

I like cars, so one of the first websites I made was about my favourite cars! It doesn’t have to be flash or complex or anything. All you need to create/view HTML pages is a code editor such as Sublime Text and a browser.

No need to look at other sites just yet. Also no need to look into Bootstrap yet until you know at least the basics of HTML and CSS. Learn the basics first and build from that.

1 Like
#3

As a former front-end developer who didn’t go to college for programming, I taught myself coding by deconstructing websites by viewing their page source then building my own websites. That was over 15 years ago. It’s much easier to learn now with the amount of resources online. If you don’t know how to do something, just google it. I highly recommend https://www.w3schools.com/ or https://www.codecademy.com/ to learn the basics.

1 Like
#4

Thanks for those answers! OK, so to pick up on those threads, you suggest enrol on an online course or sorts, and follow by rote, then build something. This would make sense, in essence how I learnt graphic design software such as InDesign (although code does feel like learning a language).

Has anyone in the UK done an Open University Course? They offer an IT and Design diploma, tho its not specific on what coding is taught?

1 Like
#5

Just jump straight in.
http://www.htmldog.com/guides/html/beginner/
Half an hour to an hour every day and you’ll be building basic webpages within a few days. Try it for a few days and you’ll know very quickly whether or not this is something you’d want to pursue

1 Like
#6

That is really cool! Thanks lykc.

I’ve found starting to learn code so intimidating, it is knowing where to start

3 Likes
#7

sitepoint.com is another good place to start. Taught me everything I know. :wink:

1 Like
#8

There’s Plural sight and Code School as well. I believe this one is free as well: https://learn.shayhowe.com/html-css/

I used http://html5doctor.com/ as a great reference.

#9

Originally, I learned using MySpace. It was great for learning and applying CSS and HTML back in the day; I still wish more social networking sites would allow custom coding, as it was a great encourager for people to learn basic web coding skills.

Now I feel old.

FWIW, I always try to have some personal project going on to keep my skills sharp. Products like XAMPP allow you to mockup and practice web development skills on your machine - no need to purchase a domain. Look up some projects for beginners, and challenge yourself to learn how to do them on your own. Whatever you do, get your hands dirty and work to apply practical knowledge.

3 Likes
#10

Again thanks, these are so useful! I’ll check out XAMPP. I’ve been running through the htmldog site, and have got stuck on the coding of embedded images and links, but will go back and give it another look. Getting dirty is what I need to do.

The Guardian recently had a feature on how MySpace allowed a generation to learn code, I’d agree that custom coding would be a great feature for future social networks (they are all over slick nowadays!)

#11

That’s great you got stuck in, keep going! Just 30 mins every day and you’ll be making basic web pages in no time.

Are you looking to move into development?

The thing with html/css is that someone out there has gone through your exact problem, so there are lots of answers out there. If a quick google doesn’t product any results, then try a code forum such as stackoverflow. Or to be honest, there’s probably a lot of people here that know html/css who could help you too.

#12

I’m a designer, and have actually done a fair amount of UX over the years. The reason I want to learn HTML and CSS is to be able to work with developers more and understand what is under the bonnet. As a print designer I understand the limits of offset printing and how to get files press ready – but that does not mean I can operate a 4 colour printing press. In the same way I’d not expect a press operator to be able to understand how type kerns, or how to use FontLab.

So the learning code is to teach myself how a developer might approach things, and give myself the option of refining an existing site (for example I’d love to know how to letterspace capitals, or control the colour and weight of an underline). Beautiful typography on the web is very doable, and that is my ultimate goal.

I’ve had quite a play with the code dog so far, and have been going back and figuring out tags in more detail. I could not figure out how to link an image to the code, but after a few attempts, and learning about links to directories, finally sussed it (whoop whoop).

#13

Well, I actually started learning HTML and CSS, before I knew about user experience (and usability). I didn’t even know if was a concept… I just thought it was cool to build web pages. :slight_smile:

If I’d start learning HTML and CSS today, then I’d recommend to take a similar path to this:

  1. Start going through some basic courses about HTML and CSS (e.g. the free ones over at Codecademy or Freecodecamp).
  2. Decide on a code editor to use. To begin with something like Codepen might be enough.
  3. Find a few designs you like on Dribbble or similar design platform, and start recreating the design in CSS and HTML. As you do this, you’ll likely come a cross a lot of “How do I do X” kind of questions. Enter these ones in Google and/or Stackoverflow and see how others have solved the same problem :slight_smile:

If you are interested, I’ve written about this in a lot more in-depth in an article about how you can learn about CSS & HTML prototyping.

1 Like
#14

I’m on a Mac, and am using Adobe Brackets which comes with my Creative Cloud subscription. I’ve been running through the codedog HTML pages, copy and writing code, then seeing what it looks like in Chrome. Interestingly some of the code does not manifest, and when I test the same code in Safari it works fine (so with code below the tags did not show the rollover text in Chrome)

Bob's canine mother and equine father sat him down and carefully explained that he was an allopolyploid organism.

Another question. If I use Chrome, and use the inspect function, it allows me to see the code behind a web page. I take it that most devs will copy and paste existing code in some cases (they cannot write it all by hand surely!)? It would be unethical to copy existing sites codes, but this does seem to be feasible. So my question is, where do devs get their code from?

#15

Browsers don’t all function the same. One day when you’re developing websites, you’ll get to know the wonderful world of cross browser compatibility!

Is the ‘Bob’s canine mother…’ line a html snippet? If you want to paste code in here, you’ll need to wrap it using the ‘preformatted text’ icon in the editor (inbetween speech mark and upload icons). Alternatively, you can paste your code into a code playground such as codepen or jsbin.

yep, it is possible to grab html/css from inspect, but there are better starting points for developers. e.g. boilerplate templates, frameworks such as bootstrap, html preprocessors etc. But that’s more advanced stuff that comes later

#16

Yes it was it was, should look like this (I hope I got this right)

P reformatted text<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>Preformatted text

So far I’ve been through all the html, but not all of it makes sense at the moment, I need to see how CSS works. It is a 2 steps forward, 1 step backwards process, but I am moving forward. Of course time is partly an issue, Adobe Xd has been updated with some nice new features, so I need to spend some time playing with those!`

#17

what’s your css? and what are you trying to do with it?

#18

Just an update, I hope not for vanity, but if there is anyone else in a similar situation.

A couple of weeks in (including a short holiday and quite busy work schedule). I’ve carried on with the coding, now nearly at the end of the CSS part. My methology has been to test everything that I can (it is not always possible to try an example for each tag, especially things like dialogue boxes or buttons that require a contextualised link, but I will get to that). So with the tutorial open in one window, and a code editor/browser in another, I code and then hit preview and see what happens. Some stuff needs more investigation, esp layout, when to use ‘float’, and where to align, as well as pseudo classes. In these cases I’ve set a goal (e.g. 2 columns side by side, with one underneath), and kept bashing away until I’ve got it).

Once I’ve been through the whole list of CSS, my next task will be to actually try and make up a very simple website, but one that is visually rich with nice typography. I guess that I will come unstuck and not be able to figure it out completely, so then I’ll google what is missing.

3 Likes
#19

Updates are always appreciated. Closing the loop adds so much value.

2 Likes
#20

I did not learn :slight_smile:

2 Likes