• Post category:StudyBullet-13
  • Reading time:8 mins read


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

What you will 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

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.


Get Instant Notification of New Courses on our Telegram channel.


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.

English
language

Content

Introduction

Introduction

Part 1 – Create an eCommerce Product Listing Page

Navigation Menu HTML
Confirm CSS Linking with Core Styles
Add Navigation Icons
Widen Navigation Elements
Finish the Navigation Menu and Logo
Add a Hero Image
Main Body Layout
Body Content and Relative Widths
Footer Links Layout and Styles
Finalize the Footer

Part 2 – Build a Product Detail Page with Customer Reviews

Product Page Design Overview
HTML Containers for the Product Details
Product Info HTML
Styling the Gallery Images
Layout Styles for the Product Details
Button and Tag Styles
Product Menu and Reviews HTML
Review Form HTML
Product Menu CSS
Review Form Styles
CSS Wrapup and Conclusions

Part 3 – Make a Podcast Episode List Page

Flowbase Design Overview
Theming and Asset Downloads
Nav Menu Layout and Styles
Button Styles and Hero HTML
Hero Layout and Title Styles
Styling the Hero Description and Metadata
Main Button Layout and Styles
Button Flourishes and Header
Latest Episodes Design Overview
Episode List HTML
Latest Episodes and Genre Filter Styles
Episode Description and Tag Styles
Host and Latest Episode Styles
Footer HTML
Footer Styles

Create a Compelling About Page

Design Overview and Copypasta
Page Header HTML and CSS
History and Stats HTML
Founder and Sponsor HTML
Stats Styles
About and History Styles
Founder and Main Host Styles
Sponsor Section Styles
Contact Form HTML
Contact Form CSS
Box Sizing and Wrapup

Develop a Restaurant Menu Page

FoodZero Design Overview
Header HTML
Menu HTML Structure
Completing the HTML Menu
Reservations and Footer HTML
Font and Button Styles
Styling the Top Nav
Finishing the Hero
Fine-tuning the Menu Layout
Completing the Menu
Reservation Styles
Styling the Newsletter Form
Copyright Container Styles

Write a Customized Blog Article

Design Overview and Code Carrying
Asset Downloads
Hero Container HTML
Article Layout HTML
Sidebar HTML
Comment List HTML
New Comment Form HTML
Hero Container Styles
Main Article Layout
Article Content Styles
Metadata Styles
Search Bar and Sidebar Layout
Sidebar Section Styles
Recent Posts and Tags
Previous and Next Post
Styling Post Comments
New Comment Form Styles

Bonus Lecture

Bonus Lecture (Discord and other links)