Kick Starter - Introduction to HTML, CSS
Comprehensive Course on How to create websites Learn to create websites the complete front end web developer course
Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes CSS Bootstrap
- Course Duration: 2 month / 8 Weeks
- Registeration Fee: 1,000 PKR
- Course Fee: 38,000 PKR
- Institution: The DevTech
- Level: Intermediate
- Certificate of completion
What you Will Learn
- Become a modern and confident HTML and CSS developer, no prior knowledge needed!
- Design and build a stunning real-world project for your portfolio from scratch
- Modern, semantic and accessible HTML5
- Modern CSS (previous CSS3), including CSS Grid for layout
- Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
- A web design framework with easy-to-use rules and guidelines to design eye-catching websites
- How to plan, sketch, design, build, test, and optimize a professional website
- How to make websites work on every possible mobile device (responsive design)
- How to use common components and layout patterns for professional website design and development
- Developer skills such as reading documentation, debugging, and using professional tools
- How to find and use free design assets such as images, fonts, and icons
- Practice your skills with 10+ challenges (solutions included)
Requirements
- No coding or design experience necessary
- Any computer works — Windows, macOS or Linux
- You don’t need to buy any software — we will use the best free code editor in the world
Get Your Self Registered with this Course
Please fill the form Below to get registeration of this Course.
Course Detail
This Course will teach you HTML, CSS, Bootstrap and web design, all by building the stunning website that you just saw, step-by-step.
So, after finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website, by following a 7-step process. And it will even look great on any computer, tablet, and smartphone.
So, in order to become a confident and independent developer, capable of building your own websites in the future, you will learn:
- How to design beautiful websites, by learning a web design framework we created just for this course. It consists of easy-to-use guidelines for design aspects like typography, colors, images, spacing, and more (this is like a small standalone course!).
- How to use well-established website components and layout patterns in order to come up with professional-looking designs
- How to make any website work on any mobile device, no matter the design and layout (responsive design)
- How to use the 7 steps of building a professional website in practice: planning, sketching, designing, building, testing, optimizing, and launching
- How to find and use free design assets such as images, fonts, and icons
- Important developer skills such as reading documentation, fixing code errors on your own, and using professional web development tools
HTML Fundamentals
- Introduction to HTML
- HTML Document Structure
- Text Elements
- More Text Elements: Lists
- Images and Attributes
- Hyperlinks
- Structuring our Page
- A Note on Semantic HTML
CSS Fundamentals
- Introduction to CSS
- Inline, Internal and External CSS
- Combining Selectors
- Class and ID Selectors
- Working With Colors
- Pseudo-classes
- Styling Hyperlinks
- Using Chrome DevTools
- Conflicts Between Selectors
- Inheritance and the Universal Selector
- Using Margins and Paddings
- Centering our Page
- Googling and Reading Documentation
- Debugging and Asking Questions
Layouts: Floats, Flexbox, and CSS Grid Fundamentals
- The 3 Ways of Building Layouts
- Using Floats
- Clearing Floats
- Building a Simple Float Layout
- box-sizing: border-box
- Introduction to CSS Grid
- A CSS Grid Overview
- Sizing Grid Columns and Rows
- Placing and Spanning Grid Items
- Aligning Grid Items and Tracks
- Building a Simple CSS Grid Layout
Web Design Rules and Framework
- Project Overview
- Overview of Web Design and Website Personalities
Web Design Rules #1: Typography
- Implementing Typography
- Web Design Rules #2: Colors
- Implementing Colors
- Web Design Rules #3: Images and Illustrations
- Web Design Rules #4: Icons
- Implementing Icons
- Web Design Rules #5: Shadows
- Implementing Shadows
- Web Design Rules #6: Border-radius
- Implementing Border-radius
- Web Design Rules #7: Whitespace
- Web Design Rules #8: User Experience (UX)
- The Website-Personalities-Framework
- The Missing Piece: Steal Like An Artist!
Components and Layout Patterns
- Web Design Rules #10 - Part 1: Elements and Components
- Building an Accordion Component
- Building a Table Component
- Building a Hero Section
- Building a Web Application Layout
Project – Setup and Desktop Version
- The 7 Steps to a Great Website
- Defining and Planning the Project
- Sketching Initial Layout Ideas
- First Design and Development Steps
- Responsive Design Principles
- Building the Header
- Building the Navigation
- Building the How-It-Works Section
- Building the Featured-In Section
- Building the Meals Section
- Building the Testimonials Section
- Building the Pricing Section
- Building the Features Part
- Building the Call-To-Action Section
- Building the Footer
- Adding Favicon and Meta Description
