Advance Search

You can make multiple selections by clicking on multiple entries in any selection list. Click again any of them to remove it from your selection.

Manufacturers

  • ADOBE
  • Android
  • APPLE
  • Autodesk
  • Avid
  • BLACKMAGIC DESIGN
  • Exceed Media
  • MAXON

Training Categories

  • 3D MODELING AND ANIMATION
  • APPLE MacOS and iOS
  • CINEMA
  • ENGINEERING AND ARCHITECTURE
  • GRAPHIC DESIGN
  • MOBILE APP DEVELOPMENT
  • MOTION GRAPHICS
  • PRODUCTION
  • SOUND DESIGN
  • VIDEO EDITING AND COLOR GRADING
  • WEB DESIGN AND DEVELOPMENT

Courses

  • Adobe Acrobat
  • Adobe After Effects
  • Adobe Animate CC
  • Adobe Audition CC
  • Adobe Captivate
  • Adobe ColdFusion
  • Adobe Dreamweaver
  • Adobe Illustrator
  • Adobe InCopy
  • Adobe InDesign
  • Adobe Photoshop
  • Adobe Premiere Pro
  • Android App Development
  • Apple FCP X
  • Apple iOS
  • Apple Logic Pro
  • Apple mac OS
  • Apple Motion
  • Apple Technician
  • Arabic Ornaments and Calligraphy
  • Autodesk 3ds Max
  • Autodesk AutoCAD
  • Autodesk Fusion 360
  • Autodesk Inventor
  • Autodesk Maya
  • Autodesk Revit Architecture
  • Avid Media Composer
  • Avid Pro Tools
  • Cinema 4D
  • Cinematography
  • Color Managed Workflows
  • Color Practical and Theory
  • Davinci Resolve
  • DaVinci Resolve Fusion
  • Digital Vision Grading
  • Directing
  • Dolby Vision
  • Graphic Designer
  • HTML CSS and JavaScript
  • InfoGraphics and Data Visualization
  • IPhone and iPad App Dev
  • Script Writing
  • Social Media Marketing
  • Social Media Video Production
  • Video Production Workshop
  • Videography
  • WordPress
  • XML

Training Locations

  • Iraq
  • UAE
  • Virtual

Fundamentals of Web Development

711 Views Duration: 3 days

Course Description

In this class you will learn how to code HTML and CSS, the coding languages used to create webpages. We focus on best practices for structuring the content of your webpages with HTML and then styling the content with CSS.

Once you have the basics under your belt, you will move on to real-world page layout. You will learn text and link styles, centered page layout, background images, CSS-based navigation, forms, uploading files via FTP, and much more. We will provide you with the content and prepared images for use in these projects but this training will give you hands-on practice coding websites from scratch all the way through uploading them to make them live.

The course workbook can be completed in any code editor. In class, you can use either Sublime Text or Dreamweaver in Code View.

Who Needs to Attend

Anyone who will need to build or manage a website in the near future. This course can be taken using either a Windows or Mac computer. You will need to download several web browsers and a simple text editor such as Notepad on Windows or TextEdit on a Mac. Past that, no special software is needed.

Prerequisites

None

Course Outlines

 

Section 1

Coding Basics: Intro to HTML Syntax

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

Adding Images

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

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
  

Coding Links

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

Section 2

Intro to 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

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
 

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

Section 3

Revolution Travel: Real World Layout

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

Floats & Images

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

Fluid Layout & Max-Width

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

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

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
 

Section 4

Styling Links

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

Shared CSS and Centering Content

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

Section 5

HTML and CSS Wireframe

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

Fun with Fonts

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

Section 6

CSS Buttons and Floats

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

Uploading to a Live Website via FTP

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

Styling the Navigation

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

Setting the Viewport Meta Tag

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

CSS Background Images

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

Hipstirred 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

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

Form Basics

  • The Form Tag
  • The Input and Label Elements
  • Name and ID Attributes
  • The Button Element
  • Styling the Form

Related Courses

Advanced Web Development JavaScript & jQuery

$ 699 $ 997
Duration: 2 days
Views: 525

Intermediate Web Development

$ 997 $ 1,495
Duration: 3 days
Views: 682

Web Design Track

$ 1,660 $ 2,490
Duration: 5 days
Views: 630

Virtual Classroom Training

$ 997 per seat

$ 1,495

Duration: 3 days
- +


Note: Buy has the option to pay by Credit/Debit cards or by purchase order.

Need More information of this course or Want to talk to the experts?

Request Quote

Live Chat

Share

Locations

&

Time

Interested ?

Fill the Form

Request a Quote Now

By continuing to use this site you agree to our Privacy Policy & Cookie Policy