Web Brilliance: A Creative Developer’s Guide

About Course

This course is aimed at detailed training in creating websites, without water, but the main thing is that here we immediately apply all the knowledge in practice. This means that you will receive all the material to work with and together we will create real projects step by step. We will walk the path from installing your first code editor to creating full-fledged, fully functioning websites located on the Internet.
We will study the theoretical part and immediately apply it on real projects. All links to resources, additional materials and bonus mockups for practice will be provided within the course. Why is it worth starting your training now? Website creation (layout) is a skill in great demand on the labor market, which also pays well. Not only will you be able to create your own products and work both as a freelancer and in a web studio after studying all the information given to you, but you will also lay the foundation for further training.

Learn the basics of web development: what a website is, why it is needed, creation cycles and much more
Learn to work with graphic editors in the context of layout: Photoshop, Zeplin, Figma, Avocode...
Learn to work with graphics for the web, including SVG
You will learn and understand how to use HTML and CSS in real projects (theory + real practice)
Learn the basics of JS and Jquery, learn how to apply them in your projects
Learn to work with Git and GitHub
Learn to work with Bootstrap 4/5 and with FlexBox technology
Learn how to use Sass/Scss/Less preprocessors in your projects
Learn how to create mobile adaptation of sites and applications
Learn to use the BEM methodology
You will understand how to create multi-page websites and the principles of landing under a CMS (content management system)
Learn to Automate Processes with Gulp Task Scheduler

Course Content

Module 1. Immersion in the topic of creating web products. Learning the basics of HTML and CSS

Why do we need this module
Classification of sites. Stages of creation.
Installing and configuring the code editor
Working with Adobe Photoshop on the web
Working with modern editors: Avocode, Zeplin, Figma…
Bonus. What are “grids” and converting icons to SVG format
We are creating our first project. HTML Basics
Basic HTML tags in practice
Test for pinning main tags
Semantic HTML5 tags
Test for fixing semantic tags
CSS Basics in Practice
Align elements vertically. Layout with tables and floats
Bonus. CSS Units
Specificity of CSS selectors
Intermediate test to consolidate knowledge
Practice. We create a website using pure HTML and CSS
Flexbox technology and its application on the layout
Practice. Finishing the site with pure HTML and CSS + homework
Resetting styles reset.css/normalize.css
Connecting fonts to the site
Final module test

Module 2. Speeding up work several times

Why do we need this module
Bootstrap 4 library
About updating Bootstrap to version 5
Practice. New project using Bootstrap grid
How to correctly form file paths
Preprocessors. SASS/SCSS/LESS
If you have an error when compiling SASS code
Vendor prefixes in CSS
Practice. Let’s continue working and use the SASS preprocessor
Pseudo-classes and pseudo-elements in CSS
Pixel Perfect layout
Adaptation with Bootstrap
Practice. Project adaptation. Part 1
Practice. Project adaptation. Part 2
Local links and favicons
UX. We are finalizing the little things
We publish the site on the Internet. Domain. Hosting. GitHub Pages and cache reset”
Final module test

Module 3. Necessary technologies for a web developer and advanced practice

Why do we need this module
Git version control system and GitHub service
How to work with GitHub from different computers, gitignore and Git Kraken
Gulp Task Scheduler
BEM methodology
Practice. Create a new project using Gulp, BEM…
If pictures don’t work for you
Forms on websites
Material Fixation Test
Getting to know the JavaScript programming language
How can you learn JavaScript?
Practice. We create a slider on the site. Slick slider
We create interactive maps on the website
Practice. Creating modal windows on the site
Form Validation
Mask for entering a number on the website
Local servers
Practice. Sending emails from the site
If you have an error when submitting the form
Smooth scrolling on links and the “up” element”
Animations on websites using CSS3
Libraries for working with animations
About updates and animate.css
Site validation
We upload the site to real hosting. Setting up a domain, what is FTP and SSL
Optimizing site loading speed, finalizing gulpfile
Material Fixation Test

Student Ratings & Reviews

No Review Yet