Frontend Web Development: From Zero to Hero

Focused View

Marko Holzmann-Miletić

25:59:36

663 View

1. Introduction

1. Introduction.mp4

01:10

2. What are HTML, CSS and JavaScript.mp4

01:51

3. How are Web Pages Served.mp4

01:54

4. Visual Studio Code Setup.mp4

06:46

5. Frontend Basics.html

2. Learn HTML

1.1 HTML.pdf

1. HTML Intro.mp4

01:29

2.1 01 HTML Basics.pptx

2.2 01 HTMLBasics.zip

2. HTML Basics.mp4

09:42

3.1 02 BasicHTMLElements.pptx

3.2 02 BasicHTMLElements.zip

3. Basic HTML Elements.mp4

19:28

4.1 03 HTMLAttributes.pptx

4.2 03 HTMLAttributes.zip

4. HTML Attributes.mp4

14:08

5. HTML Basics, Elements and Attributes Exercise.html

6. HTML Basics, Elements and Attributes Quiz.html

7.1 04 HTMLLinks.pptx

7.2 04 HTMLLinks.zip

7. HTML Links.mp4

25:50

8.1 05 HTMLLists.pptx

8.2 05 HTMLLists.zip

8. HTML Lists.mp4

10:48

9.1 06 HTMLTables.pptx

9.2 06 HTMLTables.zip

9. HTML Tables.mp4

12:33

10. HTML Links, Lists and Tables Exercise.html

11. HTML Links, Lists and Tables Quiz.html

12.1 07 HTMLForms.pptx

12.2 07 HTMLForms.zip

12. HTML Forms.mp4

34:16

13.1 08 HTMLMediaElements.pptx

13.2 08 HTMLMediaElements.zip

13. HTML Media Elements.mp4

13:45

14.1 09 HTML5SemanticElements.pptx

14.2 09 HTMLSemantics.zip

14. HTML 5 Semantic Elements.mp4

13:21

15.1 10 HTMLStyles.pptx

15.2 10 HTMLStyles.zip

15. HTML Styles.mp4

15:06

16. HTML Forms, Media Elements, Semantic Elements, and Styles Exercise.html

17. HTML Forms, Media Elements, Semantic Elements and Styles Quiz.html

18.1 11 HTMLBestPractices.pptx

18.2 11 HTMLBestPractices.zip

18. HTML Best Practices.mp4

15:04

19.1 12 ARIALabels.pptx

19. HTML Accessibility.mp4

06:45

20.1 13 SEOHTML.pptx

20. SEO for HTML.mp4

09:25

21. HTML Best Practices, Accessibility and SEO Quiz.html

22.1 12 HTMLSimpleWebSite.zip

22. Build a simple HTML web site.mp4

28:41

3. Learn CSS

1.1 CSS.pdf

1. CSS Intro.mp4

01:04

2.1 01 CSSBasics.pptx

2.2 01 CSSBasics.zip

2. CSS Basics.mp4

11:10

3.1 02 SelectorsPropertiesValues.pptx

3.2 02 SelectorsPropertiesValues.zip

3. Selectors, properties and values.mp4

11:24

4.1 03 CSSSpecificity.pptx

4.2 03 CSSSpecificity.zip

4. CSS Specificity.mp4

10:56

5. CSS Basics, Selectors, Properties and Values and CSS Specificity Quiz.html

6.1 04 RelativeAbsoluteUnits.pptx

6.2 04 RelativeAndAbsoluteUnits.zip

6. Absolute and Relative Units.mp4

13:09

7.1 05 CSSColors.pptx

7.2 05 CSSColors.zip

7. CSS Colors.mp4

10:54

8.1 06 CSSBoxModel.pptx

8.2 06 CSSBoxModel.zip

8. CSS Box Model.mp4

16:49

9. Absolute and Relative Units, CSS Colors and CSS Box Model Quiz.html

10.1 07 CSSFloating.pptx

10.2 07 CSSFloating.zip

10. CSS Float Part 1.mp4

17:58

11. CSS Float Part 2.mp4

10:30

12.1 08 CSSPositioning.pptx

12.2 08 CSSPositioning.zip

12. CSS Positioning.mp4

13:24

13. Floating and Positioning Quiz.html

14.1 09 CSSCenteringElements.pptx

14.2 09 CSSCenteringElements.zip

14. Centering Elements.mp4

07:26

15.1 10 CSSDisplay.pptx

15.2 10 CSSDisplayingElements.zip

15. Displaying Elements.mp4

13:12

16.1 11 CSSShapingElements.pptx

16.2 11 CSSShapingElements.zip

16. Shaping Elements.mp4

07:35

17. Centering, Displaying and Shaping Elements Quiz.html

18.1 12 CSSTypography.pptx

18.2 12 Typography.zip

18. Typography.mp4

16:29

19.1 13 CSSBackgroundsAndGradients.pptx

19.2 13 CSSBackgroundsGradients.zip

19. CSS Backgrounds and Gradients.mp4

12:54

20. Typography and Backgrounds Quiz.html

21.1 14 CSSTransforms.pptx

21.2 14 CSSTransforms.zip

21. CSS Transforms.mp4

10:20

22.1 15 CSSTransitionsAndAnimations.pptx

22.2 15 CSSTransitionsAnimations.zip

22. CSS Transitions & Animations.mp4

17:49

23. Transforms, Transitions and Animations Quiz.html

24.1 16 CSSFlexbox.pptx

24.2 16 CSSFlexBox.zip

24. CSS Flexbox.mp4

21:48

25.1 17 CSSGrid.pptx

25.2 17 CSSGrid.zip

25. CSS Grid.mp4

15:02

26.1 18 CSSRWD.pptx

26.2 18 RWD.zip

26. Responsive Web Design.mp4

18:47

27.1 19 CSSGridSystems.pptx

27.2 19 CSSGridSystems.zip

27. CSS Grid Systems.mp4

17:59

28.1 20 CSSWebLayouts.pptx

28.2 20 WebLayouts.zip

28. Web Layouts Part 1.mp4

17:19

29. Web Layouts Part 2.mp4

12:39

30.1 21 CSSPreprocessors.pptx

30.2 21 CSSPreprocessors.zip

30. CSS Preprocessors - SCSS.mp4

19:26

31.1 22 CSSBestPractices.pptx

31. CSS best practices.mp4

10:53

32. CSS Flexbox, Grid and RWD Quiz.html

4. Build a One Pager Website

1.1 OnePagerWebSite.zip

1. Intro.mp4

08:00

2. Common CSS and Utility Classes.mp4

11:25

3. Building the Header Element.mp4

30:32

4. Building the Slider Banner.mp4

23:59

5. Building the Footer Element.mp4

24:31

6. Building the About Us Section.mp4

26:17

7. Building the Services and Technologies Section.mp4

13:29

8. Building the Teams Section.mp4

13:29

9. Building the Contact Sections.mp4

15:21

10. Adding Interactivity to the Navigation Elements.mp4

16:31

11. Optimizing the Website.mp4

11:30

5. Learn Bootstrap

1.1 03 Bootstrap.zip

1. Intro to Bootstrap.mp4

10:23

2. Grid system, media queries and responsive columns.mp4

18:56

3. Core Components.mp4

08:01

4. Forms & Utilities.mp4

09:34

6. JavaScript Basics

1.1 JavaScriptBasics.pdf

1. JavaScript Intro.mp4

00:45

2.1 01 JavaScriptIntro.pptx

2. JavaScript Basics.mp4

14:19

3.1 02 JavaScript Variables.pptx

3. Variables Intro.mp4

07:59

4.1 variables.html

4. Variables Practice.mp4

18:20

5. Variables Exercise.html

6. Variables Quiz.html

7. JavaScript Data Types

1.1 03 JavaScript DataTypes PrimitiveSpecial.pptx

1. Data Types Intro.mp4

08:10

2.1 primitive-data-types.html

2. Data Types Basics.mp4

04:38

3.1 strings.html

3. String Data Type.mp4

11:38

4.1 numbers.html

4. Number Data Type.mp4

04:33

5.1 booleans.html

5. Boolean Data Type.mp4

03:40

6.1 special-data-types.html

6. Special Data Types.mp4

04:07

7.1 04 JavaScript DataTypes Conversion.pptx

7. Data Type Conversion Intro.mp4

07:36

8.1 strings-to-numbers.html

8. Converting Strings to Numbers.mp4

04:10

9.1 numbers-to-strings.html

9. Converting Numbers to Strings.mp4

05:30

10. Data Types Exercise.html

11. Data Types Quiz.html

8. JavaScript Operators

1.1 05 JavaScript Operators.pptx

1. JavaScript Operators Intro.mp4

06:09

2.1 arithmetic.html

2. Arithmetic Operators.mp4

09:16

3.1 assignment.html

3. Assignment Operators.mp4

04:49

4.1 comparison.html

4. Comparison Operators.mp4

03:58

5.1 logical.html

5. Logical Operators.mp4

02:35

6. Operators Exercise.html

7. Operators Quiz.html

9. JavaScript Conditional Statements

1.1 06 JavaScript ConditionalStatements.pptx

1. JavaScript Conditional Statements.mp4

07:11

2.1 if-statement.html

2. If Statement.mp4

10:04

3.1 switch-statement.html

3. Switch Statement.mp4

11:28

4.1 ternary-operator.html

4. Ternary Operator.mp4

05:12

5. Conditional Statements Exercise.html

6. Conditional Statements Quiz.html

10. JavaScript Functions

1.1 07 JavaScript Functions.pptx

1. JavaScript Functions Intro.mp4

06:07

2.1 functions.html

2. Functions.mp4

11:21

3.1 arrow-functions.html

3. Arrow Functions.mp4

05:30

4. Functions Exercise.html

5. Functions Quiz.html

11. JavaScript Events

1.1 08 JavaScript Events.pptx

1. JavaScript Events Intro.mp4

05:14

2.1 events.html

2. Working with Events.mp4

10:02

3.1 custom-events.html

3. Custom Events.mp4

05:02

4. Events Quiz.html

12. JavaScript Objects

1.1 09 JavaScript Objects.pptx

1. JavaScript Objects Intro.mp4

04:17

2.1 objects.html

2. Working with Objects.mp4

09:25

3.1 object-contructors.html

3. Object Constructors.mp4

04:45

4. Objects Exercise.html

5. Objects Quiz.html

13. JavaScript Arrays

1.1 10 JavaScript DataTypes Complex Arrays.pptx

1. JavaScript Arrays Intro.mp4

08:55

2.1 arrays.html

2. Working with Arrays.mp4

05:56

3.1 array-functions.html

3. Array Functions.mp4

10:59

4. Arrays Exercise.html

5. Arrays Quiz.html

14. JavaScript Loops

1.1 11 JavaScript Loops.pptx

1. JavaScript Loops Intro.mp4

05:49

2.1 loops.html

2. Working with Loops.mp4

13:16

3.1 break-continue.html

3. Break and Continue Statements.mp4

04:27

4. Loops Exercise.html

5. Loops Quiz.html

15. JavaScript Dates

1.1 12 JavaScript Dates.pptx

1. Dates Intro.mp4

04:00

2.1 create-get-set.html

2. Creating, getting and setting Dates.mp4

12:58

3.1 formatting-dates.html

3. Formatting Dates.mp4

10:58

4.1 comparing-dates.html

4. Comparing Dates.mp4

09:55

5.1 date-arithmetic.html

5. Dates Arithmetic.mp4

02:18

6. Dates Exercise.html

7. Dates Quiz.html

16. JavaScript Math Object

1.1 15 JavaScript Math Object.pptx

1. Math Object Intro.mp4

03:00

2.1 math-properties.html

2. Math Object Properties.mp4

03:04

3.1 math-methods.html

3. Math Object Methods.mp4

05:08

4. Math Object Exercise.html

5. Math Object Quiz.html

17. JavaScript This Keyword

1.1 12 JavaScript ThisKeyword.pptx

1. This Keyword Intro.mp4

03:56

2.1 this-keyword.html

2. This Keyword Practice.mp4

05:33

3. This Keyword Quiz.html

18. JavaScript Error Handling

1.1 13 JavaScript ErrorHandling TryCatchFinally.pptx

1. JavaScript Error Handling Intro.mp4

02:12

2.1 try-catch.html

2. Try, catch finally statement.mp4

04:50

3. Error Handling Quiz.html

19. JavaScript Fetch API

1.1 14 JavaScript FetchAPI.pptx

1. JavaScript Fetch API Intro.mp4

02:33

2.1 15 JS FetchAPI.zip

2. Get Requests.mp4

15:33

3.1 15 JS FetchAPI.zip

3. Post Requests.mp4

05:04

4. Fetch API Quiz.html

20. JavaScript Fundamentals Exercises

1. JavaScript Fundamentals Exercises Intro.mp4

00:43

2.1 01 JS Exercise Arrays Loops.pptx

2. Arrays and Loops Exercise.mp4

11:47

3.1 03 JS Exercise Events FetchAPI.pptx

3. Events and Fetch API Exercise.mp4

06:44

4.1 02 JS Exercise Objects.pptx

4. Objects Exercise.mp4

07:47

5.1 04 JS Exercise SimpleCalculator.pptx

5. Calculator Exercise.mp4

07:26

6. Best Practices for Writing JavaScript.mp4

05:29

21. Working with JavaScript in Internet Browsers

1.1 01 02 WorkingWithJSinBrowsers.pptx

1. JavaScript in Internet Browsers.mp4

09:11

2. Selecting Elements.mp4

06:47

3. Working with HTML.mp4

04:27

4. Working with CSS.mp4

04:20

5. Built-in Events.mp4

03:57

6. Building a UI Calculator.mp4

07:49

7. JavaScript in Browsers Quiz.html

22. Learn JQuery

1.1 JavaScriptBasics.pdf

1. JQuery Intro.mp4

00:38

2.1 01 JQuery.pptx

2. JQuery Basics.mp4

03:43

3.1 index.html

3. JQuery Implementation.mp4

06:31

4.1 02 JQuery Selectors.pptx

4. JQuery Selectors.mp4

05:17

5.1 index.html

5. JQuery Selectors Implementation.mp4

12:21

6.1 03 JQuery HTML.pptx

6. JQuery HTML.mp4

04:26

7.1 dom-manipulation.html

7. JQuery HTML Implementation.mp4

11:13

8.1 dom-navigation.html

8. JQuery DOM Navigation.mp4

14:49

9.1 04 JQuery CSS.pptx

9. JQuery CSS Intro.mp4

03:21

10.1 jquery-css.html

10. JQuery CSS Implementation.mp4

06:56

11.1 jquery-dimensions-positions.html

11. JQuery CSS Positioning.mp4

04:10

12.1 05 JQuery Events.pptx

12. JQuery Events.mp4

02:21

13.1 index.html

13. JQuery Events Implementation.mp4

05:53

14.1 06 JQuery Effects.pptx

14. JQuery Effects and Animations.mp4

05:43

15.1 jquery-effects.html

15. JQuery Effects and Animations Implementation.mp4

05:06

16. JQuery AJAX.mp4

06:00

17.1 07 JQuery AJAX.pptx

17. JQuery AJAX Implementation.mp4

06:27

18.1 07 JQuery AJAX.zip

18. JQuery AJAX Methods.mp4

06:28

19.1 07 JQuery AJAX.zip

19. JQuery AJAX Forms.mp4

06:16

20.1 09 JQuery ClientSideValidation.zip

20. JQuery Validation.mp4

13:52

21.1 01 JQuery Dynamic Person Entry System with jQuery.pptx

21. Person Records Exercise Intro.mp4

02:14

22.1 10 JQuery PersonalRecordsProject.zip

22. Person Records Exercise Solution.mp4

13:26

23.1 01 JQuery BestPractices.pptx

23. Best Practices for Writing JQuery.mp4

02:32

24. JQuery Quiz.html

23. Building Reusable Components with JS and jQuery

1.1 JQueryDropdowns.zip

1. Building a Multi-Level Dropdown HTML.mp4

06:13

2.1 JQueryDropdowns.zip

2. Building a Multi-Level Dropdown CSS.mp4

11:32

3.1 JQueryDropdowns.zip

3. Building a Multi-Level Dropdown JS.mp4

03:46

4.1 JQueryAccordion.zip

4. Building an Accordion HTML.mp4

07:31

5.1 JQueryAccordion.zip

5. Building an Accordion CSS.mp4

07:12

6.1 JQueryAccordion.zip

6. Building an Accordion JS.mp4

05:10

7.1 JQuerySlider.zip

7. Building an Image Slider HTML.mp4

06:10

8.1 JQuerySlider.zip

8. Building an Image Slider CSS.mp4

17:35

9.1 JQuerySlider.zip

9. Building an Image Slider JS.mp4

22:26

10.1 JQueryLightbox.zip

10. Building an Interactive Gallery HTML.mp4

05:49

11. Building an Interactive Gallery CSS.mp4

16:24

12. Building an Interactive Gallery JS.mp4

05:21

13.1 JQueryDynamicTables.zip

13. Building Interactive Tables HTML.mp4

07:18

14.1 JQueryDynamicTables.zip

14. Building Interactive Tables CSS.mp4

11:14

15.1 JQueryDynamicTables.zip

15. Building Interactive Tables JS.mp4

19:09

24. Summary

1. Final Words.mp4

01:26

Description

Learn to build engaging websites, components and interfaces for real world applications.

What You'll Learn?

Become an HTML/CSS/JS developer; no prior experience needed.
Learn modern, semantic, and accessible HTML5.
Master JavaScript Fundamentals: No prior experience required; start from basics.
Master CSS essentials: box model, positioning, and selectors.
Advanced CSS: Flexbox and Grid for complex layouts.
Use Sass/SCSS for elegant CSS coding.
Web design framework for creating visually appealing websites.
Full process: Plan, design, build, test, and refine websites.
Create responsive designs for mobile devices.
Use standard web components and layouts professionally.
Learn documentation, troubleshooting, and tools.
Build reusable components which serve a purpose in most modern websites
Construct 3 unique websites with reusable elements.

Who is this for?

Individuals starting from scratch who aim to master building a professional, attractive, and adaptable website.

Learners with a basic understanding of HTML, CSS and JavaScript, seeking to effectively combine their skills to craft an outstanding website.

Developers looking to broaden their expertise by delving into HTML5 and CSS3, JavaScript and JQuery.

Enthusiast looking to embark on a journey into frontend web development

What You Need to Know?

Basic knowledge of computer usage

Internet connection

More details

Description
Burning to get into frontend web development? Looking to switch careers or turbocharge your current skills? Overwhelmed by where to start?
You've come to the right place!
Welcome to "Frontend Web Development: From Zero to Hero"â€”your comprehensive starting point on the path to mastering web development. My name is Marko, and I will be your instructor through this extensive journey of HTML, CSS, JavaScript, and jQuery.
This all-encompassing Udemy course is designed to transform you from a beginner into a proficient frontend developer, capable of crafting responsive and dynamic websites.
Imagine building your first complex machine or piece of furniture, piece by piece. This course is just like that, but for creating vibrant and functional websites. Here, HTML, CSS, JavaScript, and jQuery are your tools; the web is your workshop.
Whether you're starting with little to no coding experience or looking to solidify and expand your knowledge of web programming, this course is tailored to equip you with the essential skills needed to become a front-end web development expert.
I understand the hurdles and frustrations that come with learning programmingâ€”the confusion with syntax, the debugging of elusive errors, and the satisfaction of making a piece of code work. Thatâ€™s why Iâ€™ve structured this course to provide clear, step-by-step instructions and hands-on exercises that will guide you through building your own web projects from scratch.
Hereâ€™s what this course entails:
Foundational HTML and CSS: Start by learning how to structure web pages with HTML and style them with CSS. You'll dive into modern, semantic, and accessible web design techniques that are fundamental to web development.
Advanced CSS Techniques: Progress to advanced CSS concepts including Flexbox and Grid for sophisticated layouts, and explore CSS animations for interactive visuals.
Introduction to JavaScript and jQuery: Introduce the scripting language that powers the webâ€”JavaScriptâ€”and its powerful ally jQuery, which simplifies script-writing and adds functionality.
Dynamic HTML Manipulation: Use JavaScript and jQuery to dynamically alter HTML, responding in real time to user interactions.
Styling and Animations with CSS and jQuery: Implement responsive web elements and animate them with CSS and jQuery to make your web pages stand out.
Event Handling and Real-World Projects: Master JavaScript events and jQuery methods to create forms, galleries, sliders, and more that interact seamlessly with users.
AJAX for Asynchronous Data Handling: Learn to fetch, display, and manage data using AJAX with jQuery, enhancing site performance and user experience without page reloads.
Why you should enroll in this course:
Comprehensive Learning: From basic HTML to advanced jQuery and AJAX, youâ€™ll gain a thorough understanding of what it takes to build a front-end website from the ground up.
Project-Based: With real-world projects like building a multi-level dropdown, an interactive gallery, and a UI calculator, youâ€™ll apply what you learn immediately.
Expert Instruction: Benefit from my years of experience as a developer and instructor to gain insights and tips that are not found in books or free tutorials.
Career Opportunities: Front-end developers are in high demand, and mastering these skills will significantly enhance your employability and career prospects.
Course Perks:
Flexible Learning: Fit the course around your schedule with self-paced learning and lifetime access to course materials.
Supportive Community: Join a community of fellow learners to share knowledge, challenges, and successes.
Certification: Earn a certificate of completion to showcase your skills on your resume or LinkedIn.
Common FAQs:
"What if I donâ€™t have enough time?" The course is designed to work with any schedule, allowing you to learn at your own pace and access content anytime.
"What if I find it too hard?" No worries! I break down complex concepts into easy-to-understand segments. Plus, Iâ€™m here to help along the way with clear explanations and answers to your questions.
"Will this help my career?" Absolutely! Whether youâ€™re aiming to start a career in web development, freelancing, or enhancing your current job skills, this course provides the tools and skills needed.
"Do I get a certificate?" Yes! Completing the course grants you a certificate of completionâ€”a great addition to your portfolio or LinkedIn profile to impress potential employers.
Ready to start your journey from zero to hero in frontend web development? Join us today and begin crafting your own responsive, interactive websites!
Who this course is for:
Individuals starting from scratch who aim to master building a professional, attractive, and adaptable website.
Learners with a basic understanding of HTML, CSS and JavaScript, seeking to effectively combine their skills to craft an outstanding website.
Developers looking to broaden their expertise by delving into HTML5 and CSS3, JavaScript and JQuery.
Enthusiast looking to embark on a journey into frontend web development

User Reviews

Rating

average 0

Total votes0

Focused display

Front End Web Development

Marko Holzmann-Miletić

Instructor's Courses

Hello folks, I'm Marko. I am an experienced full-stack web developer, software engineer, lecturer and business owner with a demonstrated history of working in the software development industry as well as working as a lecturer and mentor. I have a Master's Degree in Software Engineering, and on top of that I have finished specialized courses for Web Design, Frontend Development and Backend Development with C# & .NET which I ended up teaching myself.I have been building web applications for more than a decade now for clients from across the globe and have multiple awards for best teacher under my belt from the schools I worked at.I have a passion for sharing knowledge and helping people achieve their goals and I hope to help you achieve yours.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.