Full Stack Series – [FREE SEGMENT of PART1]

Full Stack Series – [FREE SEGMENT of PART1], available at Free, has an average rating of 4.1, with 107 lectures, based on 25 reviews, and has 3304 subscribers.

You will learn about Fine grained steps and instructions Learn basics of HTML and CSS Build an about page for an imaginary Pastry Shop Learn basic HTML tags, CSS styling and layout to build the about page This course is ideal for individuals who are Graduates or Developers looking to enhance their skills or Whomever want to become a Full Stack Trainer It is particularly useful for Graduates or Developers looking to enhance their skills or Whomever want to become a Full Stack Trainer.

Enroll now: Full Stack Series – [FREE SEGMENT of PART1]

Summary

Title: Full Stack Series – [FREE SEGMENT of PART1]

Price: Free

Average Rating: 4.1

Number of Lectures: 107

Number of Published Lectures: 107

Number of Curriculum Items: 107

Number of Published Curriculum Objects: 107

Original Price: Free

Quality Status: approved

Status: Live

What You Will Learn

Fine grained steps and instructions
Learn basics of HTML and CSS
Build an about page for an imaginary Pastry Shop
Learn basic HTML tags, CSS styling and layout to build the about page

Who Should Attend

Graduates
Developers looking to enhance their skills
Whomever want to become a Full Stack Trainer

Target Audiences

Graduates
Developers looking to enhance their skills
Whomever want to become a Full Stack Trainer

Welcome to PART 1 of the Full Stack Development course series.

This is a beginner friendly course.

Learn Full Stack Development by building a website for an imaginary pastry shop.

This is a segment of the first part of the Full Stack Development course series.

The following is the summary of what you will learn in this course:

You will learn to build the about page of the pastry shop website.
As part of building this website, you will learn:
To create HTML web page.
Style the web page using CSS.

In HTML, you will learn about DOCTYPE, html, body, heading, title, meta, charset, favicon, image, alt attribute, div and nav.

You will learn the above HTML topics by implementing the web page of Our Story web page of the imaginary pastry shop. Following are the features that will be implement in the Our Story web page:

Title and favicon image will be included
The navigation bar will be created on the top with logo and navigation item
Heading will be included in this page
In the main content of the web page images will be included
You will also learn to build web page considering people having accessibility issues

In CSS, you will learn Inline style, external style, element selector, class selector, color, background color, padding, border, margin, box model, text align, font family, font weight, font size, height, width, layout, flex and flex wrap.

The course contains step by step instructions, to make a beginner comfortable with coding and tools.

Visual Studio Code will be the editor used and you will be taught all the techniques to quickly code with features like emmet abbreviation and command palette.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Learning Environment

Lecture 3: Video Settings

Lecture 4: Install Chrome Browser

Lecture 5: Download Visual Studio Code

Lecture 6: Install Visual Studio Code for Windows

Lecture 7: Install Visual Studio Code for Mac

Lecture 8: Quick Launch Visual Studio Code

Lecture 9: Install Live Server Extension

Chapter 2: Understanding Our Story web page

Lecture 1: Patisserie – Our Story

Lecture 2: Folder Structure

Lecture 3: Create folder and open in Visual Studio Code

Lecture 4: Create 'learn' folder

Lecture 5: Create 'html' folder

Chapter 3: Build Our Story web page with HTML

Lecture 1: Create HTML file for Our Story web page

Lecture 2: Include DOCTYPE

Lecture 3: DOCTYPE explained

Lecture 4: Include <html> tag

Lecture 5: <html> tag explained

Lecture 6: Include <body> and <heading>

Lecture 7: Launch Our Story web page

Lecture 8: Styling Limitation in HTML

Lecture 9: <body> tag explained

Lecture 10: <head> tag explained

Lecture 11: What is HTML?

Lecture 12: Our Story web page Title

Lecture 13: Translate title to French

Lecture 14: Include <title> tag

Lecture 15: Check how title is displayed in the web page

Lecture 16: Include <meta> tag with charset to fix title display

Lecture 17: Saving file using shortcut key in Visual Studio Code

Lecture 18: <head>, <title>, <meta> explained

Lecture 19: Title explained

Lecture 20: HTML Attributes explained

Lecture 21: What is Favicon?

Lecture 22: Download 'resources.zip' for getting favicon image

Lecture 23: Copy downloaded 'resources.zip' file

Lecture 24: Place 'resources.zip' file in 'fsd' folder

Lecture 25: Extract 'resources.zip' file

Lecture 26: Verify 'resources' folder

Lecture 27: Favicon image and it's creation steps

Lecture 28: Create 'images' folder and copy favicon image file

Lecture 29: Delete 'resources.zip'

Lecture 30: Include <link> tag for favicon

Lecture 31: Launch Our Story web page using Live Server extension

Lecture 32: Favicon link tag explained

Lecture 33: Include Paris street image

Lecture 34: Understanding images and copyrights

Lecture 35: <img> tag explained

Lecture 36: What is a Screen Reader?

Lecture 37: Significance of 'alt' attribute

Lecture 38: Include text

Lecture 39: HTML Element Alignment

Lecture 40: Apply border to view HTML Element boundary

Lecture 41: Analyze HTML layout

Lecture 42: Limitations of HTML Layout

Lecture 43: An analogy for <div> tag

Lecture 44: <div> tag layout for Navigation bar

Lecture 45: Cleaning up the styles

Lecture 46: Inclusion of navigation using emmet

Lecture 47: Understanding Intellisense and <div> tag generation

Lecture 48: Include navigation content

Lecture 49: View navigation elements in browser

Lecture 50: Change navigation <div> to <nav>

Lecture 51: <div> to enclose the Our Story web page content

Lecture 52: Introduction to Command Palette

Lecture 53: Understanding Visual Studio Code commands

Lecture 54: Open Command Palette

Lecture 55: Executing a command with Command Palette

Lecture 56: Include outer most <div> using Command Palette

Lecture 57: Get the book cover image file

Lecture 58: Including bottom part of Our Story web page

Chapter 4: Learn styling and page layout using CSS

Lecture 1: Create 'css' folder

Lecture 2: Create HTML file learning selector

Lecture 3: Include main HTML tags

Lecture 4: Understanding 'style' attribute

Lecture 5: Applying style to multiple tags

Lecture 6: Including multiple <h2> tags

Lecture 7: Create stylesheet file

Lecture 8: Define external styles

Lecture 9: Linking HTML and external stylesheet

Lecture 10: Applying styles for all <h2> tags

Lecture 11: How external CSS works?

Lecture 12: Implement Class Selector

Lecture 13: Class Selector explained

Lecture 14: Create HTML file for learning CSS styling

Lecture 15: Applying Font Color

Lecture 16: Display Visual Studio Code and Browser adjacently

Lecture 17: Applying Background Color

Lecture 18: Applying Padding

Lecture 19: Applying Border

Lecture 20: Applying Margin

Lecture 21: Box Model

Lecture 22: Applying Padding, Border and Margin to specific sides

Lecture 23: Apply Text Alignment

Lecture 24: Introduction to Fonts

Instructors

Chandrasekaran Janardhanan
Facilitator at SIMPL Academy

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 7 votes
4 stars: 10 votes
5 stars: 8 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu