Tech & IT
Business
Coding & Developer
Finance & Accounting
Academics
Office Applications
Art & Design
Marketing
Health & Wellness
Sounds & Music
Lifestyle
Photography
Get Unlimited Learning Access
$29
6 days left at this price!
30-Day Money-Back Guarantee
This plan includes
- Instant access to 11,000+ online courses
- Play & Pause Course Videos
HD Video Recorded Lectures- Learn on Mobile/PC/Tablet
- Quizzes and Real Projects
- Lifetime Course Certificate
- Instructor Chat Support
- Cancel Plan Anytime
Subscribe to Learnfly’s top courses
Get this course, plus 11,000+ of our top-rated courses for one year with Go Annually Plan.
6 days left at this price!
30-Day Money-Back Guarantee
This plan includes
- Instant access to 11,000+ online courses
- Play & Pause Course Videos
- HD Video Recorded Lectures
- Learn on Mobile/PC/Tablet
- Quizzes and Real Projects
- Lifetime Course Certificate
- Instructor Chat Support
- Cancel Plan Anytime
$29
What you'll learn?
- Create interactive websites from scratch
- Become familiar with coding and creating web pages and applications
Course Overview
Learn HTML CSS and JavaScript all in one course. This is the complete front end web developer starting course.
Whether you are looking to refresh your skills, expand your knowledge or looking to just get started with web development this course is for YOU!
A complete comprehensive course covering the core foundations of the web.
Source Code and examples are included to get you started quickly. Links to top resources and more all available in one massive course.
This course is taught by an instructor with over 18 years of real world industry experience. Ready to help you learn web development and answer any questions you may have.
This course is designed to help you learn and practice front-end coding for website development and design. Learn the core concepts of HTML, CSS and JavaScript.
Friendly support is always available in the Q&A section ready to help you learn.
Join now take the first step to exploring more about web development.
How the internet works :
- Learn about DNS names and IP address
- What makes a website and how does your browser know what to show you.
- Coding languages HTML CSS JavaScript
- Web development and what its all about
- Terms like frontend and backend code
- Hosting, Browsers, FTP +++
- Developer tools and resources
- Tips for web developers
HTML building the code for websites :
- Understanding HTML foundations
- Different Types of tags
- Creating an HTML boilerplate template
- HTML formatting tags
- Tags Elements Attributes >
- Resources to Learn more about HTM
- HTML Headings
- Content separation and Common tags
- Commenting
- Preformatted text
- HTML entities ASCii characters
- Markup Formatting HTML Markup
- Hyperlinks connecting the pages
- Using Images Images styling
- Lists unordered and ordered
- Nested Lists inside lists, List styles, List options, Description Lists
- Tables row cells table head and body
- HTML Forms with input and methods labels and more
- HTML5 Input HTML5 Types color, date, email, month, number, range, search, tel, time, url, week
- Input type images upload
- HTML5 Semantic elements for building structure
- How iFrames work and can be added to HTML
CSS for presentation
- What is CSS
- How to add styling to HTML elements
- CSS defined what it does in Web development
- Websites with CSS vs without CSS
- Containers grouping content spans and divs
- Selects getting the right element
- Adding CSS to code
- CSS color options palette fonts and backgrounds
- Borders Margins Padding - Box model
- Text and fonts CSS
- tables and lists with CSS
- Element Display and positioning
- Building a navbar
- Advanced CSS selectors
- Pseudo Classes and Pseudo Elements
- Media Queries
JavaScript Fundamentals
- What is JavaScript
- Writing JavaScript is code and what it does
- Adding JavaScript to your web page
- Developer console log
- JavaScript data type
- What variables are and how they are used
- Operators for applying logic to code
- Arrays and objects to hold data
- Conditionals with logic
- Loops for while and do
- JavaScript functions at the heart of JavaScript
- More Built in functions methods
JavaScript Document Object Model
- What is the DOM and how it works
- Updating and manipulating elements
- Selecting multiple elements
- Page event listeners
- Click events
Pre-requisites
- Desire to learn
- Computer access
Target Audience
- Anyone who wants to learn about web development
- This course is perfect for complete beginners
- This course is great for anyone who wants all the content in one place
- Web Application developers
- Web Designers
Curriculum 247 Lectures 17:12:46
-
Section 1 : Introduction to web development course
- Lecture 2 :
- Welcome to front end web development
- Lecture 3 :
- webdevintro
- Lecture 4 :
- Quick Resources
-
Section 2 : How the internet works
- Lecture 1 :
- DNS names and IP addresses
- Lecture 2 :
- Code of the internet
- Lecture 3 :
- HTML and CSS how they work
- Lecture 4 :
- JavaScript Code
- Lecture 5 :
- Web development and how it works
- Lecture 6 :
- Dynamic Static Frontend Backend Client Side Server Side
- Lecture 7 :
- Editors creating frontend code
- Lecture 8 :
- Web development Browsers
- Lecture 9 :
- File Structure
- Lecture 10 :
- Hosting websites
- Lecture 11 :
- Get your website files to your server
- Lecture 12 :
- Web developer Resources and info
- Lecture 13 :
- Lesson Resource
-
Section 3 : Basics of HTML
- Lecture 1 :
- What is HTML
- Lecture 2 :
- How to Write and Practice HTML
- Lecture 3 :
- How to create an HTML boilerplate
- Lecture 4 :
- Exercise create a boilerplate template
- Lecture 5 :
- Exercise creating a boilerplate HTML file
- Lecture 6 :
- Self Closing tags Meta tags and attributes
- Lecture 7 :
- Heading Tags
- Lecture 8 :
- Update template
- Lecture 9 :
- Common tags P BR HR separate text
- Lecture 10 :
- Clean Code Comments and more
- Lecture 11 :
- HTML preformatted text
- Lecture 12 :
- HTML Character Codes resources
- Lecture 13 :
- Resources
- Lecture 14 :
- 14 EXERCISE Recreate as HTML
- Lecture 15 :
- Exercise Source
-
Section 4 : HTML more tags
- Lecture 1 :
- HTML Markup Examples
- Lecture 2 :
- Source Code
- Lecture 3 :
- HTML hyperlinks
- Lecture 4 :
- Hyperlink Attributes
- Lecture 5 :
- How to create HTML bookmarks
- Lecture 6 :
- email link HTML mailto
- Lecture 7 :
- Source Code
- Lecture 8 :
- Exercise Create Navbar for website
- Lecture 9 :
- Source Code
- Lecture 10 :
- Adding Images to websites
- Lecture 11 :
- Exercise Create Thumbnail portfolio
- Lecture 12 :
- Source Code
- Lecture 13 :
- Ordered Lists and Unordered lists
- Lecture 14 :
- HTML Description List
- Lecture 15 :
- HTML Description List
- Lecture 16 :
- HTML Nested Lists
- Lecture 17 :
- Source Code
- Lecture 18 :
- Exercise List of services
- Lecture 19 :
- Source Code
- Lecture 20 :
- HTML tables
- Lecture 21 :
- HTML spanning multiple ells
- Lecture 22 :
- Source Code
- Lecture 23 :
- Quick Tip Styling
- Lecture 24 :
- Exercise HTML table
- Lecture 25 :
- 25 Source Code
- Lecture 26 :
- HTML forms introduction
- Lecture 27 :
- Contact Form HTML
- Lecture 28 :
- New HTML5 input types
- Lecture 29 :
- Form elements HTML
- Lecture 30 :
- Form content
- Lecture 31 :
- 31 Source Code
- Lecture 32 :
- Exercise Create Contact Form
- Lecture 33 :
- 33 Source Code
- Lecture 34 :
- HTML5 semantic elements
- Lecture 35 :
- 35 Source Code
- Lecture 36 :
- HTML iframe pages
- Lecture 37 :
- Exercise Create a Website
- Lecture 38 :
- 38 Source Code
-
Section 5 : Introduction to CSS
- Lecture 1 :
- Websites with and without CSS
- Lecture 2 :
- How to add CSS to HTML Pages
- Lecture 3 :
- Making selections CSS inspector
- Lecture 4 :
- Divs and spans content selection
- Lecture 5 :
- CSS selection id tag class
- Lecture 6 :
- Colors HEX RGB RGBA values
- Lecture 7 :
- CSS named color values
- Lecture 8 :
- CSS background images
- Lecture 9 :
- CSS background shorthand statement
- Lecture 10 :
- Code sample
- Lecture 11 :
- CSS borders shorthand
- Lecture 12 :
- CSS border Outline
- Lecture 13 :
- Code Sample Borders
- Lecture 14 :
- CSS Margins
- Lecture 15 :
- CSS padding
- Lecture 16 :
- CSS Box Model Dev Tools
- Lecture 17 :
- Box Model Example
- Lecture 18 :
- CSS height and Width
- Lecture 19 :
- Box Model Challenge
- Lecture 20 :
- Box Model Challenge Source
- Lecture 21 :
- Auto Margins Center your elements CSS
- Lecture 22 :
- CSS font property
- Lecture 23 :
- CSS Text property
- Lecture 24 :
- Chrome dev tools editors and options
- Lecture 25 :
- Adding Font families Google Fonts
- Lecture 26 :
- Line Height CSS
- Lecture 27 :
- CSS letter spacing
- Lecture 28 :
- Code examples Fonts text and letters
- Lecture 29 :
- CSS links
- Lecture 30 :
- CSS table styling
- Lecture 31 :
- Display and Hiding elements CSS
- Lecture 32 :
- Source Code
- Lecture 33 :
- Display Four Squares Challenge
- Lecture 34 :
- Display Four squares Solution
- Lecture 35 :
- CSS position Properties
- Lecture 36 :
- DevTools Design Tips
- Lecture 37 :
- Code Example position
- Lecture 38 :
- Coding Challenge Make a NavBar from an unordered list
- Lecture 39 :
- NavBar Start Code
- Lecture 40 :
- Code Challenge Solution
- Lecture 41 :
- NavBar Source Code
- Lecture 42 :
- Code Example
- Lecture 43 :
- CSS links and resources
-
Section 6 : Using CSS to build webpage layouts
- Lecture 1 :
- Floats section introduction
- Lecture 2 :
- More about Floats
- Lecture 3 :
- Introduction to floats
- Lecture 4 :
- CSS Float images inline with text
- Lecture 5 :
- CSS float thumbnails
- Lecture 6 :
- Source Code Thumbnails
- Lecture 7 :
- HTML build basic page layout CSS
- Lecture 8 :
- Two column CSS site
- Lecture 9 :
- Create a 2 column page layout in minutes
- Lecture 10 :
- Two column site source code
- Lecture 11 :
- Create 3 column webpage
- Lecture 12 :
- Three column height background color fix
- Lecture 13 :
- Three Column Source Code
-
Section 7 : Advanced CSS
- Lecture 1 :
- CSS Combinators
- Lecture 2 :
- Pseudo Classes
- Lecture 3 :
- Source Code
- Lecture 4 :
- CSS Pseudo Elements
- Lecture 5 :
- Source Code
- Lecture 6 :
- CSS Selectors by attributes
- Lecture 7 :
- Selector Example Code
- Lecture 8 :
- CSS Media Queries secret to responsive design
- Lecture 9 :
- Media Query Source Code
-
Section 8 : Do more with CSS
- Lecture 1 :
- Multiple Background Images CSS
- Lecture 2 :
- Element box properties CSS
- Lecture 3 :
- More border options CSS3
- Lecture 4 :
- Source Code Example
- Lecture 5 :
- CSS3 background gradients CSS
- Lecture 6 :
- Code Sample
- Lecture 7 :
- CSS3 Animation
- Lecture 8 :
- Animation Example Code
-
Section 9 : Apply CSS create a website
- Lecture 1 :
- HTML build a basic website structure with HTML
- Lecture 2 :
- Apply CSS build a navbar
- Lecture 3 :
- Build 2 Column main content area CSS
- Lecture 4 :
- Sidemenu links hover CSS
- Lecture 5 :
- CSS website tweaks
- Lecture 6 :
- Website Source Code
- Lecture 7 :
- CSS Resources
-
Section 10 : JavaScript do more on your web page
- Lecture 1 :
- What is JavaScript
- Lecture 2 :
- How to add JavaScript to Webpages
- Lecture 3 :
- JavaScript Source Code
- Lecture 4 :
- Debugging and commenting JavaScript
- Lecture 5 :
- Source Code Example
- Lecture 6 :
- JavaScript Basic Data Types
- Lecture 7 :
- JavaScript Variables
- Lecture 8 :
- JavaScript Variable Rules
- Lecture 9 :
- Exercise 1 Output to console link to js file
- Lecture 10 :
- Exercise Source
- Lecture 11 :
- Data type Null vs Undefined JavaScript
- Lecture 12 :
- Declaring multiple variables at once JavaScript
- Lecture 13 :
- JavaScript Operators
- Lecture 14 :
- Increment and Decrement Values JavaScript
- Lecture 15 :
- Assignment Operators JavaScript
- Lecture 16 :
- Comparison Operators JavaScript
- Lecture 17 :
- JavaScript String Operators
- Lecture 18 :
- JavaScript Logical Operators
- Lecture 19 :
- Examples and Source Operators
-
Section 11 : JavaScript coding essentials
- Lecture 1 :
- prompt and alert JavaScript
- Lecture 2 :
- Writing content to the HTML document object
- Lecture 3 :
- Example Code
- Lecture 4 :
- JavaScript Objects
- Lecture 5 :
- JavaScript Objects Dynamic Outputs
- Lecture 6 :
- JavaScript Objects within Objects
- Lecture 7 :
- JavaScript update values
- Lecture 8 :
- Source Code
- Lecture 9 :
- JavaScript Arrays
- Lecture 10 :
- Working with Array Methods JavaScript
- Lecture 11 :
- Array Methods extended
- Lecture 12 :
- Sorting and more with Arrays JavaScript
- Lecture 13 :
- More with Arrays JavaScript
- Lecture 14 :
- Objects and Arrays together
- Lecture 15 :
- Source Code and Examples Arrays and Objects
- Lecture 16 :
- JavaScript if condition statement
- Lecture 17 :
- JavaScript switch statement
- Lecture 18 :
- Source Code conditions
- Lecture 19 :
- JavaScript Do while loops
- Lecture 20 :
- For loops and more JavaScript
- Lecture 21 :
- Looping items in arrays and objects JavaScript
- Lecture 22 :
- Looping examples
- Lecture 23 :
- JavaScript introduction to functions
- Lecture 24 :
- Working with JavaScript Functions
- Lecture 25 :
- Global and Local Variables Functions
- Lecture 26 :
- Self-Executing function
- Lecture 27 :
- Break out of function JavaScript
- Lecture 28 :
- Example Code functions
- Lecture 29 :
- JavaScript String Methods
- Lecture 30 :
- String examples
- Lecture 31 :
- Strings and Arrays
- Lecture 32 :
- Numbers to strings back to numbers
- Lecture 33 :
- Source Code Example
- Lecture 34 :
- JavaScript Math Method
- Lecture 35 :
- JavaScript Date Method
- Lecture 36 :
- Source Code examples
-
Section 12 : JavaScript DOM
- Lecture 1 :
- What is the DOM
- Lecture 2 :
- Source Code
- Lecture 3 :
- Select Node value using JavaScript
- Lecture 4 :
- JavaScript Objects and selection within the DOM
- Lecture 5 :
- Source Code
- Lecture 6 :
- Windows Object Model
- Lecture 7 :
- document write method
- Lecture 8 :
- Selecting Elements by ID
- Lecture 9 :
- Update Output Div content from input form
- Lecture 10 :
- Source Code
- Lecture 11 :
- Select Elements By Tag Name
- Lecture 12 :
- Selecting elements by Class
- Lecture 13 :
- Source Code
- Lecture 14 :
- Document query Selector
- Lecture 15 :
- Making Selections like CSS
- Lecture 16 :
- Source Code
- Lecture 17 :
- Traversing the DOM
- Lecture 18 :
- Source Code
- Lecture 19 :
- Add styling to Elements Dynamically
- Lecture 20 :
- Source Code
- Lecture 21 :
- Append and Remove Elements using JavaScript
- Lecture 22 :
- Source Code
- Lecture 23 :
- Add Event listeners to elements using JavaScript
- Lecture 24 :
- Event listeners click events
- Lecture 25 :
- Source Code
- Lecture 26 :
- Hover over elements make them change background color
- Lecture 27 :
- Source Code
- Lecture 28 :
- Image popup windows
- Lecture 29 :
- Source Code
-
Section 13 : Create a single page website from scratch HTML CSS JavaScript
- Lecture 1 :
- Single Page Website Introduction
- Lecture 2 :
- Development Environment Setup
- Lecture 3 :
- webpage setup
- Lecture 4 :
- Setup Nav Structure and Elements
- Lecture 5 :
- Style NavBar CSS
- Lecture 6 :
- Add Placeholder Content to Sections
- Lecture 7 :
- Tweak Header NavBar and Sections
- Lecture 8 :
- Build Sections
- Lecture 9 :
- Build Page Footer
- Lecture 10 :
- Final Page Tweaks
- Lecture 11 :
- JavaScript ScrollSpy Effect
- Lecture 12 :
- Webpage Final Overview
-
Section 14 : Course Conclusion resources and helpful tips
- Lecture 1 :
- Resources
Our learners work at
Frequently Asked Questions
-
How do i access the course after purchase?
It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time. -
Are these video based online self-learning courses?
Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic. -
Can i play & pause the course as per my convenience?
Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on. -
How do i contact the instructor for any doubts or questions?
Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want. -
Do i need a pc to access the course or can i do it on mobile & tablet as well?
Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly. -
Do i get any certificate for the courses?
Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
-
For how long can i access my course on the platform?
You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions. -
Is there any free trial?
Currently, we do not offer any free trial. -
Can i cancel anytime?
Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?
Instructor
677933 Course Views
20 Courses
Instructor, 18+yrs Web Experience
I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Providing Web development courses and digital marketing strategy courses since 2002.
Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.
"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990, and my first website in 1998. I enjoy sharing my knowledge with others and want to help you share in the wonderful opportunities that the internet provides."
"Learning, understanding with a strong passion for education. The internet has provided us with new opportunities to expand and share knowledge."
Want to learn more about becoming a web developer, do you want to experience the freedom that technology provides for us? Learn how tobring amazing things to life online. Technology connects us all in many ways. It opens up doors to those who embrace it and learn how to make those connections real.
"My courses are designed to help you achieve your goals, learn and update skills"
Background : An experienced web application developer, having worked on multiple enterprise level applications, hundreds of websites, business solutions and many unique and innovative web applications. Web application development areas of expertise include HTML, CSS, JavaScript, JQuery, Bootstrap, PHP and MySQL. Anything to do with web creation and digital experience. Passionate about everything to do with web application development, programming to online marketing with a strong focus on social media and SEO.
"Understanding technology provides a means to better connect with users. It also opens so many doors. Knowledge is the key to success and I want to help you experience what technology has to offer. I'm passionate about web technologies, and look forward to sharing my knowledge and experience with you!"
View More...
