Applied Css 3 (2023) - Build 6 Professional Web Pages

Use HTML, CSS 3 and Web Development best practices to create pages in interactive web sites

What you'll learn

Break down existing web designs into web-friendly elements

Implement HTML layouts by working from the outside in

Style HTML elements using CSS and an iterative approach

Use CSS best practices to refine existing styles

Requirements

You should have a basic understanding of HTML

You should be motivated to continue improving their CSS skills

You should be comfortable using a text editor and some advanced features of a web browser shown in the course

Description

Have you tried introductory courses that fell short of providing useful code? Maybe you learned the information conceptually, but they didn't bridge the gap to practice. Then this course is for you. It contains distilled techniques about implementing professional designs that I've learned from over 9 years of professional Web Development at Fortune 500 companies and smaller startups.Not only will you learn about common layout patterns used in modern web pages, you will also walk away with 6 beautifully designed web pages that you can use for projects ranging from custom blog themes to menus for local restaurants in your community. Finally, you can apply these techniques to larger scale projects that require more fine-grained knowledge of CSS.The course is broken down into 6 parts, one for each major page:Part 1 - This introduces you to an eCommerce theme that shows a gallery of products and their prices.Part 2 - This builds on the eCommerce theme, this time going to a singular product with customer reviews and other elements. The first two parts are built around a common front-end pattern called the list-detail view pattern.Part 3 - The most advanced part of the course (you may return to this part at the end), Part 3 shows how to implement a list of Podcast episodes along with their name and cover image for a podcasting app.Part 4 - How to write a professional, compelling "About" page for your website or blog.Part 5 - Covers a long-form restaurant menu with different, commonly-styled sections for appetizers, main course, and dessert.Part 6 - Implements a custom blog article theme design with a sidebar and comments section.In order to be successful in this course, it's recommended you have a solid grasp on HTML 5. It also helps if you have a very basic understanding of CSS, even though common styles and styling techniques are explained in the lectures.

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Part 1 - Create an eCommerce Product Listing Page

Lecture 2 Navigation Menu HTML

Lecture 3 Confirm CSS Linking with Core Styles

Lecture 4 Add Navigation Icons

Lecture 5 Widen Navigation Elements

Lecture 6 Finish the Navigation Menu and Logo

Lecture 7 Add a Hero Image

Lecture 8 Main Body Layout

Lecture 9 Body Content and Relative Widths

Lecture 10 Footer Links Layout and Styles

Lecture 11 Finalize the Footer

Section 3: Part 2 - Build a Product Detail Page with Customer Reviews

Lecture 12 Product Page Design Overview

Lecture 13 HTML Containers for the Product Details

Lecture 14 Product Info HTML

Lecture 15 Styling the Gallery Images

Lecture 16 Layout Styles for the Product Details

Lecture 17 Button and Tag Styles

Lecture 18 Product Menu and Reviews HTML

Lecture 19 Review Form HTML

Lecture 20 Product Menu CSS

Lecture 21 Review Form Styles

Lecture 22 CSS Wrapup and Conclusions

Section 4: Part 3 - Make a Podcast Episode List Page

Lecture 23 Flowbase Design Overview

Lecture 24 Theming and Asset Downloads

Lecture 25 Nav Menu Layout and Styles

Lecture 26 Button Styles and Hero HTML

Lecture 27 Hero Layout and Title Styles

Lecture 28 Styling the Hero Description and Metadata

Lecture 29 Main Button Layout and Styles

Lecture 30 Button Flourishes and Header

Lecture 31 Latest Episodes Design Overview

Lecture 32 Episode List HTML

Lecture 33 Latest Episodes and Genre Filter Styles

Lecture 34 Episode Description and Tag Styles

Lecture 35 Host and Latest Episode Styles

Lecture 36 Footer HTML

Lecture 37 Footer Styles

Section 5: Create a Compelling About Page

Lecture 38 Design Overview and Copypasta

Lecture 39 Page Header HTML and CSS

Lecture 40 History and Stats HTML

Lecture 41 Founder and Sponsor HTML

Lecture 42 Stats Styles

Lecture 43 About and History Styles

Lecture 44 Founder and Main Host Styles

Lecture 45 Sponsor Section Styles

Lecture 46 Contact Form HTML

Lecture 47 Contact Form CSS

Lecture 48 Box Sizing and Wrapup

Section 6: Develop a Restaurant Menu Page

Lecture 49 FoodZero Design Overview

Lecture 50 Header HTML

Lecture 51 Menu HTML Structure

Lecture 52 Completing the HTML Menu

Lecture 53 Reservations and Footer HTML

Lecture 54 Font and Button Styles

Lecture 55 Styling the Top Nav

Lecture 56 Finishing the Hero

Lecture 57 Fine-tuning the Menu Layout

Lecture 58 Completing the Menu

Lecture 59 Reservation Styles

Lecture 60 Styling the Newsletter Form

Lecture 61 Copyright Container Styles

Section 7: Write a Customized Blog Article

Lecture 62 Design Overview and Code Carrying

Lecture 63 Asset Downloads

Lecture 64 Hero Container HTML

Lecture 65 Article Layout HTML

Lecture 66 Sidebar HTML

Lecture 67 Comment List HTML

Lecture 68 New Comment Form HTML

Lecture 69 Hero Container Styles

Lecture 70 Main Article Layout

Lecture 71 Article Content Styles

Lecture 72 Metadata Styles

Lecture 73 Search Bar and Sidebar Layout

Lecture 74 Sidebar Section Styles

Lecture 75 Recent Posts and Tags

Lecture 76 Previous and Next Post

Lecture 77 Styling Post Comments

Lecture 78 New Comment Form Styles

Section 8: Bonus Lecture

Lecture 79 Bonus Lecture (Discord and other links)

If you're looking to take your CSS skills to the next level and apply the things you learn to practical web pages that look professionally designed, this course is for you