What am I going to get from this course?
In order to master a technique in web development or any artistic field, the best approach is one that's hands-on. This allows you to not only learn concepts, but also apply them right away to build your own projects from scratch. That's why this course guides you through the process of actually creating a variety of games, apps, and sites using HTML5 and JavaScript.
- Over 75 lectures and 15.5 hours of content!
- Learn HTML5 and Javascript building projects
- Develop over 10 applications
- Master different APIs introduced in HTML5
- Be a web front end expert
Master HTML5 and JavaScript, starting with the creation of 10 apps and games.
Use HTML5 and JavaScript to Create a Variety of Projects
- HTML5 and JavaScript, Including Semantic Markup and Boilerplate Framework
- CSS3 Media Queries and Responsive Design
- JQuery, Fancybox, APIs, and More
- 10 Hands-On Projects, Including Games and Apps
Not all sites and apps use HTML5 yet, but the ones that do are advanced and cutting edge, and this is the way of the future in web design and app development. Using HTML5, CSS3, JavaScript, and other tools, you can become a more effective web developer and front-end expert, developing unique apps and games, as well as responsive websites. With the right skills in place, you'll be able to expand your portfolio and your client base.
Contents and Overview
This course contains over 75 lectures and 15.5 hours of content during which you'll develop 10 projects using HTML5, JavaScript, and other tools. You should already have knowledge of JavaScript and HTML before taking this course.
You'll build a basic HTML5 site before developing the front-end for a blog using tags and forms, CSS3, and responsive design. You'll also create an animated image gallery, a sticky note app, and a snake game. You'll master the Drag and Drop Image Uploader, and also create an HTML5 quiz app, audio player, mobile to-do list, customer manager app, and location app.
By the end of this course, you'll have completed 10 creative and exciting projects that have tested your skills and given you the confidence to become a front-end expert and programmer. This will allow you to potentially expand your client base and update your resume to advance your career in the field of web development.
Lifetime access to the lectures means you'll be able to return to the information whenever necessary to refresh your memory and tackle future projects.What am I going to get from this course?
Be the front end wizard with this unique course from Eduonix. We bring together a curriculum where you will learn all the tips and tricks of CSS and HTML design while building ten awesome projects. It will help you master different aspects of front end programming and will show you all the best development practices. The following projects have been specially selected to be part of this course.
- Over 54 lectures and 10 hours of content!
- Learn CSS design techniques
- Learn to use LESS and SASS
- Learn the use of BootStrap
- Learn best development practices for CSS
Project 1 - Landing Page Design
Description: We will create an HTML5/CSS landing page which will feature a header & footer, a list with image bullet points, an HTML5 form and a testimonial block. The page will be completely responsive and will adapt to any screen size by using CSS3 media queries. We will be using the Eric Meyers reset file as well.
Features/Technologies: HTML5, CSS3, Web Forms, Lists, Reset Files, Responsive Web Design
Project 2 - Responsive Tableless Calendar
Description: We will create a web calendar page using HTML5/CSS. Unlike many calendars which use HTML tables for positioning and presentation, our calendar will use only CSS. The calendar will be completley responsive and will have a sub-layout for smaller screen sizes.
Features/Technologies: HTML5, CSS3, Lists, Responsive Web Design, Table-like layout using CSS only, Box Spacing, Padding & Margins
Project 3 - Pure CSS Image Slider
Description: Most image sliders that you see around the Web are powered by JavaScript or a JavaScript library like JQuery. We will build a fully functional image slider with pure CSS. We will have thumbnails which when clicked, make the bigger image slide into place. We will use CSS animation/keyframes to achieve this.
Features/Technologies: HTML5, CSS3, Animation, Keyframes, z-index & Positioning
Project 4 - Transition Drop Down Menu
Description: We will build a multi-level dropdown menu using CSS transitions for the dropdown animation effect. We will use just a bit of JQuery to dynamically add a div element
Features/Technologies: HTML5, CSS3, Nested Lists, Responsive Web Design, CSS Transitions, JQuery
Project 5 - CSS Timeline
Description: In this project we will build a timeline using HTML5/CSS. This project will steer away from the common box-like layouts we see all the time. There will be points for years and events with descriptions. This could be used for many things such as professional/employment and personal/lifestyle tracking.
Features/Technologies: HTML5, CSS3, Responsive Web Design, Fluid Layout, Background Images & Positioning
Project 6 - Tables with SASS
Description: SASS is a CSS pre-processor that allows us to do great things like use variables, mixins and nested styles. We will create some pricing tables for web hosting packages
Features/Technologies: HTML5, CSS3, Lists, Responsive Web Design, Fluid Layout, Installing, Configuring & Working With SASS
Project 7 - CSS Image Gallery
Description: We will build an image gallery with the help of JQuery. The layout will be styled with CSS and we will use JQuery for dynamic category filtering and image lightbox. We will also create a very simple logo in Photoshop
Features/Technologies: HTML5, CSS3, Responsive Web Design, Fluid Layout, JQuery, JQuery Fancybox Plugin
Project 8 - Animated Car
Description: We will focus on CSS3 animation and keyframes to position and animate images. We will use an image of a car and make it appear to be driving down the street
Features/Technologies: HTML5, CSS3, Animation, Keyframes, Image Slicing in Photoshop, Background Images & Positioning
Project 9 - Animated Bootstrap Template
Description: Twitter Bootstrap is the most popular HTML5/CSS framework available. We will be building a custom Bootstrap template along with some animation including scroll initialized animation using JQuery and CSS
Features/Technologies: HTML5, CSS3, Animation, Keyframes, Twitter Bootstrap, JQuery
Project 10 - NewsLetter Design with LESS
Description: LESS is another CSS pre-processor like SASS. We will be creating a smooth newsletter template for a restaraunt. We will implement LESS and use features like variables, mixins, nested styles and importing .less files.
Features/Technologies: HTML5, CSS3, Node.js Installation, Installing, Configuring and Working With LESSСтоимость: 48$ ~ 2250 руб.What am I going to get from this course?
JavaScript is the world's most popular language and is widely used in almost all web projects. JQuery has also become hugely popular within few years of its launch. These two technologies are must for any web developer and in order to help you master them in a practical manner we have created this elite course where you will use these technologies to create actual projects and will learn the nuances of their usage in real world.
- Over 50 lectures and 9 hours of content!
- Master JavaScript for Web projects
- Learn the use of JQuery
- Use JavaScript and jQuery in professional projects
- Design web projects more effectively and elegantly
The following projects have been selected for this course
CH1: Simple JavaScript Quiz
Description: We will start with a fairly simple project of a one page, multiple choice JavaScript quiz. In this projct we will look at some of the essentials when it comes to HTML5, CSS and JavaScript. We will look at event handlers, variables and even 'for loops' and arrays
Features/Technologies: HTML5, CSS3, JavaScript, Variables & Arrays, Loops, Responsive Design
CH2: jQuery Content Slider
Description: jQuery is well known for thigs like image gallerys, sliders, scrollers, etc. We will be building a very clean application which will allow us to click a 'next' button to fade in the next slide and a 'prev' button to go in the reverse direction. We will use the fadeIn() and fadeOut() animation methods to do this
Features/Technologies: HTML5, CSS3, JavaScript, Lists, jQuery selectors, methods like addClass() and removeClass() and animation methods like fadeIn() and fadeOut()
CH3: YouTube Search Engine
Description: In this project we will use the YouTube Data API v3 to build a video search engine. We will use the 'search . list' method to do this. We will also implement 'FancyBox', which is a lightbox script. This will allow use to have the video open on our site instead of being redirected to YouTube.
Features/Technologies: HTML5, CSS3, JavaScript, Youtube Data API v3, jQuery $.get() request, inserting HTML via html() method
CH4: FAQ Accordian Slider
Description: We will build a content accordion. This is great for an FAQ section but ofcourse could be used in many different contexts. We will use the slideToggle() method and some others
Features/Technologies: HTML5, CSS3, JavaScript, jQuery, Lists, jQuery Selectors, jQuery slide methods
CH5: Ajax PHP Shoutbox
This project will implement many technologies to build a shoutbox/chat module. We will build a backend MySQL database and connect via PHP. We will then make a request to another .php file which will insert the data into the correct tables
Features/Technologies: HTML5, CSS3, JavaScript, jQuery, AJAX, PHP, MySQL, PHPMyAdmin
CH6: Apple Style Thumbslider
In this project we will build an image slider much like ones you see on Apple's website and apps. It will use thumbnail banivation as well as autoscroll
Features/Technologies: HTML5, CSS3, JavaScript, jQuery, Custom animate() method
CH7: Create a jQuery Plugin
In this chapter we will actually create a simple jQuery plugin, get it ready and then upload it to the jQuery. com plugin registry. We will also look at using Git and Github. com
Features/Technologies: HTML5, CSS3, JavaScript, jQuery, jQuery plugin conventions, Git, Github, Command line utility
CH8: jQuery Portfolio Gallery
We will build an image gallery with a few features such as categorization, lightbox effect and overlay effect
Features/Technologies: HTML5, CSS3, JavaScript, jQuery, Lightbox2 Plugin
CH9: jQuery Mobile App
This will be our first mobile based app. We will use HTML5 and jQuery Mobile framework. You will learn how to build multi-page templates with jQuery Mobile. We will be building a miletracker app which will allow you to enter run or jog mileage and the date along with the ability to update and delete. localStorage will be used for storing data
Features/Technologies: HTML5, CSS3, JavaScript, jQuery, jQuery Mobile, localStorage api
CH10: Tic Tac Toe
This will be a nice and simple application. It is a very basic tic tac toe game. It will implement a few rules and conditionals for things like not being able to click in the same square twice.
Features/Technologies: HTML5, CSS3, jQuery, JavaScript, Conditionals
![[IMG]](/upload/parser/2021/01/54031.0.png)
![[IMG]](/upload/parser/2021/01/54031.1.png)
![[IMG]](/upload/parser/2021/01/54031.2.png)
![[IMG]](/upload/parser/2021/01/54031.3.png)
![[IMG]](/upload/parser/2021/01/54031.4.png)
![[IMG]](/upload/parser/2021/01/54031.5.png)
![[IMG]](/upload/parser/2021/01/54031.6.png)
Последнее редактирование модератором:
- Статус
- В этой теме нельзя размещать новые ответы.