Back to Courses
The Complete Front-End Web Development Course!
Course Highlights Gain the skills and credentials to kickstart a successful career in the technology industry and learn from the …
Course Highlights
Gain the skills and credentials to kickstart a successful career in the technology industry and learn from the experts with this step-by-step training course. This The Complete Front-End Web Development Course has been specially designed to help learners gain a good command of Front-End Web Development, providing them with a solid foundation of knowledge to become a qualified professional.
Through this The Complete Front-End Web Development Course!, you will gain both practical and theoretical understanding of Front-End Web Development that will increase your employability in this field, help you stand out from the competition and boost your earning potential in no time.
Not only that, but this training includes up-to-date knowledge and techniques that will ensure you have the most in-demand skills to rise to the top of the industry. This qualification is fully accredited, broken down into several manageable modules, ideal for aspiring professionals.
Learning outcome
- Familiar yourself with the recent development and updates of the relevant industry
- Know how to use your theoretical knowledge to adapt in any working environment
- Get help from our expert tutors anytime you need
- Access to course contents that are designed and prepared by industry professionals
- Study at your convenient time and from wherever you want
Course media
Why should I take this course?
- Affordable premium-quality E-learning content, you can learn at your own pace.
- You will receive a completion certificate upon completing the course.
- Internationally recognized Accredited Qualification will boost up your resume.
- You will learn the researched and proven approach adopted by successful people to transform their careers.
- You will be able to incorporate various techniques successfully and understand your customers better.
Requirements
- No formal qualifications required, anyone from any academic background can take this course.
- Access to a computer or digital device with internet connectivity.
Course Curriculum
Course Curriculum
| Welcome to the course! | |||
| Introduction to the course | 00:02:00 | ||
| Atom setup | 00:05:00 | ||
| Web Development Basics - HTML | |||
| HTML document structure | 00:04:00 | ||
| HTML elements – div, span | 00:07:00 | ||
| HTML elements – i, b, p, a | 00:06:00 | ||
| HTML elements – ul, li, ol | 00:05:00 | ||
| HTML elements – header, footer | 00:05:00 | ||
| HTML elements – section, main, article | 00:08:00 | ||
| HTML elements – h1-h6, aside | 00:03:00 | ||
| HTML tables | 00:10:00 | ||
| Advanced HTML Concepts | |||
| Images | 00:04:00 | ||
| Forms | 00:05:00 | ||
| Checkboxes | 00:05:00 | ||
| Radio buttons | 00:05:00 | ||
| Select, option, buttons | 00:06:00 | ||
| HTML5 videos | 00:07:00 | ||
| HTML5 audio | 00:05:00 | ||
| Doctypes | 00:08:00 | ||
| Meta tags | 00:07:00 | ||
| Introduction to Cascading Style Sheets (CSS) | |||
| Targeting, color, background | 00:16:00 | ||
| Element specificity | 00:04:00 | ||
| Padding, margin, float | 00:08:00 | ||
| Max-width, background-image | 00:17:00 | ||
| Switching over to an IDE | 00:02:00 | ||
| Font weight, style, and family | 00:14:00 | ||
| Text decorations | 00:04:00 | ||
| Text spacing | 00:04:00 | ||
| Text decoration modification | 00:04:00 | ||
| Text shadow | 00:08:00 | ||
| Advanced CSS | |||
| Psuedo states | 00:09:00 | ||
| Border radius | 00:08:00 | ||
| Positions | 00:09:00 | ||
| Psuedo-elements | 00:07:00 | ||
| Z-index | 00:06:00 | ||
| Viewpoint width and height, overflowing content | 00:07:00 | ||
| Transition property | 00:06:00 | ||
| JavaScript for Begeinners | |||
| Intro to Javascript | 00:04:00 | ||
| Alerts and console logging | 00:06:00 | ||
| Integers, strings, and variables | 00:07:00 | ||
| Undefined variables and modifying values of variables | 00:05:00 | ||
| Boolean operators | 00:03:00 | ||
| Comparing values | 00:05:00 | ||
| If statements | 00:11:00 | ||
| For loops | 00:03:00 | ||
| Defining functions | 00:06:00 | ||
| Event handling | 00:09:00 | ||
| Setting an elements inner HTML | 00:03:00 | ||
| More JavaScript Concepts | |||
| Arrays pt1 | 00:06:00 | ||
| Arrays pt2 | 00:07:00 | ||
| Arrays pt3 | 00:05:00 | ||
| Textareas and getting the values of inputs | 00:14:00 | ||
| Functions – parameters and return values | 00:08:00 | ||
| Multiple parameters in functions | 00:05:00 | ||
| Flexible function parameters | 00:12:00 | ||
| Project – find the missing number | 00:08:00 | ||
| Project solution | 00:08:00 | ||
| Classes intro | 00:05:00 | ||
| Class constructor, instance variables, and static variables | 00:09:00 | ||
| Extending classes | 00:14:00 | ||
| Getting Started with jQuery | |||
| jQuery setup | 00:06:00 | ||
| Targeting elements | 00:04:00 | ||
| Event handling | 00:09:00 | ||
| Dropdown menus | 00:22:00 | ||
| Making our dropdown disappear | 00:05:00 | ||
| Multiple targets, events, attr method | 00:09:00 | ||
| Prepend, append, html | 00:05:00 | ||
| preventDefault | 00:06:00 | ||
| eventwhich, switch | 00:09:00 | ||
| Custom context menu, pageY, pageX | 00:13:00 | ||
| is method | 00:08:00 | ||
| More jQuery | |||
| Writing our own version of jQuery | 00:17:00 | ||
| Find method | 00:05:00 | ||
| First and last | 00:02:00 | ||
| Focusin and focusout | 00:11:00 | ||
| Contains, is, hasClass | 00:07:00 | ||
| Each method | 00:03:00 | ||
| Callbacks | 00:07:00 | ||
| CSS | 00:05:00 | ||
| Bootstrap Basics | |||
| Bootstrap intro | 00:07:00 | ||
| Navbar pt1 | 00:07:00 | ||
| Navbar pt2 | 00:11:00 | ||
| Bootstrap forms pt1 | 00:14:00 | ||
| Bootstrap forms pt2 | 00:05:00 | ||
| Bootstrap buttons | 00:06:00 | ||
| Project #2 - Pipboy from Fallout 4 | |||
| Pipboy navbar | 00:08:00 | ||
| Pipboy main page | 00:07:00 | ||
| Pipboy image and footer | 00:13:00 | ||
| Pipboy colors | 00:05:00 | ||
| Pipboy font and styling the main nav | 00:13:00 | ||
| Scanlines | 00:06:00 | ||
| Navigation styling | 00:10:00 | ||
| Tabs | 00:09:00 | ||
| Progress bars | 00:10:00 | ||
| Stat bars | 00:14:00 | ||
| Footer fixes | 00:02:00 | ||
| Damage and resistance | 00:05:00 | ||
| Icons | 00:13:00 | ||
| Inventory template | 00:04:00 | ||
| Item list | 00:13:00 | ||
| Weapon stat container | 00:11:00 | ||
| Finishing touches with JavaScript | 00:18:00 | ||
| Project #3 - Google Chrome Extension | |||
| Problem Solving | 00:09:00 | ||
| Manifest files | 00:06:00 | ||
| Basic setup | 00:03:00 | ||
| Getting video urls | 00:02:00 | ||
| Injecting JS | 00:06:00 | ||
| Getting pretty objects for each url | 00:05:00 | ||
| Creating download options list | 00:17:00 | ||
| Communicating between the page and extension | 00:10:00 | ||
| Chrome downloads api and background scripts | 00:08:00 | ||
| Receiving messages and downloading files | 00:06:00 | ||
| Styling our extension and publishing | 00:09:00 | ||
| BONUS - Coding Another Google Chrome Extension | |||
| Introduction and Manifest | 00:22:00 | ||
| Content Scripts | 00:16:00 | ||
| Messaging Different Parts of Our Extension | 00:10:00 | ||
| Creating Share Popup | 00:08:00 | ||
| Icons | 00:13:00 | ||
| Building an Image Downloader | 00:14:00 | ||
| Interacting with the DOM | 00:29:00 | ||
| Uploading to the Chrome Web Store | 00:07:00 | ||
| Order Your Certificate | |||
| Order Your Certificate | 00:00:00 | ||
Don't just take our word for it
Amazing workshop.
Very informative for the freshers like me. Learned a lot of things about digital marketing. I'm really thankful.
Aarini Sinha 
It was a great experience. The course was jampacked with excellent information. And when I needed help, Skill-up helped me with technical problems instantly. Fast feedback.
Varsha Sivamohan 
I am currently signed on to several courses with skill up. I have just finished my second one. The courses are informative and good for all types of learners. I recommend them.
Judith Taylor 
The support team was FANTASTIC!!! Very quick to respond and even though I was nervous as I am not good at tests, they made me feel comfortable.
I am very grateful for the support
Charlie Anderson 
Completed the Level 3 Mental Health Support Worker course, very good and highly recommend it.
Very good course, enjoyed it thoroughly and important in my line of work as a Support worker.
Parmjit Dosanjh 
I am pleased to have completed my online course in Mental Health First Aid with SkillUp. All the modules were detailed & comprehensive with review questions, which really helped me to grasp the information & prepared me well for the mock test & final exam.
Shan 
I was a bit nervous about the course but I gave a try,it's perfect and I still can't believe I paid a peanut to acquire such a course,the sliding show and introduction was well understood.i will recommend skill up to anyone interested to persuade a meaningful career,and also to the support team keep doing the good work.💪
Sara Nana 
1 Year Access 
60 Students 
16 hours, 7 minutes 
