Develop a responsive about page for an imaginary pastry shop using HTML, CSS, Bootstrap and deploy in AWS.
- Free tutorial
- Rating: 4.3 out of 54.3 (18 ratings)
- 2,816 students
- 1hr 57min of on-demand video
- Created by Chandrasekaran Janardhanan
- English
What you’ll 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
Requirements
- No prior development experience required
- Desktop PC or Laptop with minimum 4GB of RAM and 500MB hard disk space
- On screen instructions provided for Apple Mac users
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:
- 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.
Who this course is for:
- Graduates
- Developers looking to enhance their skills
- Whomever want to become a Full Stack Trainer
Show less
Course content
5 sections • 107 lectures • 1h 57m total lengthCollapse all sections
Introduction9 lectures • 20min
- Introduction05:20
- Learning Environment00:48
- Video Settings02:40
- Install Chrome Browser01:32
- Download Visual Studio Code01:20
- Install Visual Studio Code for Windows01:45
- Install Visual Studio Code for Mac02:06
- Quick Launch Visual Studio Code02:32
- Install Live Server Extension01:30
Understanding Our Story web page5 lectures • 5min
- Patisserie – Our Story00:47
- Folder Structure00:35
- Create folder and open in Visual Studio Code01:44
- Create ‘learn’ folder00:57
- Create ‘html’ folder00:35
Build Our Story web page with HTML58 lectures • 1hr 3min
- Create HTML file for Our Story web page00:40
- Include DOCTYPE01:18
- DOCTYPE explained00:58
- Include <html> tag00:56
- <html> tag explained00:57
- Include <body> and <heading>02:12
- Launch Our Story web page01:18
- Styling Limitation in HTML00:38
- <body> tag explained00:32
- <head> tag explained01:29
- What is HTML?01:00
- Our Story web page Title00:35
- Translate title to French00:59
- Include <title> tag01:49
- Check how title is displayed in the web page01:08
- Include <meta> tag with charset to fix title display01:18
- Saving file using shortcut key in Visual Studio Code00:48
- <head>, <title>, <meta> explained01:05
- Title explained00:58
- HTML Attributes explained00:54
- What is Favicon?00:33
- Download ‘resources.zip’ for getting favicon image00:31
- Copy downloaded ‘resources.zip’ file00:35
- Place ‘resources.zip’ file in ‘fsd’ folder00:57
- Extract ‘resources.zip’ file00:44
- Verify ‘resources’ folder01:08
- Favicon image and it’s creation steps01:20
- Create ‘images’ folder and copy favicon image file00:58
- Delete ‘resources.zip’00:49
- Include <link> tag for favicon02:05
- Launch Our Story web page using Live Server extension01:10
- Favicon link tag explained00:48
- Include Paris street image00:58
- Understanding images and copyrights01:04
- <img> tag explained01:20
- What is a Screen Reader?00:37
- Significance of ‘alt’ attribute00:59
- Include text01:20
- HTML Element Alignment01:51
- Apply border to view HTML Element boundary00:49
- Analyze HTML layout01:21
- Limitations of HTML Layout00:58
- An analogy for <div> tag01:30
- <div> tag layout for Navigation bar01:07
- Cleaning up the styles01:09
- Inclusion of navigation using emmet01:34
- Understanding Intellisense and <div> tag generation00:57
- Include navigation content00:51
- View navigation elements in browser00:41
- Change navigation <div> to <nav>01:17
- <div> to enclose the Our Story web page content00:47
- Introduction to Command Palette00:55
- Understanding Visual Studio Code commands00:50
- Open Command Palette01:15
- Executing a command with Command Palette01:07
- Include outer most <div> using Command Palette02:02
- Get the book cover image file00:44
- Including bottom part of Our Story web page01:42
Learn styling and page layout using CSS34 lectures • 29min
- Create ‘css’ folder00:35
- Create HTML file learning selector00:56
- Include main HTML tags00:42
- Understanding ‘style’ attribute00:46
- Applying style to multiple tags00:46
- Including multiple <h2> tags01:05
- Create stylesheet file00:30
- Define external styles00:52
- Linking HTML and external stylesheet00:57
- Applying styles for all <h2> tags00:30
- How external CSS works?00:55
- Implement Class Selector00:45
- Class Selector explained01:00
- Create HTML file for learning CSS styling01:20
- Applying Font Color00:38
- Display Visual Studio Code and Browser adjacently01:29
- Applying Background Color00:51
- Applying Padding00:52
- Applying Border00:44
- Applying Margin00:27
- Box Model01:09
- Applying Padding, Border and Margin to specific sides00:51
- Apply Text Alignment00:31
- Introduction to Fonts01:09
- Google Fonts01:12
- Applying Font00:44
- Understanding @import01:17
- Apply Font Boldness00:37
- Change Font Size00:22
- Apply Width and Height00:26
- Demonstration of layout00:58
- Get ‘layout.html’ and it’s styles00:44
- Flex Demonstration01:54
- CSS Conclusion00:32
Conclusion1 lecture • 1min
- Course Conclusion00:57
