Full Stack Series – [FREE SEGMENT of PART1]


Develop a responsive about page for an imaginary pastry shop using HTML, CSS, Bootstrap and deploy in AWS.

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

Description

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:


Get Instant Notification of New Courses on our Telegram channel.


  • 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.

English
language

Content

Introduction

Introduction
Learning Environment
Video Settings
Install Chrome Browser
Download Visual Studio Code
Install Visual Studio Code for Windows
Install Visual Studio Code for Mac
Quick Launch Visual Studio Code
Install Live Server Extension

Understanding Our Story web page

Patisserie – Our Story
Folder Structure
Create folder and open in Visual Studio Code
Create ‘learn’ folder
Create ‘html’ folder

Build Our Story web page with HTML

Create HTML file for Our Story web page
Include DOCTYPE
DOCTYPE explained
Include <html> tag
<html> tag explained
Include <body> and <heading>
Launch Our Story web page
Styling Limitation in HTML
<body> tag explained
<head> tag explained
What is HTML?
Our Story web page Title
Translate title to French
Include <title> tag
Check how title is displayed in the web page
Include <meta> tag with charset to fix title display
Saving file using shortcut key in Visual Studio Code
<head>, <title>, <meta> explained
Title explained
HTML Attributes explained
What is Favicon?
Download ‘resources.zip’ for getting favicon image
Copy downloaded ‘resources.zip’ file
Place ‘resources.zip’ file in ‘fsd’ folder
Extract ‘resources.zip’ file
Verify ‘resources’ folder
Favicon image and it’s creation steps
Create ‘images’ folder and copy favicon image file
Delete ‘resources.zip’
Include <link> tag for favicon
Launch Our Story web page using Live Server extension
Favicon link tag explained
Include Paris street image
Understanding images and copyrights
<img> tag explained
What is a Screen Reader?
Significance of ‘alt’ attribute
Include text
HTML Element Alignment
Apply border to view HTML Element boundary
Analyze HTML layout
Limitations of HTML Layout
An analogy for <div> tag
<div> tag layout for Navigation bar
Cleaning up the styles
Inclusion of navigation using emmet
Understanding Intellisense and <div> tag generation
Include navigation content
View navigation elements in browser
Change navigation <div> to <nav>
<div> to enclose the Our Story web page content
Introduction to Command Palette
Understanding Visual Studio Code commands
Open Command Palette
Executing a command with Command Palette
Include outer most <div> using Command Palette
Get the book cover image file
Including bottom part of Our Story web page

Learn styling and page layout using CSS

Create ‘css’ folder
Create HTML file learning selector
Include main HTML tags
Understanding ‘style’ attribute
Applying style to multiple tags
Including multiple <h2> tags
Create stylesheet file
Define external styles
Linking HTML and external stylesheet
Applying styles for all <h2> tags
How external CSS works?
Implement Class Selector
Class Selector explained
Create HTML file for learning CSS styling
Applying Font Color
Display Visual Studio Code and Browser adjacently
Applying Background Color
Applying Padding
Applying Border
Applying Margin
Box Model
Applying Padding, Border and Margin to specific sides
Apply Text Alignment
Introduction to Fonts
Google Fonts
Applying Font
Understanding @import
Apply Font Boldness
Change Font Size
Apply Width and Height
Demonstration of layout
Get ‘layout.html’ and it’s styles
Flex Demonstration
CSS Conclusion

Conclusion

Course Conclusion
Enroll for Free

💠 Follow this Video to Get Free Courses on Every Udemy Topics! 💠

Tags: , ,