Member Avatar for bill.jeffs

Hi I am failry enw to web deisgn and want to build an online portfolio, kinda like an online C.V for my self to show prospectiove employers. Im looking for some tutorials to help get me started in using CSS/ HTML if possible in Macromedia 8 Suite and wondered if anyone had any good sites/resources to suggest... thanks

  • 6 Contributors
  • 7 Replies
  • 125 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by autocrat

Dani AI

Generated

Short, practical path for a portfolio project — building on points from and : learn the HTML/CSS fundamentals by hand, then use tools to speed up the workflow. Keep the site focused (header, main/projects, footer) and build one component at a time so layout rules and semantics sink in.

Pick a modern editor and a simple, repeatable workflow. Visual Studio Code is a good choice because of Emmet (fast HTML), Live Server (instant preview), and Git integration. Follow a learning track that covers semantic HTML, responsive layout (mobile-first), and modern layout systems like Flexbox and Grid — MDN’s Learn area and freeCodeCamp’s responsive course are practical, up-to-date references (MDN Learn, freeCodeCamp - Responsive Web Design).

A minimal project layout to start with:

index.html
css/
  styles.css
images/
  hero.jpg
projects/
  project1/index.html

Prototype small pieces in a playground, check cross-browser support, and host a static site when ready. Use CodePen for quick experiments, consult Can I Use for feature support, validate HTML/CSS with the W3C validator, and publish on GitHub Pages for a free portfolio host (CodePen, Can I Use, W3C Validator, GitHub Pages). Final notes: optimize images, keep text readable at larger sizes, and prioritize accessibility (alt text, logical headings). These small habits make a portfolio look polished and stand up to real-world testing.

Recommended Answers

All 7 Replies

Member Avatar for Member #114696

Dont try to learn web design in a WYSIWYG editor like DW. It spoils you.

Get a nice text based editor which could just highlight and indent your code.

Learn the language than a software suite, I mean emphasize more on the language, writing code yourself. The reason behind is that once you get used to it, you would prefer writing code yourself which is more robust.

Also remember that WYSIWYG editors wont give you exatly the same result what you see while designing everytime.

There are a number of nice tutorials over the web, try googling them, you will get loads of the. Some of them are

www.w3schoold.com
www.tutorialized.com

Member Avatar for autocrat

Yeah for ... vishesh ..., glad to see others think starting with a "do it all" tool is a bad move.

HTMLDog
AListApart
Mezzoblue

All good sources.

Best thing to do is learn by building simple bits.
Learn the ie bugs off by heart - look for IE + Bug + hasLayout ... will solve half your problems!

Also, learn the basics, make sure you get those right every time... you'd be amazed the results from one stupid little error!

Refer to this thread...
http://www.daniweb.com/forums/thread88871.html

That covers some of the basics, and gives you a head start on the right path (or atleast, what I see as the right path!).

Do not fall for flashy, clever or exagerated stuff - stick to the basics.
With multiple basics you get clever results any way (It's like building blocks).


Find an approach to layouts that suits you (positioned, floated, inline etc.).
I myself break the site into chunks/sections... header, main, footer. Then I code within those blocks... not 1 purists view, nor 100% semanticly perfect, but fairly clean and saves a whole world of positioning issues.


Basics to figure and play with.
You can position a container relatively, then position child items within it absolutely.

Try to use EM's as a font measurement, and gfor heights (no 20px boxes!... try 2 em), as when you increase text size, things shift with the text, rather than breaking out.

And Validate.
Oh, and Validate again!
Everytime you alter something, Validate!
Get it ? :)

And make your own notes - you will understand thigns and phrase them to suit yourself... you may see an example, read the details and it will make no sense... when you do it though, you will grasp it... so write it for your benefit!

For graphics... learn to make them bigger than needed if backgrrounds for links etc. if not repeating... .. so if the box gets bigger, the image does leave gaps :)

Well, good luck.

Member Avatar for MidiMagic

Use Notepad.

Member Avatar for bill.jeffs

ok thanks for the advice guys I'll bare this all in mind when i start. I'll try and stear clear of dreamweaver i suppose you are right about it spoiling you and i guess its something i can learn once ive got the fundamentals.

Member Avatar for mag00

You could use the coffee cup "free" version. You can preview easily.

A few years ago when I bought my first domain for my first website, I knew absolutely nothing. I bought dreamweaver 3 so I could build a website. That didn't make any sense. I bought a host of other website builing softwares all of which made no sense.

I found w3schools and built my first webpage finally. I have learned much html, and now venturing into the php and java for dynamic sites. Learning to read and be familiar with the html help when looking for specific codes.

Now after many years and some schooling I can open and set up a site with dreamweaver, and still have to hand code some of it.

Try http://csszengarden.com at the very least you will see how versitile css is.

Member Avatar for autocrat

The basic principal is that there is nothing wrong with using software... so long as you know what the software is doing - which means you needto know what the codes are, what they do etc... as trust me, most of those programs leave junk code in or do things in a few funy ways.

Unless you know what you should, you'll never see it!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.