Build Your First Glass Web App Theme With HTML5 And CSS3

A complete step by step code along series to help you deisgn the most prettiest glass footer with HTML5 and CSS3
4.4 (41 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
3,664 students enrolled
Free
Start Learning Now
  • Lectures 25
  • Length 2.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course Description

My story is simple and as you can tell from the promo video, i gave up so many times when i started in web design. I gave up only because i was learning a lot of HTML and CSS but i was creating very poor designs and this was discouraging. The only way i overcame this was when i took a course that taught me how to create a website with HTML5 and CSS3 and most of what i did was to pause the video and type exactly what the instructor had typed. I barely understood anything but the final look of the site and the pressure i got from friends and relatives wanting me to create websites for them after i had shown them what i had done, forced me to learn without ceasing until i could put everything together to become a good web designer/developer. With that experience, i decided to get you up and running with this course by teaching you only the essential parts of HTML5 and CSS3 needed for what we would be building in this project.

The things we would learn are in the following order:

1. After introducing you to the course and giving you a feel of how the glass footer looks like, we would talk about how we can install the necessary text editors.

2. We would learn to install and use some essential sublime Text plugins that would help us to code faster and easier.

3. We would learn the basics of HTML5

4. Also we would learn the basics of CSS3

5. Next we would learn how to create the basic file structure for creating the glass project.

6. We would then code the HTML part of the glass footer with the knowledge you have gained from the basics of HTML and we would do same for the CSS3 part of the project too.

7. We would fix bugs that we encountered and that would mark the end of the glass footer.

8. In the bonus lecture you would get to know the source of the glass footer and also get my contacts.

upon completion of this course you would have adequate skills necessary to begin building very nice looking HTML5 and CSS3 websites on your own.

You would also be able to build the same project for clients and make money.

It would take you just 2 and half hours to complete the course while having a lifetime access to the course. After the course you would have all the skills necessary to build the nicest glass looking footer ever. Trust me, your clients would really be amazed at how well you are good with your designs and your work.

What are the requirements?

  • Student needs to know the basics of working with a computer.
  • Students needs to know how to create files and folders
  • You need to have a computer on which you can test your codes
  • Finally you need to be ready to learn in a relaxed and a fun way.

What am I going to get from this course?

  • Create an eye catching glass looking footer with HTML5 and CSS3 and would be able to do it for thier clients to make money and contact.
  • Learn to use the basics of html in any of your projects
  • Get up and running with HTML5 and CSS3
  • Learn to use the basics of CSS3 in any of your projects
  • Learn to build websites using HTML5 and CSS3
  • Get a copy of my free ebook titled "A JOURNEY INTO MEMORY" which teaches you how to study while retaining the information for a very long time

What is the target audience?

  • This course is for the beginner to the pro. It is for every level since all that you need to understand the course would be taught in a very simple and easy to understand way.
  • The aspiring web programmer and designer
  • Anyone with the interest to build websites from scratch using HTML5 and CSS3

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Course Introduction and Installation of Text editors and Plugins
01:58
  • In this video you would get a general overview of what we would be building in this course.
  • Also you would get a fair idea about the structure of the course.
02:24
  • Know what a text editor does.
  • Know the text editor we would be using in this video and how to get it and other alternatives.
Sublime Text plugins
07:37
02:33
  • Learn to make use of the sidebar in sublime to help understand your document file structure.
  • Understand sublime text projects and how to create a project to aid in our workflow.
Section 2: Basics Of HTML5
09:34
  • Learn the very basics of HTML 5 as a pre-requisite for the final project.
  • Only the essential parts of HTML 5 would be taught to avoid boredom.
01:18
  • With the HTML UL tag we can create an un-ordered list which we would later build on that knowledge to build the glass footer.
05:46
  • Learn the three ways that you can use to include stylesheets in to your html documents.
  • Inline style
  • Internal style sheet
  • External style sheet
Section 3: Basics Of CSS3
08:24
  • In this video we would learn how to select and style html elements using css selectors.
  • Learn to use the id, class and descendant selectors. All are pre-requisites for the final development.
  • Learn to debug css code to make quick fixes.
10:43
  • In this video we would be learning the basics of css such as:
  • Height
  • Width
  • Border and boarder-radius.
  • Background and background-image
  • Color Values
  • Learn css measurements
01:59
  • In this video we would learn how to use css to style the html anchor tag in all its states.
  • Learn how to select and style multiple states of an element.
04:59
In this video we would be learn how to work with CSS text and box shadow.
CSS Positioning
05:41
04:03
  • In this video we would learn to use the @font-face rule in css to create a custom font for use in our project.
  • Learn how to make firefox display custom fonts.
02:05

In this video we would learn how to use a custom stylesheet to reset the default styles that come with html elements.

Section 4: Let the Glass Footer Begin
03:18

In this video we would learn how to structure our documents for the coding of the project to begin.

09:41
  • In this video we would begin the coding of the actual project starting with the glass footer.
  • We would learn layout our divs, spans and other tabs to form the backbone of the glass footer.
04:49
  • In this video, we would learn how to get our coded HTML ready for styling.
03:57
  • This video continues where we left off in the previous video.
12:11
  • This video is the beginning of a journey into creating the glass footer.
  • We would begin styling the glass footer element in this video.
  • We would also be changing the background image in this video.
  • We would be creating the font that would be used on the tabs on the footer.
  • Learn to use css comments to note changes to the document for future reference.
09:07
  • In this video, we would learn how to style the ul tag and some of the tabs in the footer.
14:19
  • In this video we would style the other tabs that were not styled in the previous video.
03:57
  • With the use of css animations, in this video we would learn to make the notification icons move up when we hover on them.
  • Also we would learn to fix basic css coding issues.
08:56
  • In this video we would give the logout tab its unique style and behavior.
03:21
  • In this video we would learn how to fix all the styles that are not currently rendering properly.
Section 5: Bonus Lecture
Bonus Lecture
03:13

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Hini Majesty, Instructor at Udemy, Software developer

Majesty works as a freelance software developer who specialized in web development. As an experienced network marketer working with GNLD, i have always focused my web development towards building financial Apps. As of this wirting, i have taught several groups computer programming mainly the web languages even though i program in C++ and Java. I have developed quiet a number of web sites and many database driven web apps using HTML,CSS,JQUERY,JAVASCRIPT, PHP, MYSQL and other language extensions like JSON and PDO. I also do volunteer work for my church where i developed and update the churches website and database.

Introduced to computer programming at the age of 14 by an uncle who was then a Java Programmer. One day, he asked me after observing my enthusiasm towards computing if i wanted to learn how to make animations and boy "that, moment i was like a kid in a candy shop". I became so excited that in no time, i would be building stuffs with my computer. Up until then i was practicing general computing like fixing broken pcs and local area networking. He introduced me to action script where we created a flash project together. It was so exciting. I am a firm believer in video tutorials due to the flexibility it gives in studying.

I have been working in the I.T field for the past 7 years and currently studying to get an official Bachelors certificate in I.T at the university of energy and natural resources (Ghana).

Ready to start learning?
Start Learning Now