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.

Free

The University of Sheffield

Other Courses

7 Simple Steps To Improve Your Resume.

Personal Development

4.25

Want to learn how to improve your resume. In this course, I will show you 7 simple steps to Improve Your Resume.

Free

Learn to Become a Bible Study Pro! (All levels)

Personal Development

4.45

Effective and contextual methods of reading the Bible and applying it's true meaning to one's life.

Free

Overcome & Develop Any Habit: Use Full Potential in Life

Personal Development

4.42

Learn to terminate poor habits from your life & develop healthy ones to achieve your goals & live to your full potential

Free

Forex Trading For Beginners: Technical Trading

Finance & Accounting

3.85

Introduction to Technical Trading

Free

Learn How to Brew in 30 minuntes

Lifestyle

4.15

Find where I get my brewing for free and save money on buying equitment.

Free

Netcurso-create-instant-3d-heads-facial-animations

Create Instant Facial Animations & 3D Heads

Design

4.4

Quickly create professional-level, facial animations with no prior experience.

Free

Course 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 tag
tag explained
Include and
Launch Our Story web page
Styling Limitation in HTML
tag explained
tag explained
What is HTML?
Our Story web page Title
Translate title to French
Include tag</li> <li>Check how title is displayed in the web page</li> <li>Include <meta> tag with charset to fix title display</li> <li>Saving file using shortcut key in Visual Studio Code</li> <li><head>, <title>, <meta> explained</li> <li>Title explained</li> <li>HTML Attributes explained</li> <li>What is Favicon?</li> <li>Download 'resources.zip' for getting favicon image</li> <li>Copy downloaded 'resources.zip' file</li> <li>Place 'resources.zip' file in 'fsd' folder</li> <li>Extract 'resources.zip' file</li> <li>Verify 'resources' folder</li> <li>Favicon image and it's creation steps</li> <li>Create 'images' folder and copy favicon image file</li> <li>Delete 'resources.zip'</li> <li>Include <link> tag for favicon</li> <li>Launch Our Story web page using Live Server extension</li> <li>Favicon link tag explained</li> <li>Include Paris street image</li> <li>Understanding images and copyrights</li> <li><img> tag explained</li> <li>What is a Screen Reader?</li> <li>Significance of 'alt' attribute</li> <li>Include text</li> <li>HTML Element Alignment</li> <li>Apply border to view HTML Element boundary</li> <li>Analyze HTML layout</li> <li>Limitations of HTML Layout</li> <li>An analogy for <div> tag</li> <li><div> tag layout for Navigation bar</li> <li>Cleaning up the styles</li> <li>Inclusion of navigation using emmet</li> <li>Understanding Intellisense and <div> tag generation</li> <li>Include navigation content</li> <li>View navigation elements in browser</li> <li>Change navigation <div> to <nav></li> <li><div> to enclose the Our Story web page content</li> <li>Introduction to Command Palette</li> <li>Understanding Visual Studio Code commands</li> <li>Open Command Palette</li> <li>Executing a command with Command Palette</li> <li>Include outer most <div> using Command Palette</li> <li>Get the book cover image file</li> <li>Including bottom part of Our Story web page</li> </ul> </div> </div> <div style="margin-bottom: 20px;" class="toggle"> <div style="font-size: 18px;" class="togglet ls1 t300"> <i style="color: #007791" class="toggle-closed icon-line-plus"></i> <i style="color: #007791" class="toggle-open icon-line-minus"></i>Learn styling and page layout using CSS </div> <div class="togglec ls1 t300"> <ul class="iconlist"> <li>Create 'css' folder</li> <li>Create HTML file learning selector</li> <li>Include main HTML tags</li> <li>Understanding 'style' attribute</li> <li>Applying style to multiple tags</li> <li>Including multiple <h2> tags</li> <li>Create stylesheet file</li> <li>Define external styles</li> <li>Linking HTML and external stylesheet</li> <li>Applying styles for all <h2> tags</li> <li>How external CSS works?</li> <li>Implement Class Selector</li> <li>Class Selector explained</li> <li>Create HTML file for learning CSS styling</li> <li>Applying Font Color</li> <li>Display Visual Studio Code and Browser adjacently</li> <li>Applying Background Color</li> <li>Applying Padding</li> <li>Applying Border</li> <li>Applying Margin</li> <li>Box Model</li> <li>Applying Padding, Border and Margin to specific sides</li> <li>Apply Text Alignment</li> <li>Introduction to Fonts</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> </div> </div>  <div class="container clearfix" style="padding-top: 150px;"> <div id="instructor"></div> <div class="title-left"> <h3 class="t300">About the instructors</h3> </div> <div class="col_one_fourth"> <img style="border: 1px solid #dedfe0; border-radius: 50%;" src="https://img-c.udemycdn.com/user/100x100/123471244_eda2.jpg" alt="Netcurso-Instructores"><br> <ul style="font-size: 18px;" class="iconlist topmargin-sm"> <li style="margin-bottom: 10px;"><i class="icon-star3"></i><div class="t300"><strong>4.44</strong> Calificación</div></li> <li style="margin-bottom: 10px;"><i class="icon-user4"></i><div class="t300"><strong>54071</strong> Estudiantes</div></li> <li style="margin-bottom: 10px;"><i class="icon-play"></i><div class="t300"><strong>5</strong> Cursos</div></li> </ul> </div> <div class="col_three_fourth col_last"> <h4 class="t300" style="color: #007791">Chandrasekaran Janardhanan</h4> <h5 class="t400" style="font-size: 16px;" >Facilitator at SIMPL Academy</h5> <div class="descri"><p>Chandrasekaran has around 20 years of work experience in IT Services industry. Played various roles as application developer, application designer, architect, test manager, account manager and service manager. Designed and implemented Full Stack Java Learning Solutions for a large MNC.</p><p>Chandrasekaran can facilitate in HTML, CSS, JavaScript, Bootstrap, Core Java, J2EE, Spring Boot, REST API, Hibernate, MySQL and Oracle.</p><p>Chandrasekaran holds a Masters in Computer Application.</p></div> </div> <div class="clear"></div> <div class="title-left"> <h3 class="t300">Student feedback</h3> </div> <div class="col_one_fourth"> <div class="t300" style="font-size: 80px;">4.55</div> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star3"></i> <i style="color:#F4C150; font-size: 30px;" class="icon-star-half-full"></i> <h5 class="t300" style="font-size: 17px;">Course Rating</h5> </div> <div class="col_three_fourth col_last"> <h5 class="t400" style="font-size: 16px;" >Reviews</h5> <hr style="color: #0056b2;" /> </div> <div class="clear"></div> <div class="topmargin"> <center> <div class="badge alert-warning">Free</div><br> <a href="https://click.linksynergy.com/link?id=re1xT8rhYck&offerid=507388.3258930&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Ffsd-part1-free-segment%2F" target="_blank" ><button type="button" class="btn btn-dark">Enroll now</button></a> <br><br> <span>in</span> <br> <img src="//files.netcurso.net/images/udemy.png" height="50" > </center> </div> </div> </div> </section>   <footer id="footer" class="topmargin noborder dark" style="background-color: #4d4d4d;"> <div class="container clearfix">  <div class="footer-widgets-wrap clearfix"> <div class="col_one_fourth"> <div class="widget clearfix"> <div class="t400 ls1 lowercase nobottommargin" style="font-size: 36px; letter-spacing: -1px"><i>n</i>c</div> <p class="t300">@2024</p> <abbr title="Email Address">Email:</abbr> info@netcurso.net<br> <abbr title="Web">Web Cheap:</abbr><a href="//netcurso.net/en/"> netcurso.net</a> </div> </div> <div class="col_two_fifth"> <h4 class="t400 center">Find your courses here..</h4> <div class="gcse-search"></div> </div> <div class="col_one_fourth col_last"> <div class="widget widget-twitter-feed clearfix"> <a href="https://www.instagram.com/netcurso/" target="_blank" class="social-icon si-rounded si-instagram"> <i class="icon-instagram"></i> <i class="icon-instagram"></i> </a> <a href="https://www.facebook.com/NetCurso/" target="_blank" class="social-icon si-rounded si-facebook"> <i class="icon-facebook"></i> <i class="icon-facebook"></i> </a><a href="https://youtube.com/netcurso" target="_blank" class="social-icon si-rounded si-youtube"> <i class="icon-youtube"></i> <i class="icon-youtube"></i> </a>  </a> <a href="//free.netcurso.net/contact" class="social-icon si-rounded si-email3"> <i class="icon-email3"></i> <i class="icon-email3"></i> </a> </div> </div> </div> </div> <div class="line nomargin"></div>  <div id="copyrights" class="" style="background-color: #FFF;"> <div class="container clearfix"> <div class="col_full center nomargin"> <span style="color: #4d4d4d">Copyrights © 2024 All Rights Reserved by Netcurso</span><br> <span style="color: #4d4d4d" ><i class="icon-line2-pointer"></i> With love, from Venezuela</span><br> <a target="_blank" href="https://www.bible.com/bible/1/mat.6.33"><span style="color:#ADA7A7">Matthew 6:33</span></a> </div> </div> </div> </footer> </div>  <div id="gotoTop" class="icon-long-arrow-up"></div>   <script src="//files.netcurso.net/js/jquery.js"></script> <script src="//files.netcurso.net/js/plugins.js"></script>  <script src="//files.netcurso.net/js/functions.js"></script> </body> </html>

Full Stack Series - [FREE SEGMENT of PART1]