By Steven Blucher, Secondary School Teacher
Learn Front-End Web Development From Scratch
Course description
Thank you for taking the time to explore Learn Front-End Web Development From Scratch. I think you will find this course an amazing platfrom from which to launch your web development career!
Designed with the beginner in mind, but also completely relevant for those who have prior knowledge, this course aims to build your confidence in the main technologies you will need to master in order to build awesome web pages and sites. By the time you complete this course, you will be prepared to build pages youself and even teach the basics to your frineds, family and colleagues.
As possibly the most important computer platform available, you will learn the fundamentals of building websites in HyperText Markup Language (HTML). HTML is the building blocks of the internet - it is the way that web pages are structured and adds in a lot of information that is very important for the browser and other languages that you will need to learn in the future. Next, you will explore Cascading Style Sheets, or CSS, where you will build rules that make your pages look beautiful. Finally, you will learn how you can quickly build and style your pages using a front-end framework called Bootstrap. Bootstrap is a set of guidelines that cuts the production time of creating gorgeous website significantly.
So, why should you take this course? While this course is available for any number of reasons, you might find that you fall into one or more of the categories:
- Perhaps you would like to improve your thinking skills.
- Maybe you're ready for a change of career.
- You could be looking for a promotion within your current employment.
- You're simply interested in learning something new.
Regardless of your reason for looking at web development, I have aimed to make the lessons as easy to follow as possible. Each lesson video focuses on one element of HTML, CSS or Bootstrap so that you can maximise your chance of understanding each concept the first time.
I've found, over years of teaching, that the best option for learning, especially when learning to code, is to follow the 'watch then do' approach. This is a fairly common method used by digital technology teachers. As a student, watch what you're being taught first. Fight the desire to get straight into coding. I know, the desire to pause the video at each stage to copy what is happening will be strong, but resist! Instead, first watch the lesson through in its entirely. Then, and only then, open your text editor and while rewatching the video, pause and follow along with the lesson.
Using this method will allow you to really gain a strong understanding of the concept being taught and will allow you to really get good value for money.
Thank you for considering giving me the opportunity to show you how to create websites. If you opt to follow this course, I am certain that you will learn a great deal and that you will have fun along the way.
I look forward to partnering with you in your learning journey.
Related Skills
Course overview - 105
Introduction
Why
What Will You Get?
What Will You Need?
Let's Go..!
Learn Front-End Web Development from Scratch - Course Files
HTML - What is HTML?
HTML - Your First HTML
HTML - Basic Document Structure
HTML - Your First HTML 2.0
HTML - Headings
HTML - Carriage Returns
HTML - Formatting Text
HTML - Lists
HTML - Links
HTML - Images
Quiz 1: Links, Lists and Images
HTML - Tables
HTML - Form Input
HTML - More Form Inputs
Quiz 2: Tables and Forms
HTML - Entities
HTML - Emojis
HTML - Final Project Part 1
HTML - Final Project Part 2
HTML - Final Project Part 3
HTML *BONUS* - Audio
HTML *BONUS* - Video
HTML - Closing
CSS - Introduction
CSS - Inline CSS
CSS - In-document CSS
CSS - External CSS
CSS - Classes
CSS - ID's
CSS - DIV Element
CSS - Colour
CSS - Width and Height
CSS - Styling Text Part 1
CSS - Styling Text Part 2
CSS - Styling Text Part 3
CSS - Fonts Part 1
CSS - Fonts Part 2
Quiz 3: Text and Colours
CSS - Box Model
CSS - Margins
CSS - Padding
CSS - Borders
Quiz 4: Spacing Out
CSS - Border Radius
CSS - Display
CSS - Position
CSS - Float
Quiz 5: Moving Around
CSS - Final Project Files
CSS - Final Project Part 1
CSS - Final Project Part 2
CSS - Final Project Part 3
CSS - Final Project Part 4
CSS - Final Project Part 5
CSS - Final Project Part 6
CSS - Final Project Part 7
CSS - Final Project Part 8
CSS *BONUS* - Opacity
CSS *BONUS* - Gradients
CSS *BONUS* - Drop Cap
CSS - Closing
Bootstrap - Introduction
Bootstrap - Inclusion
Bootstrap - Containers
Bootstrap - Fixed-width Columns
Bootstrap - Different-width Columns
Quiz 6: Bootstrap Layout
Bootstrap - Headings
Bootstrap - Typography
Bootstrap - Images
Bootstrap - Lists
Quiz 7: Typography and Images
Bootstrap - Alerts
Bootstrap - Buttons
Bootstrap - Jumbotron
Bootstrap - Navigation Bars
Bootstrap - Navs
Bootstrap - Dropdowns
Quiz 8: Components 1
Bootstrap - Cards
Bootstrap - Carousels
Bootstrap - Forms
Bootstrap - Input Groups
Bootstrap - Modals
Quiz 9: Components 2
Bootstrap - Final Project Files
Bootstrap - Final Project Part 1
Bootstrap - Final Project Part 2
Bootstrap - Final Project Part 3
Bootstrap - Final Project Part 4
Bootstrap - Final Project Part 5
Bootstrap - Final Project Part 6
Bootstrap - Final Project Part 7
Bootstrap - Final Project Part 8
Bootstrap - Final Project Part 9
Bootstrap - Final Project Part 10
Bootstrap - Closing
Where To Now?
Just The Beginning