• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Videos
  • Blog
  • Contact

Web Guru, Adobe Expert

Video & Web Training Classes

  • Adobe Training Classes
    • Premiere Pro Training Classes
    • After Effects Training Classes
    • Photoshop Training Classes
    • Dreamweaver Training Classes
  • Video Training Classes
  • Web Development Training Classes
web development training classes
Home > Web Development Training Classes > Introduction to Web Development Training Class
Home > Web Development > Introduction to Web Development

Introduction to Web Development Training Class

Class Description, Introduction to Web Development

Building Websites with HTML and CSS

Learn HTML and CSS quickly and easily through step by step exercises. The best way to learn web development is by building actual websites. The Web Guru has distilled years of experience into simple projects that will teach you the essentials of good web design. He will take you through the process step by step from absolute basics to building highly functional websites.

This class is project based and you will get plenty of hands on practice coding websites from scratch, adding content and images, styling with CSS, testing in various browsers and uploading the website to a live web server to make them live to the public.

Who should take class?

  • Anyone responsible for building or managing a website and wants a deeper understanding of how web technologies work
  • Graphic designers who need more understanding of the web
  • Content creators who publish to the web

What’s Included?

  • Instruction from an Adobe Certified Expert (ACE) and Adobe Certified Instructor (ACI), who is also an experienced web developer and designer
  • Detailed notes
  • Lesson files and hands-on exercises
  • Follow up sessions with the instructor by phone and email

What You Will Learn

  • HTML Syntax: Tags and Attributes
  • HTML content: Headings, Paragraphs, Lists
  • Hyperlinks
  • Adding images
  • Writing CSS rules
  • The Div tag and basic page layout
  • HTML5 semantic elements
  • Fluid layouts
  • CSS box model
  • Background images
  • Using Google fonts
  • CSS floats for layouts
  • Uploading to a live website
  • Forms

Detailed Curriculum, Introduction to Web Development

1. Coding Basics: Intro to HTML

  • The HTML, Head, Title, and Body Tags
  • Headings, Paragraphs, and Lists
  • Bolding and Italicizing
  • The Doctype Declaration (DTD)
  • The Lang Attribute
  • The Meta Tag and the Unicode Character Set

2. Hyperlinks

  • Anchor Tags and Hrefs
  • Linking to Other Websites
  • Linking to Pages Within a Website
  • Opening a Link in a New Browser Window

3. Adding Images

  • The Break Tag
  • The Image Tag and Source Attribute
  • Using the Width, Height, and Alt Attributes
  • Using Horizontal Rules

4. Intro Cascading Style Sheets (CSS)

  • The Style Tag
  • Tag Selectors
  • Class Selectors
  • Font-Size, Font-Family, Color, and Line-Height Properties
  • Hexadecimal Shorthand
  • The Span Tag

5. The Div Tag & Basic Page Formatting

  • Creating Divisions with the Div Tag
  • Setting a Div Width
  • CSS Background-Color
  • Adding Padding Inside a Div
  • Centering Content
  • CSS Borders
  • CSS Shorthand and the DRY principle

6. Using Browser Developer Tools

  • Opening the DevTools in Chrome
  • Editing HTML in the DevTools Elements Tab
  • Enabling, Disabling, and Editing CSS in the DevTools
  • Using DevTools to Fine Tune Your CSS

7. HTML5 Semantic Elements

  • The Outline Algorithm
  • The Header, Nav, Aside, and Footer Elements
  • Understanding Articles and Sections
  • The Main Element
  • The Figure and Figcaption Elements
  • Validation

8. Fluid Layout & Max-Width

  • Making Images Fluid
  • Divs for Presentational Style
  • Assigning IDs to Divs
  • Assigning Max-Width to Content

9. Travel Website: Real World Layout

  • Organizing Content into Semantic Sections
  • Adding Images
  • Tagging Headings

10. The Box Model

  • What is the Box Model?
  • Setting Div Width
  • Fixing a Display Issue in Internet Explorer
  • Setting Page Defaults for Font Styles
  • Padding and Margin Spacing

11. Floats & Images

  • Adding a Hero Image
  • Fluid Images
  • Floating Images
  • Class Selectors
  • Margins

12. Coding Links: Images, Email, & Named Anchors

  • Anchor Tags and Relative URLs
  • Wrapping Links Around Images
  • External Links (Using the Target Attribute)
  • Spambot-Resistant Email Links
  • Links Within a Page

13. Styling Links

  • Styling the Anchor Tag
  • The :link, :visited, :active, and :hover Pseudo-Classes
  • LoVe/HAte: Ordering Link Styles

14. Styling the Navigation

  • Semantically Correct Navigation
  • Overriding Default List Styles
  • CSS Navigation Styles
  • Using Descendant Selectors

15. Shared CSS and Centering Content

  • Moving Embedded Styles into an External CSS File
  • Sharing Styles Across a Site
  • The Text-Align Property
  • Centering Divs

16. Setting the Viewport Meta Tag

  • The Viewport Meta Tag
  • Device-Width
  • Initial-Scale
  • Maximum-Scale

17. HTML and CSS Wireframe

  • Stacking Sections
  • Linking to an External Stylesheet
  • Using DevTools to Unpack the Box Model

18. CSS Background Images

  • HTML Images vs. CSS Background Images
  • Background-Position
  • Background-Repeat
  • Background-Size

19. Fun with Fonts

  • How to Use Google Fonts
  • Safe Fallbacks in the Font Stack
  • Improving Line-Height and Margin for Legibility

20. Real World Layout: Fine Tuning with Box Model

  • Removing Default Page Margin
  • Setting a Max-Width
  • Outer and Inner Wrappers
  • The Difference Between ID and Class Selectors

21. CSS Buttons and Floats

  • Styling Semantically Correct Navigation
  • Floats for Layout
  • Float Insert Position
  • Simple CSS Buttons
  • CSS Border-Radius
  • Reusing Class Selectors

22. Hi-Res Images

  • Retina or HiDPI Graphics (@2x Images)
  • Setting HTML and CSS Size to Half the Image’s Native Size
  • Hardware Pixels vs. Reference Pixels

23. Uploading to a Live Website via FTP

  • What is FTP?
  • Using an FTP Client
  • Going Live

24. Form Basics

  • The Form Tag
  • The Input and Label Elements
  • Name and ID Attributes
  • The Button Element
  • Styling the Form
  • Intermediate Web Development Training Class

Primary Sidebar

Free Online Course!

The fastest, easiest way to learn Premiere Pro for free. Click image below for details.

Adobe Premiere Pro Quick Start Online CourseCLICK FOR DETAILS

Footer

TRAINING CLASSES

Adobe Premiere Pro
Adobe After Effects
Adobe Photoshop
Adobe Dreamweaver
Web Development
WordPress

CONTACT

Submit an inquiry

Premiere Pro Training Classes

Adobe Premiere Pro is the flagship video editing software for professionals. Powerful yet intuitive. Integrates seamlessly with Photoshop, Aftereffects and other Adobe products. Add audio, transitions, graphics, effects and titles. Then take your film to the next level by sweetening and mixing the sound, color correcting, adding keyframes, and compositing the footage. Premiere Pro can natively edit footage from a variety of sources output to the web, broadcast and many others.

  • Orlando Premiere Pro Training Classes

After Effects Training Classes

Adobe After Effects is the industry-standard tool for video compositing, motion graphics design, and animation. It is used in the post-production process of film making and television production and can be used for keying, tracking, compositing and animation. After Effects also comes with a 3D engine that can be used to create three dimensional objects and worlds.

  • Orlando After Effects Training Classes

Photoshop Training Classes

Adobe Photoshop is gold standard in digital imaging, and an essential tool for photographers, graphic designers, web designers and anyone else looking to get the most of their images. Photoshop is packed with powerful features that will make your images shine, and has the ability to edit video and create 3D graphics as well.

  • Orlando Photoshop Training Classes

Dreamweaver Training Classes

Create, manage and publish websites with confidence. Craft your HTML and CSS visually or in code. Test your website in multiple browsers and across mobile devices and tablets. Manage menus, footers, sidebars, and styles across your entire website with ease. Dreamweaver’s powerful features will turn you into a true webmaster.

  • Orlando Dreamweaver Training Classes

Web Development Training Classes

Start with HTML and CSS, the building blocks of the web. Learn how to write standards compliant code to structure and format your content, including text, images, tables, lists, menus, hyperlinks and more. Then take your website to the next level by making it mobile responsive, adding forms, and making the pages interactive.

  • Orlando Web Development Training Classes

WordPress Training Classes

One of the world’s most popular content management systems (CMS) for both websites and blogs. It has never been easier to launch a fully functional website or blog in just hours and add advanced features such as a search box, contact forms, drop-down menus, image galleries, shopping carts and much more. WordPress is easy to install, highly customizable, and visually intuitive. No coding required!

  • Orlando WordPress Training Classes

© Copyright Web Guru. All Right Reserved
Website by Devi Studios
Back To Top