Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
Level UP your coding skills.
The course level is from beginner to intermediate.
You will learn to create a beautiful webpage with very easy steps and instructions.
By the end of the course, you will have a better understanding of HTML, CSS (Cascading Stylesheet), web development and responsive design.
As a student in this course, you will learn to:
Video lessons include:
Some Bonus include
I am fast-lightening responder - if you have any question about the course, you can reach out to me in a private message or by posting your question on the discussion board.
I will make sure you have the best learning experience
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Welcome!|
Welcome to the course - Thank You for joining
In order to get started, download the Course Guide (PDF) in Lecture 2
My name is Sandy and I will be your instructor.
Course Guide (PDF) + downloadable Working Files
|Section 2: HTML tutorial|
HTML5 Cheatsheet | PDF
In this lecture, you will learn to create your first HTML document.
For extra resources visit : http://www.w3schools.com/html/html_headings.asp
For more practice, visit : http://www.w3schools.com/html/html_formatting.asp
For extra resources visit : http://www.w3schools.com/html/html_links.asp
For extra resources visit : http://www.w3schools.com/html/html5_semantic_elements.asp
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
|Section 3: CSS Fundamentals|
CSS Cheatsheet | PDF
Intro to CSS (Cascading Stylesheet)
In this lecture, we will use the flat UI colors. Open this link in a new tab of your browser.
Styling the Navigation Bar
Class & ID
CSS Float (2-column Layout)
CSS Clear Property
The Box Model
Margin & Padding
|Section 4: Responsive Design | Media Queries|
Media Queries | Tablet
Media Queries | Small Devices
|Section 5: Alternate Layout|
Media Queries - I
Media Queries - II
Embed a youtube video link
|Section 6: Project - "Bon Voyage! Travel with Us!" - Part I|
Freepik : http://www.freepik.com/ - millions of graphics available for download
I have already included some in the images/ folder or feel free to visit the above link to download more.
In this video lesson, I will explain how to use a sprite in your document.
A sprite is a collection of images put in a single file. A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
Google Font & Font Awesome
Navigation | Position Fixed
Navigation | CSS z-index property
|Section 7: Project - "Bon Voyage! Travel with Us!" - Part II (Media Queries)|
Tablet & Ipad
Mobile version 1
Mobile version 2
|Section 8: Project - Bonus|
Navigations links hover effects
link to Animate.css
super easy ! I will teach you in 2 minutes how to animate the title of your webpage.
Images Hover effect
We will work with the sprite again. And, this time we will use the CSS transition property to add special effect.
My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.
I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.
Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.
On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff.