0
Web Designing with HTML, CSS, Sass & JavaScript - Level 3
4.8( 4 REVIEWS )
201 STUDENTS
Overview Your website is an important aspect of the company’s digital marketing. It influences how your audience perceives the brand …
Overview
Your website is an important aspect of the company’s digital marketing. It influences how your audience perceives the brand or service. The first impression you make will either get them to stay on your site and learn about your business or leave the page and turn to a competitor. Hence, one of the most important elements to keep in mind during the web development process is to create an appealing design. This will grab the viewers’ attention and get them to focus on your valuable content
This course is focused around building professional websites for yourself or your clients. It will teach you all the essentials to master the fundamentals of expert web design with HTML, CSS, Sass, and various other tools. At the completion of this course, you will be able to create simple basic websites and further convert them into amazingly beautiful responsive websites through HTML, CSS, Sass, and other tools.
Why You Should Consider Taking this Course at Study365?
The Web Designing with HTML, CSS, Sass & JavaScript course is brought to you by Study365. We are a leading online education provider for several accredited organisations, and provide learners the opportunity to take this IAP course. At Study365, we give our fullest attention to the learners’ needs and ensure they have the necessary information required to proceed with the training.
Our priority is on the advancement of knowledge and skills, we are bound to facilitate everything required to confirm a top-notch education service. We vouch for our learners an exclusive learning experience by paying close attention to each of their unique requirements and coming up with solutions every time. We provide them with state-of-the-art facilities using the latest technology.
The benefits of studying with Study365 are ample. Here are just a few,
- Unlimited 12 months access from anywhere, anytime
- Save time and money on travel
- Learn at your own pace
- Versatile and motivated learning
- A culture of continuous improvement
- About the Tutor
- Learning Outcome
- Who is this qualification for?
- Prerequisites to take the course
- Method of assessment
- Certification
- Awarding Body
- Prospective careers
Juan Galvan is a visionary, marketer and digital entrepreneur. He has been effective in enabling digital businesses to reach the next level of success. He believes in continued education and wants to share his extensive knowledge and experience as a coach, consultant and strategist with others. He aims to enable learners to expand their skill set in digital marketing, web development, programming and e-commerce. Juan Galvan will guide you to make critical business decisions, develop unique ways to deliver products in the marketplace and have clarity and confidence in your business.
- Learn the fundamentals of web design and JavaScript
- Understand how to build remarkable websites
- Learn the skills needed to become a front end developer
- Get tips on how to make your website stand out
- Individuals who want to learn to build websites from scratch
- There are no pre-requisites to follow this course
- Learners should be over the age of 16
This is a knowledge-based course, and thus, will contain no method of assessment.
Once the course completed, the learners get awarded the certificate of completion for ‘Web Designing with HTML, CSS, Sass & JavaScript - Level 3' by iAP.
The International Awards for Professionals (iAP) is an awarding body established in 1999 that aims to promote a high educational standard. They hope to create online education that is trustworthy and credible. They are focused on raising the standards of online education, and ensuring it is accessible to all. The iAP provides accreditation for a range of educational establishments, and monitors and continually develops the educational standards of such institutions. Their globally recognised certifications allow learners to acquire the skills and knowledge needed to gain employment in the chosen fields.
On successful completion of this course, learners will have the knowledge and skills to enter the relevant job market, with the confidence to explore a wide range of industry-related professions. You can study related courses that will open the door to new and exciting opportunities and enhance your expertise in this subject, and add this as a skillset on your resume. Your skills will be recognised by top employers and organisations that will enable you to land a generous-paying job, gain plenty of benefits, and a wide array of opportunities. Given below are job titles you can compete for,
- Front-end developer
- Software developer
Course Curriculum
| 1. Course Introduction | |||
| 1.1. Entire Course Overview | FREE | 00:09:00 | |
| 1.2. Who is this Course is for? | FREE | 00:04:00 | |
| 1.3. Web Developer Marketplace | FREE | 00:03:00 | |
| 1.4. Web Developer Job Opportunities | FREE | 00:04:00 | |
| 1.5. 4 Skills of Successful Web Developer | FREE | 00:05:00 | |
| 1.6. Different Types of Web Developers | FREE | 00:06:00 | |
| 1.7. The Course Projects | 00:03:00 | ||
| 2. Introduction to HTML | |||
| 2.1. Html Quick Section Overview | 00:01:00 | ||
| 2.2. What is HTML? | 00:03:00 | ||
| 2.3. Environment Setup – Installing Sublime Text | 00:02:00 | ||
| 2.4. Structure of an HTML Document | 00:05:00 | ||
| 2.5. Html Heading and Paragraph Elements | 00:13:00 | ||
| 2.6. HTML Image and Attributes | 00:06:00 | ||
| 2.7. HTML Links | 00:04:00 | ||
| 3. Styling with CSS | |||
| 3.1. CSS Quick Section Overview | 00:01:00 | ||
| 3.2. Intro to CSS – Why Use CSS? | 00:04:00 | ||
| 3.3. How to Insert CSS Into Your Code | 00:11:00 | ||
| 3.4. CSS Selectors | 00:15:00 | ||
| 3.5. CSS Properties – Background, Font, and Border Properties | 00:10:00 | ||
| 3.6. CSS Box Model – Intro to Div Element | 00:08:00 | ||
| 3.7. Making Simple Box Model Layouts – Using Div Elements | 00:22:00 | ||
| 3.8. Incorporating Box Model into a Blog Page | 00:27:00 | ||
| 3.9. Relative vs. Absolute Positioning | 00:08:00 | ||
| 3.10. Debugging Your Code Using Browser Tools | 00:05:00 | ||
| 4. Basics of Web Design | |||
| 4.1. Working with fonts and icons | 00:08:00 | ||
| 4.2. Working with Colors | 00:09:00 | ||
| 4.3. Working with Images | 00:04:00 | ||
| 4.4. Whitespaces, Layout and User Experience | 00:02:00 | ||
| 4.5. Secret to Making Great Websites | 00:03:00 | ||
| 5. Building a Website From Scratch | |||
| 5.1. Rules to design a good website | 00:02:00 | ||
| 5.2. Project – making digital services agency website | 00:06:00 | ||
| 5.3. Overview of the digisolve project | 00:04:00 | ||
| 5.4. Digisolve project – getting started | 00:08:00 | ||
| 5.5. Setting up fluid grid | 00:12:00 | ||
| 5.6. Building the webpage header | 00:20:00 | ||
| 5.7. Building the more info button | 00:09:00 | ||
| 5.8. Building the logo + menu | 00:12:00 | ||
| 5.9. Building the about us page | 00:11:00 | ||
| 5.10. Building the portfolio section | 00:26:00 | ||
| 5.11. Building the services page | 00:25:00 | ||
| 5.12. Building the featured clients page | 00:07:00 | ||
| 5.13. Building the testimonials page | 00:22:00 | ||
| 5.14. Building the popular packages page | 00:20:00 | ||
| 5.15. Popular packages continued | 00:09:00 | ||
| 5.16. Building the contact form | 00:28:00 | ||
| 5.17. Building the webpage footer | 00:23:00 | ||
| 6. Making The Page Responsive | |||
| 6.1. Using media queries – part 1 | 00:25:00 | ||
| 6.2. Using media queries – part 2 | 00:33:00 | ||
| 6.3. Browser compatibility | 00:12:00 | ||
| 7. Adding Effects and Animations with JQuery | |||
| 7.1. Intro to jquery | 00:05:00 | ||
| 7.2. Creating sticky navigation | 00:14:00 | ||
| 7.3. Scrolling to target elements | 00:09:00 | ||
| 7.4. Adding animations without coding! | 00:17:00 | ||
| 7.5. Adding animations continued | 00:13:00 | ||
| 8. Optimizing and Launching the Website | |||
| 8.1. Optimizing website performance | 00:07:00 | ||
| 8.2. Image optimization | 00:10:00 | ||
| 8.3. Minifying the code | 00:06:00 | ||
| 8.4. Launching the webpage | 00:12:00 | ||
| 9. CSS under the Hood | |||
| 9.1. How css works (part 1) | 00:03:00 | ||
| 9.2. How css works (part 2) | 00:10:00 | ||
| 9.3. How the cascade works | 00:13:00 | ||
| 9.4. How css calculates pixel values and renders a website | 00:18:00 | ||
| 10. Intro to SASS and NPM | |||
| 10.1. What is sass? | 00:04:00 | ||
| 10.2. Sass basic principles – variables, nesting | 00:31:00 | ||
| 10.3. Sass basic principles – mixins, extends, functions | 00:18:00 | ||
| 10.4. Command line basics | 00:06:00 | ||
| 10.5. What is npm? | 00:04:00 | ||
| 10.6. Installing and setting up sass and npm | 00:12:00 | ||
| 11. Good CSS Practices | |||
| 11.1. How to plan out your css | 00:05:00 | ||
| 11.2. The bem model | 00:06:00 | ||
| 11.3. An ideal folder and file structure for a css project | 00:10:00 | ||
| 11.4. Different types of layouts | 00:03:00 | ||
| 12. Website Project Country Club Site | |||
| 12.1. Lakeview project overview | 00:07:00 | ||
| 12.2. Setting up the project with starter code & resources | 00:13:00 | ||
| 12.3. Creating a background image slider for the header | 00:27:00 | ||
| 12.4. Automatic page reload with npm and live-server | 00:07:00 | ||
| 12.5. Typography for header | 00:21:00 | ||
| 12.6. Creating button for header | 00:14:00 | ||
| 12.7. Creating a fluid grid from scratch | 00:07:00 | ||
| 12.8. Building the about section part 1 | 00:20:00 | ||
| 12.9. Building the about section part 2 | 00:13:00 | ||
| 12.10. Building the about section part 3 | 00:13:00 | ||
| 12.11. Building the club amenities part 1 | 00:23:00 | ||
| 12.12. Building the club amenities part 2 | 00:22:00 | ||
| 12.13. Building the contact form part 1 | 00:27:00 | ||
| 12.14. Building the contact form part 2 | 00:33:00 | ||
| 12.15. Building the contact form part 3 | 00:26:00 | ||
| 12.16. Building the membership plan part 1 | 00:20:00 | ||
| 12.17. Building the membership plan part 2 | 00:32:00 | ||
| 12.18. Building the membership plan part 3 | 00:11:00 | ||
| 12.19. Building the testimonials section part 1 | 00:27:00 | ||
| 12.20. Building the testimonials section part 2 | 00:39:00 | ||
| 12.21. Building the testimonials section part 3 | 00:42:00 | ||
| 13. Advanced Responsive Design | |||
| 13.1. Media queries with sass part 1 | 00:25:00 | ||
| 13.2. Media queries with sass part 2 | 00:18:00 | ||
| 13.3. Media queries with sass part 3 | 00:18:00 | ||
| 13.4. Media queries with sass part 4 | 00:17:00 | ||
| 13.5. Making images responsive and optimized | 00:38:00 | ||
| 13.6. Density switching using cdn | 00:14:00 | ||
| 13.7. Ensuring browser support | 00:33:00 | ||
| 13.8. Mobile first vs. Desktop first design | 00:12:00 | ||
| 14. Flexbox | |||
| 14.1. Introduction to flexbox (part 1) | 00:31:00 | ||
| 14.2. Introduction to flexbox (part 2) | 00:16:00 | ||
| 14.3. Project overview for ‘bizwizz’ website | 00:09:00 | ||
| 14.4. Setting up the project | 00:11:00 | ||
| 14.5. Creating the header section | 00:41:00 | ||
| 14.6. Creating the animated button | 00:10:00 | ||
| 14.7. Creating svg waves | 00:10:00 | ||
| 14.8. Creating the services section | 00:20:00 | ||
| 14.9. Downloading and using svg icons | 00:27:00 | ||
| 14.10. Creating the meet our team section | 00:38:00 | ||
| 14.11. Creating an Image Gallery | 00:19:00 | ||
| 14.12. Creating the testimonials section | 00:27:00 | ||
| 14.13. Creating a testimonial carousel from scratch (part 1) | 00:39:00 | ||
| 14.14. Creating a testimonial carousel from scratch (part 2) | 00:42:00 | ||
| 14.15. Creating the contact section | 00:48:00 | ||
| 14.16. Creating the cta section | 00:04:00 | ||
| 14.17. Creating the footer | 00:12:00 | ||
| 14.18. Making the page responsive | 00:47:00 | ||
| 15. Starting a Career as a Web Developer | |||
| 15.1. Creating an web developer resume | 00:08:00 | ||
| 15.2. Contacting recruiters | 00:06:00 | ||
| 15.3. Getting started with freelancing | 00:06:00 | ||
| 15.4. Personal branding | 00:06:00 | ||
| 15.5. Networking do’s and don’ts | 00:05:00 | ||
| Completion Certificate Request | |||
| Completion Certificate Request | |||
Students feedback
Related Courses
Beginners Portuguese - Level 3
0£19.00
Gale Burke
What I liked the most was how coding was explained with examples and real world sites.
Cory Cunningham
Very hands-on practical tips for building eye-catching websites.
Harper Reid
I loved this Level 3 certification in web engineering.
Charlie Booth
I got a good grip on HTML 4 and CSS after doing this course.