MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Code a Responsive Website Using HTML5 and CSS for Beginners

Course Summary

Learn to hand code a responsive HTML5 site with beautiful CSS, scalable images and a functional web form.


  • +

    Course Syllabus

    • Welcome
      • Introductory Video
      • How the web works
      • How Dynamic Name Servers or (DNS) works
    • Getting Started
      • Important Events about the Mobile Market
      • Build a wireframe for Desktop and Mobile
      • Planning your Website
    • Handcoding HTML5
      • Semantics for the Web
      • Setting up your Workspace for Mac
      • Setting up your Workspace for Windows
      • Link to HTML5 start file
      • Document title
      • Heading and paragraph
      • Block quote and break tag
      • HTML comments
      • Inline tags
      • Ordered and unordered lists
      • Definition lists
      • HTML5 entities
      • Document tree
      • Links within a site
      • Links outside a site
      • Link to an email
      • Combination links
      • HTML validator
      • Page Structure
      • Build Example Site Part 1
      • Build Example Site Part 2
      • Build Example Site Part 3
      • Build Example Site Part 4
      • View the completed example site
      • Introduction to Web Hosting and File Transfer
      • Purchasing a Domain
      • Saving information from the Email
      • Using the File Manager
      • Using File Manager to Upload Files
      • Uploading Files using Cyberduck
      • Adding a Subdomain
      • Setting Up Your Email
    • Introduction to CSS
      • Link to the HTML start file
      • Introduction to CSS
      • Linking to an external style sheet
      • Creating a content division or
      • Writing a CSS comment
      • Implementing a simplified CSS reset
      • Styling built-in selectors
      • Setting padding and margin
      • Styling lists
      • Styling a definition list
      • Styling borders
      • Styling the navigation
      • Understanding psudo classes
      • Implementing an active state for the navigation
      • Adding a font family from Google
      • Understanding HEX colors
      • Using various color methods
      • Build Example Site Part 1
      • Build Example Site Part 2
      • Build Example Site Part 3
      • Build Example Site Part 4
      • Build Example Site Part 5
      • Build Example Site Part 6
      • View the completed example site
    • Adding Images
      • Link to the HTML start file
      • Inserting an image
      • Adding an image caption
      • Using the photoshop crop tool
      • Creating an image gallery part 1
      • Creating an image gallery part 2
      • Photoshop Cropping Tool
      • Understanding images formats for web use
      • Managing an image that's too big
      • Build the Example Site Part 1
      • Build the Example Site Part 2
      • Build the Example Site Part 3
      • Build the Example Site Part 4
      • Build the Example Site Part 5
      • View the completed example site
    • HTML5 Forms for collecting user information
      • Link to the HTML start file
      • Introduction to forms
      • Form inputs and submit
      • New HTML5 input types
      • Creating a fieldset
      • Adding radio buttons
      • Adding checkboxes
      • Adding a textarea for comments
      • Implementing a select with dropdowns
      • Adding hidden inputs
      • Using HTML5 required and pattern
      • Sending email using FormToEmail.php
      • Styling your form with CSS
      • Build the Example Site part 1
      • Build the Example Site part 2
      • Build the Example Site part 3
      • Build the Example Site part 4
      • Build the Example Site part 5
      • Build the Example Site part 6
      • View the completed example site
    • Advanced CSS
      • Link to the HTML start file
      • Add a new division to control the page width
      • Overview of media queries
      • Build the phone navigation
      • Build the desktop navigation
      • Add a gradient image
      • Implement a CSS graident
      • Add a background image
      • Add a graphic for lists
      • Creating drop shadows with css
      • Tell phones not to lie about their width
      • Build the Example Site Part 1
      • Build the Example Site Part 2
      • Build the Example Site Part 3
      • Build the Example Site Part 4
      • Build the Example Site Part 5
      • Build the Example Site Part 6
      • View the completed example site
    • Adding the final touches
      • Link to the HTML start file
      • Explore iFrames
      • Embed a youtube video
      • Add a Vimeo video to your site
      • Add a Google map to your site
      • Adding audio as an OGG format
      • Add audio as an MP3 format
      • Link to a PDF file
      • Add a table
      • Styling a table with CSS
      • Build the Example Site Part 1
      • Build the Example Site Part 2
      • Build the Example Site Part 3
      • Build the Example Site Part 4
      • Build the Example Site Part 5
      • Build the Example Site Part 6
      • Build the Example Site Part 7
      • View the completed example site
      • What's Next?


Course Fee:
USD 107

Course Type:

Self-Study

Course Status:

Active

Workload:

1 - 4 hours / week

This course is listed under Development & Implementations and Networks & IT Infrastructure Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top