1 Intro Web Dev: Quick Start

2020-Dec-3

Home

2 Intro Web Dev: Notes

3 Intro Web Dev: Accessibility

email Feedback About This Page

This series will focus on very basic web development from a   Hand Coding   perspective.

The main thing you need is   PATIENCE   - and lots of it!

The other thing - try to have   FUN  ! Creating web pages can be fun and interesing specially if it is for your own interest/hobby or to help a family member or a friend or a place where you volunteer.

Approach this like a hobby. If you only have a few minutes - do a little bit. If you have more time, spend more time learnng. Be flexible about your time.

Start with HTML first then add in some CSS using a text editor. It'll be long while before bringing in Javascript.

Even at this level there are many details to learn and be aware of.

This will not be about frameworks, PHP, Python, Ruby on Rails, databases or other high-level activities.

2 Intro Web Dev: Notes - Web Development

What Is Needed to Start

1.   computer  : desktop, monitor, keyboard, mouse or laptop - mac or windows
   2 Intro Web Dev: Notes - A Computer For Hand Coding Web Dev
   
   2 Intro Web Dev: Notes - Improve Your Web Dev Environment: Hardware
   
   2 Intro Web Dev: Notes - Testing Web Pages
2.   web browser  : Chrome, Firefox, Safari, Edge
   2 Intro Web Dev: Notes - Web Browser
3.   internet connection  : not needed all the time but useful for downloading and installing the Bluefish text editor and using tutorials on the internet
   2 Intro Web Dev: Notes - Internet Connection
4.   text editor for web dev  :
   recommended: Bluefish - free text editor
   works on mac or windows
   this is where having an internet connection is needed - even for just a few minutes to download & install it
   Advantages to using   Bluefish   instead of   notepad  :
   
   • Syntax highlighting
   • Auto indentation
   • Auto-completion
   • Brace matching
   • Easier to edit multiple pages at once
   Bluefish Wiki
   
   Install Bluefish
   
   2 Intro Web Dev: Notes - Text Editor for Web Dev

Making Your First Web Page

1. Start   Bluefish  
2. Initial Bluefish look
   
3. Click   Quickstart...  
   
4.   Quick Start   window opens
   
5. In box to right of   Title:   type   Web Page One  
   
   
6. In lower right corner - click   OK  
   
7. Text appears - at the moment don't worry about all this means
   
8. On line 18 type   Web Page One today's date  
   
9.   Web Page One 2020-Dec-03  
   
10. Save the file by clicking the 3rd icon from the left at top left corner - when you put your mouse over it a message appears saying   Save current file  
    
11.   Save   window appears
    
12. Click on your name in the   Places   list on the left - when you do this the   Save   window changes to show a   Create Folder   button in the upper right corner
    
13. Under the   Name   list scroll down until you see   Documents  
    
14. Double-click   Documents   so you see to right of   Save   in folder   your name Documents   ie.   eugene Documents  
    
15. On the right side click   Create Folder  
16. Under   Name   you will see   Type name of new folder   in white lettering on a blue background
    
17. Type   LearnWebDev   and hit the   Enter   key
    
18. The   Save   window changes to show   eugene Documents LearnWebDev  
    
19. To right of   Name   type   index.html  
    
20.   Name   with   index.html  , click   Save   in lower right corner
    
21. After the file has been saved, the text in the editing area has different colours depending on its purpose:
    
    •   black   - text that is shown to person looking at the page when it shown in a web browser
    •   red   - a html tag that tells the web browser what to do with the text between its opening and closing tags
    •   blue   - an attribute of a HTML tag
    •   green   - text in double quotes - content or instruction to browser - not shown to person browsing

    2 Intro Web Dev: Notes - Explaining the meta Tags
    
    2 Intro Web Dev: Notes - Use Bluefish's Quickstart to Remove Default Meta Tags
    
    2 Intro Web Dev: Notes - Use Bluefish's Quickstart to Add a Meta Tag

    
22. To see what this page looks like in a browser, click the 3rd icon from the right in the top row - when the mouse pointer is over that icon a message appears saying   Preview in browser  
    
23. The file is shown in your browser -   Web Page One   on the tab and   Web Page One 2020-Dec-03   in the main area
24. From here you will switch back and forth between Bluefish and your web browser - make changes in Bluefish, save them then switch to the browser - refresh it - view it and repeat until you are done
25. A fast way to learn HTML is to go to w3schools.com. Go through all those sections - skim through them - don't try to memorize it - make notes if you want
    
26. The HTML sections:
    
27. A good way of learning HTML is make web pages for for an interest/hobby of yours or a family member or a friend.
28. Done.