Introduction To Website Development Technologies from Udemy

Why Learn HTML and CSS?

HTML is the foundation of all web pages. Without HTML, you couldn’t organize text or add images or videos to your web pages. HTML is the beginning of everything you need to know to create engaging web pages. CSS Works in tandem with HTML to ensure that your content looks good. Using these two, you are in complete control of what your web pages look like.

Why Learn JavaScript?

HTML and CSS are static. JavaScript allows you to manipulate them while your webpage has already loaded. Imagine having an interactive document reading when their content can morph based on your actions...while you're reading it. That is what JavaScript brings to the table.

Take-Away Skills

Learn how to build a website using HTML, CSS, and Visual Studio Code.

By the end of this course, you will have learned:

How to create HTML Documents
How to link HTML Documents and create a website
How to insert elements in an HTML document (images, lists, tables, text, etc.)
How to style one or more pages with CSS (Inline, Internal and External Style sheets)
How to upload code to GitHub.
How to publish your static website to the internet using Netlify.
How to design a form to collect data.
How to write JavaScript and jQuery
How to use Bootstrap 5

Content and Overview

You don't need to know any programming language to take this course. The content of this course assumes no prior knowledge of programming or web development. It will teach you how to set up an environment to develop a website from scratch and deploy it on the internet for the world to see.

This is a short course with just over 4 hours of content but smartly broken up to highlight related activities based on each module in the application being built. We will also look at troubleshooting and debugging errors as we go along, implementing best practices, writing efficient logic, and understanding why developers do things the way they do. Your knowledge will grow, step by step, throughout the course, and you will be challenged to be the best you can be.

By the time you have finished the course, you will have moved around in Visual Studio Code and examined errors so much that it will be second nature for you when working in the Web development environment. This will put your newly learned skills into practical use and impress your boss and coworkers.

The course is complete with working files hosted on GitHub, including some files to make it easier for you to replicate the demonstrated code. You will be able to work alongside the author as you work through each lecture and will receive a verifiable certificate of completion upon finishing the course.

What's inside

Learning objectives

Understand html and css
Understand how to use javascript and jquery
Understand how to integrate bootstrap 5 into your website
Use github for source control

Use and understand visual studio code
Publish website to internet with a few clicks
How to use netlify and github
Learn javascript syntax and browser debugging

Understand html and css
Understand how to use javascript and jquery
Understand how to integrate bootstrap 5 into your website
Use github for source control
Use and understand visual studio code
Publish website to internet with a few clicks
How to use netlify and github
Learn javascript syntax and browser debugging

Syllabus

Introduction

Why learn Web Development?

Environment Setup

Web Development Tools

Install Visual Studio Code

Recommended Development Extensions

Setup Git and GitHub

Setup Website Project Workspace

Basic HTML

Explore HTML

Write your first HTML Document

Adding Text and Links

Multiple HTML Pages

Adding Images

Adding Ordered and Unordered Lists

Adding an HTML Table

Adding an HTML Form - Part 1

Adding an HTML Form - Part 2

Embedding External Content

Embedding Media Content (Video and Audio)

Comments and Styling

Add to GitHub

Section Source Code

Cascading Style Sheets

What is CSS (Cascading Style Sheets)

Inline CSS

Internal CSS

External Stylesheets

HTML Semantics

HTML Non-Semantic Layout - Part 1

HTML Non-Semantic Layout - Part 2

Consistent Web Page Layout and Design

Using Classes

JavaScript

What is JavaScript?

Explore JavaScript and the Browser Console

JavaScript Statements and Variable Declarations

JavaScript Arithmetic Operations

JavaScript Decision Statements

JavaScript Repetition Statements

JavaScript Functions

JavaScript Variables and Scope

JavaScript and HTML DOM

JavaScript in HTML Syntax

Adding JavaScript to HTML - Part 1

Adding JavaScript to HTML - Part 2

What is jQuery?

Adding jQuery to a Website

jQuery vs JavaScript

Web Development with the Bootstrap Framework

What is Bootstrap?

Explore Boostrap's Documentation

Adding Bootstrap to your Website

Adding Boostrap Navbar and Layout - Part 1

Adding Boostrap Navbar and Layout - Part 2

Bootstrap Tables

Bootstrap Forms

Bootstrap Buttons

Bootstrap Carousel

Bootstrap Cards and Grid

Bootstrap Accordion

Clean Up Website

Tracking Active Page - CSS + JavaScript

Publishing your Website

Website hosting Principles

What is Netlify?

Publish Website using Manual Deploy on Netlify

Publish Website using GitHub and Netlify (CI/CD Pipeline)

Additional Netlify Features

Conclusion

Course Recap

Recommendations

Bonus Section

Bonus Lecture

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops coding skills in HTML, CSS, Visual Studio Code, and GitHub

Teaches fundamentals in web design and development

Helpful for entry-level or beginner web developers

Appropriate for those with no prior knowledge or coding experience

Provides a solid foundation in HTML and CSS

Introduces students to core concepts, including HTML structure and CSS styling

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Introduction To Website Development Technologies with these activities:

Follow a tutorial on using Bootstrap

Show steps

Enhance your understanding of Bootstrap by following a guided tutorial that covers its features and best practices.

Browse courses on Web Development

Show steps

Find a tutorial on Bootstrap, such as the one on Bootstrap's website.
Follow the tutorial.

Solve CSS layout challenges

Show steps

Improve your CSS layout skills by solving a series of practice challenges.

Browse courses on Web Development

Show steps

Find a website with practice challenges, such as CSSBattle.
Solve a number of challenges.

Practice HTML and CSS Fundamentals

Show steps

Reinforce your understanding of HTML and CSS fundamentals by completing practice exercises and challenges.

Browse courses on HTML

Show steps

Solve HTML and CSS coding challenges
Create HTML and CSS files from scratch
Identify and correct errors in HTML and CSS code

Seven other activities

Expand to see all activities and additional details

Show all ten activities

Create an animated web banner using HTML, CSS, and JavaScript

Show steps

Hone your skills in using HTML, CSS, and JavaScript by creating an eye-catching animated web banner.

Browse courses on Web Development

Show steps

Plan and design your banner.
Code your banner using HTML, CSS, and JavaScript.
Test and debug your banner.

Follow the HTML tutorial from W3Schools

Show steps

Supplement your understanding of key HTML basics with a tutorial from a trusted source.

Show steps

Visit the W3Schools HTML tutorial
Read through the tutorial sections
Try out the code examples provided

Follow Bootstrap Documentation and Tutorials

Show steps

Expand your knowledge by leveraging official Bootstrap documentation and tutorials to enhance your understanding of its features and best practices.

Show steps

Review the Bootstrap documentation and tutorials
Apply Bootstrap to your website project
Utilize Bootstrap components and utilities

Build a Minimal Website

Show steps

Apply your skills by building a simple website that showcases your understanding of HTML and CSS.

Browse courses on Website Development

Show steps

Plan and design the website layout
Create HTML and CSS files for the website
Add content and style to the website
Test and refine the website

Build a personal website

Show steps

Solidify your understanding of HTML, CSS, and JavaScript by creating a personal website showcasing your skills.

Browse courses on Website Development

Show steps

Plan your website structure and design.
Code your website using HTML, CSS, and JavaScript.
Test and debug your website.
Deploy your website to a hosting provider.

Write a blog post on responsive design

Show steps

Deepen your understanding of responsive design by creating a blog post that explains its principles and best practices.

Browse courses on Web Development

Show steps

Research responsive design principles.
Write your blog post.
Publish your blog post on a platform like Medium or Dev.to.

Complete coding challenges on Codewars

Show steps

Test and strengthen your HTML and CSS skills through hands-on practice.

Show steps

Create an account on Codewars
Choose a coding challenge related to HTML or CSS
Attempt to solve the challenge
Review your solution and identify areas for improvement

Career center

Learners who complete Introduction To Website Development Technologies will develop knowledge and skills that may be useful to these careers:

UI Developer

These professionals are responsible for the look and feel of a website or application. They work closely with UX Designers to translate designs into prototypes and working applications. This course can teach you the fundamentals of working with HTML, CSS, JavaScript, Bootstrap, and JQuery. Mastering these tools can help you break into the field as a UI Developer.

See salaries and explore the career path for UI Developer

Front-End Developer

Front-End Developers take the user experience (UX) designs created by UX Designers and turn them into prototypes and working websites. To do this, these professionals must be comfortable working with HTML, CSS, JavaScript, Bootstrap, and JQuery. This course can help you build a foundation in these essential tools and concepts to pursue a career as a Front-End Developer.

See salaries and explore the career path for Front-End Developer

Web Developer

Professionals in this field primarily design and develop websites. These professionals must have expertise in HTML, CSS, JavaScript, JQuery, and Bootstrap to perform the job functions effectively. Enrolling in this course will teach you how to work with these tools to develop a website. This course will help you build a foundation in web development principles that will allow you to excel as a Web Developer.

See salaries and explore the career path for Web Developer

UX Designer

UX Designers are responsible for designing the user experience (UX) of a website or application. They must deeply understand HTML, CSS, and JavaScript to work effectively with Front-End Developers and UI Developers. This course may be helpful for UX roles because it teaches the fundamentals of these essential tools.

See salaries and explore the career path for UX Designer

Software Engineer

Software Engineers design, develop, test, and maintain software systems. While many Software Engineers work with programming languages and technologies not covered in this course, this course may be useful if you want to transition from web development into a broader software engineering role. The course can help you build a foundation in HTML, CSS, JavaScript, and other essential technologies.

See salaries and explore the career path for Software Engineer

Quality Assurance (QA) Analyst

QA Analysts test software applications and report bugs. This role requires a deep understanding of how applications function. While this course will not teach you how to test applications, the knowledge you gain about HTML, CSS, and JavaScript can help you understand the applications you test as a QA Analyst.

See salaries and explore the career path for Quality Assurance (QA) Analyst

Product Manager

Product Managers are responsible for managing the development, launch, and marketing of products. While this course will not teach you about product management, it can help you build a foundation in HTML, CSS, and JavaScript. This knowledge can be helpful for website development and collaboration with web development teams.

See salaries and explore the career path for Product Manager

Technical Writer

Technical Writers create documentation for software products. This may include user manuals and training materials. While this course will not teach you about technical writing, it can provide helpful knowledge about the technologies that you may need to document. This course will teach you about HTML, CSS, JavaScript, and more.

See salaries and explore the career path for Technical Writer

Computer Systems Analyst

Computer Systems Analysts help businesses understand and improve their computer systems. This role may involve working with web development teams. This course may be helpful for this role because it teaches you the fundamentals of HTML, CSS, JavaScript, and more.

See salaries and explore the career path for Computer Systems Analyst

Network Administrator

Network Administrators manage and maintain computer networks. This role typically does not require web development skills. However, this course may be helpful for understanding the web applications that run on these networks.

See salaries and explore the career path for Network Administrator

Systems Administrator

Systems Administrators manage and maintain computer systems. This role typically does not require web development skills. However, this course may be helpful for understanding the web applications that run on these systems.

See salaries and explore the career path for Systems Administrator

Database Administrator

Database Administrators manage and maintain databases. This role typically does not require web development skills. However, this course may be helpful for understanding the web applications that interact with databases.

See salaries and explore the career path for Database Administrator

Machine Learning Engineer

Machine Learning Engineers build and maintain machine learning models. This role typically does not require web development skills. However, this course may be helpful for understanding the web applications that you may need to use as a Machine Learning Engineer.

See salaries and explore the career path for Machine Learning Engineer

Data Analyst

Data Analysts analyze data to help businesses make better decisions. This role typically does not require web development skills. However, this course may be helpful for understanding the web applications that you may need to use as a Data Analyst.

See salaries and explore the career path for Data Analyst

Data Scientist

Data Scientists use data to solve business problems. This role typically does not require web development skills. However, this course may be helpful for understanding the web applications that you may need to use as a Data Scientist.

See salaries and explore the career path for Data Scientist

Introduction To Website Development Technologies

Here's a deal for you

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses