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  :
    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:

    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.

🔼