3 Sites for Learning to Make Web Pages

There are many websites to help you learn HTML/CSS

Just doing a quick Bing search for 'online html tutorials' will show so many online resources to learn coding with HTML and CSS.  I would say 80% of online material is free for coding lessons.  Here are three of my favorite references/train sites I often go to and would recommend to others.

 

CSS-Tricks

I believe this is the first page a came to when I was looking for some extra info on id's and class's.  It helped out a lot with many explanations and examples.  On some pages there are quite a few comments at the bottom of a lesson or article where I have also learned a lot.  Maybe this is more of a reference for the more knowledgeable, but it has always had some 'tricks' that I started using.

CodeAcademy

I haven't spent much time on the computer at code academy but us it all the time of my phone.  Their Android app is pretty good.  Html and css  coding are just a couple things available at this site.  They have fairly thorough beginning guides for several programming languages(like Java, Python, JavaScript, jquery, C++, and more)  I just found out about this site a week ago when I downloaded the app on my phone to help with my very limited JavaScript knowledge.  I like there html and css as well, great for just starting out.
 

 

 

Microsoft Virtual Academy

The Microsoft Virtual Academy has the most resources for free online that I have come across.  I've listened to some of the CSS lessons and it was pretty good.  There are several 'classes' that can take a long time to get through, but without moving slow.  Their lessons are mostly videos, some articles.  I wish the beginning programming language sources had more written content.  That could be a good thing for some though.  It was a benefit for me a few years ago when I started playing with C#, just never got all the way through one of their coursed(they can be long!) lasting for weeks or months when some might just want to do a little here and a little there.

Three simple and stylish navigation menus

Top nav code

Hobby Lobby

www.hobbylobby.com

Hobby Lobby is a store with all your hobby needs (if they mostly involve craft type hobbies, not so much outdoor type stuff).  They also have a huge selection of interior décor.  My wife and I get much of our inside décor from here and fun crafts to do with the kids on a rainy day, and we’ve had plenty of those!  The navigation menus are just the style I like.  They are quick and responsive, and each menu item and well over a dozen drop down options, and these are very organized and not confusing like I would imagine it to be.  For each top nav menu selection has its own <div> <ul><li> tags with some of the styling already within the list item tag,  When you click a nav button it takes you to the page and here is also a side menu for all the options that were in the drop down list for that subject.  The html for this side menu is <div> after <div> after <div>.  I really like the menu styles for Hobby Lobby.

Top navigation Menu

Learn Italian Online

Side Menu

http://www.onlinelearnitalian.com/

The learn Italian online web page I like keep a bookmark to has a very simple nav menu.  It has a nice hoover effect that I want to try to mimic, it might be a sprite type going on but I haven’t looked though the css stylesheet yet.  For a smaller website like this one the menu is perfect for it, not too much but still stylish and neat.  The html is your basic <div> <ul><li> and is quite simple.  Perfect for what it is.

Side Menu Code

HTML Color picker

http://www.w3schools.com/tags/ref_colorpicker.asp

Left side nave menu

HTML for left side nav menu

The w3schools.com color picker is a page I go to almost every day.  Great for getting your colors in rgb form or html#form.  I was checking out the navigation menu in the source code and it looked like it was just a very long line of anchor tags without and <nav> <ul><li> that I could find for that side nav menu.  The real simple without fanfare menu is right for the kind of site that it is.

Three Web Pages With Tables in Action

Harris seeds


The homepage of Harris Seeds uses tables.  The tables look nice, though it doesn't look like it would be in a table.  Maybe using table tags makes the items look better than using some other html elements.  It seems like an easy way to get things lined up well, like the first table, which is the picture links in center of page.  I thought it was a little strange to put the footer links in a table.

Fireplaces.com

Another site I found that uses tables, or in this case I could just find one, this is a very nice looks site and simple.  The table is in the "where to buy" dropdown menu, everything else is jsut ALOT of <div>'s.  Gets confusing just looking at the source code!






USDA


The USDA plant hardiness zone map page has two tabes in it.  The map itself is in a table of it's own and the links under the map are also in a table.  It seems strange that the links are in a table, I think all the links are in a one cell table.

3 Web Sites and Their Wireframes

 I really like the simple look of unikea (http://unikea.fi), I would like to make some sites that look a bit spartan but are really stylish and well put together.  To do the wire-frame I used Moqups.com.  It's hard to see some of the elements I put in the wire-frame.

I choose Google.com to make a wireframe of using wireframe.cc.  Of the three is have used I like this one the best.(the wire-framing app).  I was hoping to get to Google.com homepage with some cool graphics making up the word 'GOOGLE'.  I like how different it is from day to day, but still nice and simple.

  For this third wibsite I also used moqups.com.  The web site had two full pictures that Couldn't get into the screen shot.  I was also A simply designed site with a lot of graphics.

  I tried a couple other wire framing tools and they were very limited because I didn't purchase a subscription.  I would like to try the Google drawing tool, It was listed as one of the better ones.