best way to practice html/CSS

am new to web design, and am currently learning html, and CSS. My question is where/how is the best way to design a webpage? I want to be able to see what it is I am doing in the text editor while messing around and trying new things. The best example I can think of at the moment would be something similar to codecademy. A side by side text editor and the webpage. Or, where would be the best place to build a free website to practice? As well, any other tips.pointers for someone trying to get into the field would be appreciated.

edit: Thanks for the information.

Learn by doing.

Html and css isn’t something you really learn out of a book or with a couple exercises. It is a lot of repetition to learn css properties, selectors, units etc.

A good way to practice is to create personal projects.

  • Personal Blog

  • WordPress Theme

  • Calender App

  • Etc.

If you really wanna start small I suggest going to a random css gallery(for example cssmania.com) taking a website there and just recreating it bit by bit. This is a good way to learn decent html/css markup. If you keep doing this you will see patterns emerge that you can re-use and make your own.

A good place to build a website would just be op your own pc. Just open a text editor or code editor, save your website with a .html extension and open it with your favourite browser.

 

To add to this, I’ve found recreating sites (or pieces of sites) is a great learning method!

  • making websites, making websites, and making websites. oh and did I mention “making websites” yet?
 
  • I agree with all four of your suggestions, but I want to add that whilst I was learning, in addition to making websites, I also found it really useful to make websites.
 
This is how I did.
I’m by no means a great designer or developer, but I got a really solid grasp of HTML and CSS by building sites for fun.
 
  • + Replicating websites, “improving” websites, and making sites you want to see.
 
  • Kind of old school, but I still do this sometimes. Use the inspector in Chrome or Firebug in Firefox and add style rules to elements on your page. Try different CSS rules and see how the element changes as you add them. Also, open the inspector on web sites you like and see how the developer got the effect.
  • For a more new-school approach, go to http://codepen.io and see the results as you edit. Great for rapid prototyping or just exploring new ideas.
 
  • Definitely a good idea; this will help you get comfortable with CSS properties and you get to learn from playing around.
 
 
  • http://jsfiddle.net/ is pretty good for what you’re describing. I wouldn’t try to build much with it, but it’s great for trying out new things and experimenting. It’s also a good way to share your bits of work with other people, and to play around with other people’s creations.
  • Check out brackets (http://brackets.io/). It is a code editor and can run the websites live in chrome.
  • the JFDI method
 
  • Every time this question is asked on reddit everyone answers with “make your own site!” But just to offer an alternative, I learned html and css by working with templates first. You might want to consider grabbing a template that you like and working with it to make a few sites. Make sure its a decent template with responsive code so you can start learning about media queries. You can learn a lot about structuring a site by working with a professional’s code.
 

http://www.codecademy.com/courses/html-one-o-one/0/1

This site is very helpful. totally free. each lesson builds on the previous until you are memorizing most of it.

“Give the pupil something to do, not something to learn; and the doing is of such a nature as to demand thinking; learning naturally occurs” (John Dewey)

Pretty much, don’t just read/research about whatever you are trying to get better at. Make real world examples and challenge your self to implement them. Even if it is unrealistic, it will make learning a lot more memorable and will make it easier to learn.

  • I personally like doing a personal project to learn/grow from. http://jsfiddle.net might be an ideal place for you to mess around.
 
 
  • I would suggest going to codepen.io and looking at and studying / playing with people’s creations. Then try creating your own stuff.
 

For the how:

  • Dual Monitors

  • Notepad++

  • jsFiddle

Dual monitors make it easy to do local development and improve multitasking for me.

notepad++ for local projects. It is a simple editor, and gives great syntax style/color. I keep this on my main monitor for building and modifying html/css. Instead of an instant rendered view, you just run the file in a browser and refesh after making changes.

If I am not at my desk or making small objects/concepts I will use jsFiddle. It is good for sharing snippets to show the code and end result to others.

 
Get sublime text 2 and an app that refreshes your browser when you save your .html -file in the editor. I recommend CodeKit but there’s something called LiveReload too I think. And probably other similar apps.

And for quickly trying out how to make stuff look just the way you like it, learn to use Chrome (or your favorite browser) devtools to write CSS.

https://developers.google.com/chrome-developer-tools/docs/videos#getting_started

 
Here’s another idea if coding websites are too difficult:

I like to browse UI packs for web designers. You might have come across these before: you’ve probably seen articles titled “35 UI Resources You’ve Never Seen Before” or “10 Metro Inspired UI Packs”. Try coding each UI element in HTML and CSS. These types of projects are neither too big nor too small, and they’ll expose you to some tricks of styling elements, like radio buttons and such.

 
On your desktop…. create a text file called index.html, put your code in it, save it and open it up in a browser…. alakaZAM!
 
 

You can just make a txt file, change the extension to html and open it in a browser.

 
You are looking for a program like http://www.skedit.com Or something like Dreamweaver by Adobe. They are programs that show you what you are coding while you type it.. But for free, try the Google Developer tools.
 
For CSS, I learned a ton by building a wordpress site, installing a custom theme and some plugins, and then modifying them to better suit my needs. Changing padding, line heights, font weights, etc. Any time I didn’t know something, I’d Google it and figure it out.


Leave a Reply

Your email address will not be published. Required fields are marked *