Duration
5 months
Price
75,00 € 67 € / Monthly
10% off
Projects
5 Projects
During this training, 5 real projects will be developed.
Location
Vushtrri
Rruga Deshmoret e Kombit
https://maps.app.goo.gl/CAUPt6saLpaedkF86
About the course
Welcome to the Web Development Fundamentals course — your first step into the world of building websites and dynamic web applications from scratch! Whether you dream of becoming a front-end developer, launching your own projects, this course will give you the solid foundation you need.
Lessons
Overview of the course, tools (VS Code, browser), homework plan
Basic tags: <!DOCTYPE>, <html>, <head>, <body>
Elements: headings, paragraphs, basic structure
Formatting: <strong>, <em>, <br>, <hr>
Links: <a href>, opening in new tab
Lists: <ul>, <ol>, <li>
Images: <img>, alt, relative vs absolute paths
Block vs Inline elements
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Use all previous elements to build a multi-section HTML page
- HTML tables: <table>, <thead>, <tbody>, <tr>, <td>, <th>
- Intro to CSS: syntax (selectors, properties, values)
- Ways to apply CSS: inline, <style>, external .css
- CSS: colors, backgrounds, font-family, font-size, text alignment
- Activity: Style a table with internal CSS (borders, colors)
- Forms: <form>, <label>, <input>, <textarea>, <select>, fieldset
- Input types: text, email, password, radio, checkbox, submit
- Use tables, forms, and semantic layout
- Style using internal or external CSS
- Includes navigation links
- Margin, padding, border, width/height
- box-sizing: border-box
- Activity: Build a card layout with spacing
- display: block, inline, inline-block, none
- visibility: hidden, z-index, overflow
- Activity: Style layout using different display types
- position: static, relative, absolute, fixed, sticky
- top, left, right, bottom, z-index
- Activity: Floating image card or fixed navbar
background-color, background-image, repeat, size
Linear gradients
Activity: Create a header section with gradient + overlay text
font-style, letter-spacing, line-heightNamed colors, hex, RGB
Activity: Styled poem or quote layout
display: flex, flex-direction, justify-content, align-items
Activity: Horizontal nav bar and vertical sidebar
flex-wrap, gap, align-self, flex-grow, shrink, basisActivity: 3-column layout with wrapping and spacing
- Responsive card grid
- Sticky navbar
- Challenge: Product showcase or gallery layout
display: grid, grid-template-columns/rows, gap
justify-items, align-items
Activity: Photo gallery with captions
Nesting grid + combining with Flexbox
Activity: Create a blog layout with sidebar
- Complete homepage with grid/flex layout
- Navbar, hero, card grid, contact form
- What is SCSS? How it improves CSS
- SCSS syntax vs CSS
- Variables – centralize colors, font-sizes, spacing
- Nesting – clean, structured styles
- Partials & @import
- Build a component with BEM + SCSS nesting
- Mixins + @include
- Functions + @return
- Loops: @for, @each
- Conditional @if, @else
- Responsive SCSS with media mixins
box-shadow, text-shadow, :hover, :active, :focus
transition-property, duration, ease
Units: px, %, em, rem, vh, vw
Media queries + mobile-first design
Animations
Activity: Interactive cards, Hero section responsive layout
- CDN setup vs full install (we’ll use CDN for now)
- Utility classes: margin/padding, colors, borders, backgrounds, typography
- Flex & Grid in Tailwind
- Buttons, Cards, Forms, Responsive utilities
- Customizing Tailwind (colors, fonts)
- Small layouts using Tailwind
- Build a component library: Button, Card, Nav, Input
- Prepare for using Tailwind in JS DOM projects
- User Input, Type Conversion, and Light DOM Intro
- Comparison, Logical Operators, if / else / else if
- switch, Ternary, and storages
- Loops & Repetition, while / do…while
- Functions & Scope
- Arrays & Objects
- Objects & Class
- Intro to the DOM & DOM Events
- Forms, Inputs, & Fetch
- Fetching Data, async/await
- DOM Projects
- Final Project
Instructor
With his programming skills, Altini is focused on providing a high standard for users through efficient development and optimization of websites. During his professional journey, he has collaborated on various projects, being involved in every stage of development and bringing practical and efficient solutions. He has a direct approach and is committed to helping young people develop real programming skills and sharing knowledge with students about market demands, as he himself is part of it.
Explore More
Presenting Unity Tech Hub, the tech school of the future.
We teach you the right skills to be prepared for tomorrow.
Programming for 7 – 10 years
10% off
Programming for 10 – 12 years
10% off
10% off
10% off
Frontend Basics
10% off
10% off
Unlock Your Learning
Potential Today
Join thousands of learners around the world who are advancing their careers with our expertly crafted courses.
Our mission is to provide guidance and resources for beginners—those who don’t yet have experience in development and design—to successfully launch their careers.
Contact
- [email protected]
- +383 48 235 166
- Rruga Deshmorët e Kombit, Vushtrri
