Frontend Development with Svelte Track - Online Learning with Certificate

Frontend Development with Svelte

Beginner

0.0

0 reviews

0 Learners

Explore how modern frontend development works using HTML, CSS, JavaScript, Svelte, and Tailwind CSS. Build structured webpages, create interactive UI …

188

Chapters

Learning hours

218

Assignments

AI Assistant

Shareable Certificate

Outcomes

Track content

Related courses and projects

Testimonials

Features

Pricing

Outcomes

Track content

Related courses and projects

Testimonials

Features

Pricing

What you will learn

Structure webpages using semantic HTML

Create reusable Svelte components and reactive UI elements

Fetch and display external API data

Style interfaces with CSS and Tailwind CSS

Handle forms, events, and dynamic rendering

Build responsive layouts for different screen sizes

Build interactive frontend logic with JavaScript

Work with shared state using Svelte stores

Organize modern frontend projects and reusable UI patterns.

Learning track content

Welcome to Modern Web Development

Understanding How Websites and the Internet Work

Frontend vs Backend Development

Why Developers Use JavaScript Frameworks Like Svelte

Setting Up Your Development Environment

Welcome to HTML and Web Development

Understanding HTML Tags

Working with HTML Attributes

Understanding Paired and Single Tags in HTML

Text Markup

Organising Lists

Challenge: Create Your First Web Page Paragraph

Challenge: Build a Personal Introduction Web Page

Challenge: Design a Movie Showcase Web Page

Using Links

Adding Buttons

Challenge: Create Links to Popular Websites

Validating Your HTML Code for Best Practices

Understanding HTML Document Structure

The Role of the Document Head

Challenge: Structure an HTML Document Correctly

Adding Images in HTML

Challenge: Work with Images

Working with Clickable Images, Captions, and Optimization

Creating and Structuring Tables in HTML

Challenge: Design a Functional HTML Table

Introduction to HTML Forms

Fundamentals of Form Creation in HTML

Using Labels for Better Form Accessibility

Enhancing Forms with Input Attributes

Exploring Different Input Types in HTML

Challenge: Create Form with Inputs and Labels

Working with the Textarea Element for Multi-line Input

Using the Select Element for Dropdown Menus

Using the Datalist Element for Predefined Input Suggestions

Grouping Form Elements for Better Structure

What CSS Is and Why It Matters

Connecting CSS to HTML

Selecting Elements in a Simple Way

Styling Text and Colors

Adding Hover Effects

Challenge: Style Your First Web Page

Text Formatting for Better Readability

Working with Fonts and Font Properties

Adding Custom Fonts

Challenge: Improve a Blog Article Design

Understanding the Box Model in a Practical Way

Margin and Padding Made Simple

Box Sizing and Width Control

Display Property Block, Inline, and Inline Block

Challenge: Fix a Broken Layout

Why Flexbox Exists

Controlling Direction

Justifying Content Horizontally

Aligning Items Vertically

Working with Flex Items

Challenge: Create a Shop Card Layout Using Flexbox

Challenge: Build a Vertical Blog Card with Flexbox

Understanding Grid Containers and Items

Defining Rows and Columns

Grid Gaps and Alignment

Building a Real-World Layout

Using Background Colors

Applying Background Images

Working with Images in CSS

Creating Effects with Decorative Pseudo-Elements

Adding Shadows for Depth

Challenge: Create a Modern Card Component

First Javascript Console Application

Challenge: Showing some Output

Challenge: Outputing Multiple Lines

Dealing with Numbers

Challenge: Working with Numbers

Challenge: Calculating the Speed of a Car

Challenge: Calculating Area of a Trapezium

Outputting Multiple Values

Challenge: Consoling Meaningful Output

How to Use Comments in Javascript?

Challenge: Adding a Comment

Multi-Line Comments

Challenge: Commenting out Code

What Is JavaScript anyway?

Storing Data

Challenge: Declaring a Variable

Challenge: Accessing Data From a Variable

Challenge: Fixing Variable Names

Challenge: Reassigning a Variable

Constants

Challenge: Declaring & Using Constants

Performing Arithmetic On Variables

Challenge: Making a Salary Calculator

Challenge: Adjusting Salary with a Bonus

Exploring Primitive Data Types

Challenge: Declaring a Boolean Value

How different Data Types Interact

Challenge: Concatenating Strings

Challenge: Creating User Profile & Activity Details

Comparison Operators

Challenge: Checking Age Eligibility

The `if` Statement

Challenge: Weather-Based Outfit Recommender

Challenge: Even or Odd

Nested Conditional Statements

The `else` Clause

Challenge: Temperature Advisor

The `else if` Clause

Challenge: Grade Categorizer

` AND` Logical Operator

Challenge: Checking if a Number is Even and Positive

OR Logical Operator

Challenge: Accessing Control System

What Are Functions?

Challenge: Simple Function

Challenge: Calculating the Speed of a Car

Scopes

Passing Data into Functions

Challenge: Fixing the Speed Function

Challenge: Improving the Grade Categorizer

Challenge: Defining a Compound Function

Returning Data from Functions

Default Values

Challenge: Email Auto-Responder with Default Parameters

What Are Arrays?

Challenge: Defining An Array

Challenge: Indexing

Adding Values to an Array

Challenge: Pushing Elements to an Array

Removing Elements from an Array

Challenge: Practicing `pop` & `shift`

The `length` Property

Challenge: Counting Elements

The `includes` Method

Challenge: Searching for Animals in the Zoo

The `for` Loop

Challenge: Printing a Sequence

The `while` Loop

Challenge: Printing Fibonacci Sequence

The `do-while` Loop

Challenge: Random Multiple of 7

Using Loops with Arrays

Challenge: Finding the Average Price of Items

Summary

What Svelte Is and Why Developers Use It

How Svelte Differs from React and Vue

Setting Up a Svelte Project with Vite

Understanding the Svelte Project Structure

Understanding .svelte Files

Your First Svelte Component

Displaying Data with Curly Braces

Passing Data with Props

Default Prop Values

Scoped Component Styles

Creating Reusable Components

Reactive Variables

Reactive Statements

Two-Way Binding with bind:

Conditional Rendering with {#if}

Rendering Lists with {#each}

Store Subscriptions with $

Sharing State Across Components

Fetching Data from APIs

Loading and Error States

Search and Filtering

Working with Async Data

Svelte Transitions

Fade Fly and Slide Animations

Parent and Child Components

Slots and Component Composition

Working with Forms and Inputs

Form Validation

Submitting Form Data

Organizing a Svelte Application

Building Responsive Layouts

Building a Complete Frontend Application

What is Tailwind CSS?

Installing Tailwind in a Svelte Project

Styling Text Colors and Spacing

Building Layouts with Flexbox and Grid

Responsive Design with Tailwind

Hover Focus and Active States

Conditional Classes in Svelte

Building Reusable Buttons and Cards

Styling Forms and Inputs

Final Project Build a Settings Page UI

Boost your Tech Skills!

with up to 55% off

Features:

*Tracks not included in Pro plan

500+ Top-Rated coursesCutting-edge AI Copilot

Personalized study tracks40+ hands-on real-world projects

Without cancellation, before the selected discounted intro plan ends, I accept that Codefinity will automatically charge $104 every 3 months until I cancel. Learn more about cancellation and refund policy in Subscription Terms.

Recommended Courses and Projects

Ultimate HTML

Learn the essentials of HTML, the backbone of every website. Structure content with tags and attributes, build clear document layouts, and add images, links, and tables. Create accessible, user-friendly forms for capturing input and interaction. Practice crafting well-structured, functional web pages while following best practices. Start your web development journey by mastering HTML.

Introduction to JavaScript

Dive into the world of the most popular language for front-end development – JavaScript. JavaScript is a language built into almost every browser and can be used for a wide variety of tasks. Learn the basic functionality and prepare yourself for the challenges and more advanced programming techniques.

CSS Fundamentals

Master the essentials of CSS, the styling language that transforms the look and feel of web pages. Explore core concepts such as text styles, colors, spacing, the box model, Flexbox, and decorative effects. Build the skills to create visually engaging and well-structured web pages.

HTML Essentials

Master the essentials of HTML to build well-structured and accessible web content. Learn how to structure documents using tags, elements, and attributes. Work confidently with text, lists, images, audio, and video to enrich web pages. Create tables for organized data and forms for user input and interaction. Discover semantic HTML to enhance accessibility and build complete, functional website structures from the ground up.

JavaScript Data Structures

Learn to work confidently with data in JavaScript by mastering objects and arrays. Understand how to create, access, and manage object properties and methods effectively. Dive into advanced object manipulation techniques, including iteration, cloning, and destructuring for cleaner code. Build a strong foundation in working with arrays and learn to manage, iterate, and modify array elements efficiently. Master advanced array methods like map, filter, find, and sort to transform and handle data effectively in your applications.

CSS Layout, Effects, and Sass

Level up your styling skills by mastering advanced CSS techniques for modern web design. Position and manage elements with precision using advanced positioning strategies. Create smooth transitions and engaging animations to enhance user experience. Transform and manipulate elements for dynamic visual effects. Build responsive designs that adapt across devices and learn to streamline your workflow with CSS preprocessors like Sass.

Introduction to Digital Marketing

This comprehensive marketing course offers an in-depth journey through the fundamentals and advanced strategies of digital marketing. Explore key areas like SEO, PPC, social media, and AI while learning how to craft strategies that deliver results. Each section includes practical examples and tools to solidify your understanding. The course concludes with a hands-on project, empowering you to create and present your own comprehensive marketing plan.

JavaScript Ninja

Welcome to the JavaScript Ninja Course! This engaging and interactive course is designed to introduce you to the fundamentals of JavaScript programming through a fun and educational game. You'll guide a ninja through various challenges, using JavaScript to control movements and interact with objects like sushi. Starting with the basics, you'll learn how to navigate the map, pick up and place sushi, and gradually progress to more complex programming concepts such as functions, loops, and conditional statements. Each chapter offers hands-on practice to reinforce your learning, culminating in exciting challenges that test your skills. Whether you're a complete beginner or looking to sharpen your coding abilities, this course provides a comprehensive and enjoyable learning experience. Join us and become a coding ninja!

JavaScript Logic and Interaction

Master essential JavaScript concepts, including classes, DOM manipulation, event handling, and asynchronous programming. Learn to create dynamic and interactive web applications by managing user interactions, fetching and displaying data, and handling asynchronous operations efficiently. Through a blend of theory, hands-on challenges, and real-world examples, this course equips you with the practical skills needed for modern web development.

Introduction to Blockchain

Explore the revolutionary world of blockchain technology and its first and most prominent application, Bitcoin. Delve into the intricacies of how blockchain functions, the technical underpinnings of Bitcoin, and the broader implications and future trends in this dynamic field. Gain a well-rounded understanding of the technology that is reshaping industries and challenging traditional notions of currency and data security.

Networking Fundamentals

Networking Fundamentals is a comprehensive course designed for beginners and intermediate learners aiming to build practical skills in networking. Covering everything from foundational concepts to advanced applications, the course takes you through key topics including network types, IP addressing, protocols, and network security. By the end of this course, you'll be equipped with essential skills to troubleshoot, secure, and manage networks effectively, setting a solid foundation for further specialization in networking.

Introduction to QA

In this course, the user will get an introduction on how to perform manual testing on primarily web applications. The skills aquired in this course can be used in automation testing as well.

Discover more Learning Tracks

track

Essential Office Skills

Beginner

Business AI Toolkit

Beginner

DevOps Specialist

Beginner

Supervised Learning Foundations

Beginner

Python from Zero to Hero

Beginner

C Programming Fundamentals

Beginner

Project Management Fundamentals

Beginner

Data Analyst with Python

Beginner

Java Foundations

Beginner

Data Visualization with Python

Intermediate

Frontend Development with Angular

Beginner

Machine Learning Engineer

Intermediate

Why People Choose Codefinity

Web Developer

Kwizera Mugisha

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Senior Business Analyst

Sherry Barnes-Fox

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Accounts Payable Specialist

Bill Wagner

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

IT Support Specialist

Daniel Chinea

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Technology Project Manager

Steve Bruening

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Project Manager

Stephanie Chan

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.

Step-by-Step to Stellar Results

Interactive coding environment

Jump into our interactive environment: write and run your code with real‑time feedback and success metrics—learn by doing at every step.

AI‑powered support

Leverage the built‑in AI assistant to explain errors, suggest fixes, or answer any question about your code—so you stay productive and never get stuck.

Check your progress

Wrap up each module with a quick quiz that delivers instant feedback, tracks your progress, and ensures you’ve mastered key concepts.

Promote your expertise

Earn your industry‑recognized certificate upon completion and share it on LinkedIn with one click—let your network see what you can do.

Trusted by Employees of Leading Companies
and Students from Top Universities

Full catalog access

One subscription opens up this course and our entire catalog of projects and skills.

Features:

500+ Top-Rated coursesCutting-edge AI Copilot

Personalized study tracks40+ hands-on real-world projects

Try Codefinity with confidence – 30-day money-back guarantee included

To welcome you to Codefinity, we're offering up to 64% off on our courses. Plus, we have a 30-day money-back guarantee, so you can try us out risk-free.We truly look forward to welcoming you to our platform and are committed to making your learning experience easy, interactive, and fun.

Ready to get started?

Pro

Best intro offer

Ultimate

A complete experience
to kickstart your career

500+ Top-Rated courses

Completion certificates

Early access to new courses

40+ hands-on Real-world projects

Personalized study tracks

Unlimited workspaces

Instantly access 500+ courses

Unlimited Learning, Instant AccessGet full access to all courses and tracks, including video content, quizzes, and in-depth materials—start learning anytime.

Industry-Recognized CertificatesEarn certificates that validate your expertise and boost your career in tech, AI, data, marketing, and beyond.

AI-Assisted LearningGet personalized hints, real-time feedback, and AI-powered explanations to accelerate your progress.

Constantly Expanding: New Courses & Career TracksStay ahead with constantly updated courses, career roadmaps, challenges, and hands-on practice tests.

Build Skills That MatterMaster in-demand skills with courses in AI, data science, programming, marketing, automation, web development, and more.

Interactive & Seamless LearningEngage with hands-on projects, real-world exercises, and an intuitive learning experience — no extra tools needed.

What you will learn

Essential Office Skills

Business AI Toolkit

DevOps Specialist

Supervised Learning Foundations

Python from Zero to Hero

C Programming Fundamentals

Project Management Fundamentals

Data Analyst with Python

Java Foundations

Data Visualization with Python

Frontend Development with Angular

Machine Learning Engineer

Why People Choose Codefinity

Trusted by Employees of Leading Companies and Students from Top Universities

Full catalog access

Try Codefinity with confidence – 30-day money-back guarantee included

Instantly access 500+ courses

Trusted by Employees of Leading Companies
and Students from Top Universities