About This Course
Want to learn how to code? This is the perfect place to learn how to confidently make your own websites from scratch. It's designed for absolute beginners and those who know some code but want to develop confidence and understanding by building real sites.
Learning Objectives
- Create beautiful websites using HTML, CSS + Javascript
- Make mobile-friendly websites with responsive design
- Code prototypes that include scrolling and animation techniques
- Find + work with the best Javascript libraries
- Fix your own code using Chrome's developer tools
- Work effectively with other web designers and coders
Prerequisites
NA
Target Audience
Engineers, Business Development, Finance, Marketing Professionals, Software, and IT professionals.
Training Outline
1. Basic Sites
- What is front-end development?
- History of the internet, languages & making websites
- How to work with HTML & CSS
- Creating files, understanding structure & terms
- Basic web design
- Type, color, hover states & transitions
- Image treatments
- Background images, positioning & parallax effects
2. Single-column Sites
Simple layouts
- Web fonts & image sources, embedding content, breaking down your favorite sites
- Using resources
- Advanced layout tags, margins & getting a site online
- Mobile-friendly websites
- Media queries, flexible and responsive widths & testing on devices
3. Multi-column Sites
- Complex layouts
- Floats and clears, fixed headers, CSS grids, working with grids & mixed layouts
- Responsiveness
- Responsive layouts, hiding elements & debugging
4. Varied Layout Sites
- CSS Display
- Changing HTML tag layouts with block, inline & inline-block displays
- Positions and floating
- Using absolute and relative positions & vertical alignment
- Flexbox
- How to use the brand new flexbox layout to make more complex and intricate layouts
5. Mixed Width Sites
- Advanced positioning & transitions
- Using the layout techniques from yesterday’s
- Varied Layout in a completely different layout
- Understanding Javascript
- What is Javascript, how it works with HTML & CSS
- Adding Javascript
- Storing data, running tasks, adding events & basic commands
6. Overlaps
- How to use jQuery
- What is jQuery, selecting tags, manipulating
- HTML and CSS, using events & debugging
- Simple Javascript techniques
- Hamburger menus, parallax scroll, combining
- CSS & Javascript for transitions
- Overlapping CSS layouts
- How to make text effects that overlay other images and text boxes
7. Lightboxes and Parallax
- How to add lightboxes/modals
- Using click events to make content pop out
- Understanding document and window
- How to add Javascript to the whole page and the browser window itself
- Scrolling effects
- How to change the design when the user scrolls that page and how to make progress bars
8. Slideshows and Carousel
- Slideshows
- Creating slideshows, auto-playing with timers & Ajax for dynamically changing content
- Coding in different environments
- Tumblr, Squarespace & Wordpress
- How it all works with back-end
- Ruby on Rails, PHP & Python