Web Development with HTML and CSS for Beginners

Name: Web Development with HTML and CSS for Beginners
Rating: 4.5 (15 reviews)

Code and Deploy Your First Website

Created byIan Schoonover

Last updated 5/2024

English

English [Auto],

What you'll learn

Plan and design a professional portfolio website using a visual tool like Excalidraw to create a mockup and outline the site's structure and layout.
Develop a working knowledge of HTML and CSS, including semantic HTML elements and fundamental CSS properties, to build and style web pages effectively.
Implement modern, responsive layouts using Flexbox and CSS Grid techniques to create visually appealing and adaptive designs.
Deploy your new website to the web using GitHub Pages, showcasing the skills and projects developed throughout the course.

Course content

1 section • 5 lectures • 5h 9m total length

Introduction to HTML, How to Plan Out Your Website1:04:06
Plan a website with Excalidraw and translate the mockup into a static HTML page using VS Code, creating a header with a logo, navigation, hero content, and anchor links.
Semantic Tags in HTML, CSS Box Model, and CSS Display Property55:35
Explore semantic HTML with header, nav, main, sections, and headings, and learn the CSS box model and display properties to structure and style a web page for accessibility and SEO.
Semantic Tags in HTML, CSS Basics, Box Model, Rules, Declarations, and Selectors1:02:07
Explore styling a portfolio site with external CSS, mastering selectors, the box model, and layout concepts. Learn practical techniques for resets, header and nav styling, and hover effects.
More Styling with Flexbox and CSS Grid56:39
Develop a responsive portfolio site by applying flexbox to center the hero and CSS grid to create three image cards, with hover navigation and email form styling.
Add a Contact Form and Deploy Your Website to GitHub Pages1:10:44
Build a dynamic contact form on a static HTML/CSS portfolio, connect to web three forms API, and deploy to GitHub pages with a custom redirect and on-page success message.

Requirements

You don't need any prior experience – just a willingness to learn and a desire to create something awesome. I'll provide all the tools and knowledge you need to get started with web development.

Description

Want to create your own website but don't know where to start? In this 5-part video course, I'll teach you the basics of HTML and CSS by guiding you through building your own portfolio site from the ground up.

Before diving into code, I'll show you how to plan out your site using a free tool like Excalidraw to create a mockup. This crucial step will help you visualize your site's layout and design, making the coding process smoother and more efficient.

We'll then dive into structuring your site with semantic HTML and styling it with CSS to create a professional and visually appealing design. I'll introduce you to powerful layout techniques like Flexbox and CSS Grid, enabling you to create modern, responsive layouts in just a few lines of code.

By the end of the course, you'll have a fully functional portfolio showcasing your skills and projects. I'll even demonstrate how to add a working contact form and deploy your site for free using GitHub Pages, so it's live on the web and accessible to everyone.

You don't need any prior experience – just a willingness to learn and a desire to create something awesome. I'll provide all the tools and knowledge you need to get started with web development.

Join me on this exciting journey into HTML and CSS. Let's build your online presence together and take the first steps towards a rewarding hobby or career in web development. Ready to bring your digital dreams to life? Let's dive in!

Who this course is for:

Beginner level web developers and software engineers who are curious about HTML and CSS and looking to build their first website.