Fundamentals of Frontend Website Development with HTML, CSS, and JavaScript

Course Overview

This beginner-friendly course introduces the fundamental technologies of frontend web development: HTML, CSS, and JavaScript. Learners will explore how to structure web pages, style them for an appealing look, and add interactivity to enhance user experience. By the end of the course, participants will have created their own responsive, dynamic website and gained a strong foundation for further web development learning.

Skills you'll aquired

Structuring web pages using HTML
Styling web pages with CSS (including responsive design)
Adding interactivity using JavaScript
Debugging and testing frontend code
Using developer tools for efficient coding

Course Features:

40 Hours

Live Class and Video Suggestions

18 Articles

12 Downloadable Resources

43 Practicals

54 Hands-on Projects

Certificate upon Completion

Live Interactions

Course Compact

Understanding the Basics of the Web:
- How websites work (HTTP, servers, and browsers)
- The role of frontend and backend development
Setting Up the Development Environment:
- Installing a text editor (e.g., VS Code)
- Understanding file extensions (.html, .css, .js)
- Basics of debugging tools in browsers

Building Blocks of Web Pages:
- Tags, attributes, and elements
- Structuring content using headings, paragraphs, lists, and links
Embedding Media in Web Pages:
- Adding images, audio, and videos
- Using <iframe> for embedding external content
HTML Forms for User Input:
- Creating forms with text fields, checkboxes, and buttons
- Basics of form validation and submission

Introduction to Styling with CSS:
- Understanding selectors, properties, and values
- Inline, internal, and external CSS
Creating Layouts and Responsive Design:
- Flexbox and CSS Grid for modern layouts
- Media queries for adapting to different screen sizes
Adding Styles to HTML Forms and Buttons:
- Customizing inputs, buttons, and form layouts
- Hover and focus effects

JavaScript Basics:
- Variables, data types, and operators
- Writing and running scripts in the browser
Adding Interactivity to Web Pages:
- Event handling (clicks, hovers, etc.)
- DOM manipulation for dynamic content
Introduction to Functions and Loops:
- Writing reusable code with functions
- Using loops to handle repetitive tasks

Debugging HTML, CSS, and JavaScript Code:
- Using browser developer tools
- Identifying and fixing common errors
Writing Clean and Maintainable Code:
- Best practices for organizing files and code
- Introduction to comments and documentation

Planning and Designing the Website:
- Sketching layouts and defining the structure
- Choosing fonts, colors, and images
Creating and Styling Pages:
- Combining HTML, CSS, and JavaScript
- Adding navigation menus and interactive elements
Testing and Deploying the Website:
- Testing on different browsers and devices
- Publishing the website online using GitHub Pages or Netlify

Project Overview:
- Build a fully functional, responsive website for a chosen topic
- Incorporate all skills learned in the course
Submission and Feedback:
- Presenting the project for peer and instructor review
- Improving the website based on feedback

Requirements

Basic computer literacy
A laptop or desktop computer with a text editor and browser installed
Internet connection for accessing course materials and online resources

Description

Learn the core skills required to build and design engaging websites from scratch. This course delves into the essential frontend technologies of HTML, CSS, and JavaScript. Starting with the basics, learners will progress through structuring content, creating layouts, and finally, adding dynamic elements. The course includes practical exercises and projects to ensure participants can apply their knowledge effectively.

Participants will gain a solid understanding of frontend development principles and best practices, preparing them for advanced topics or professional work in web development.

Meet the Instructor

Mayomi Odewaye

Software Engineer / Data Analyst / Project Manager

Mayomi Odewaye is a dynamic and accomplished professional who has made significant contributions to the fields of software engineering, data analysis, and project management. With a strong academic background and practical experience in Python programming, Machine Learning, Web Development, and PHP, Mayomi is passionate about teaching and mentoring aspiring developers. As the founder of KrossCheck, Mayomi is dedicated to providing innovative solutions that enhance the educational experience and streamline academic processes.