About this Course
This course is for beginners that want to learn how to build responsive websites and user interfaces with modern HTML5 and CSS3 technologies like Flexbox and CSS Grid etc. This course includes hours of both learning & studying sections along with real life projects.
The first few sections are tailored for beginners so even if you have never built anything before, you will learn all of the basics. As if, after finishing this course, you will know exactly how to build a beautiful, professional
But what if you want to build a completely different website? Well, no problem! I designed the course curriculum with exactly this goal: to enable you to design and build any website that you can think of, not just copy the course project.
We'll take you step-by-step through engaging assignments & practices to teach you everything you need to know to become a successful web designer.
What Will I Learn?
-
HTML5 Semantic Layout & CSS Fundamentals
-
Learn professional developer best practices.
-
Modern, semantic and accessible HTML5
-
How to plan, sketch, design, build, test, and optimize a professional website
-
How to use common components and layout patterns for professional website design and development
-
How to find and use free design assets such as images, fonts, and icons
-
Design and build a stunning real-world project for your portfolio from scratch
-
Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
-
A web design framework with easy-to-use rules and guidelines to design eye-catching websites
-
How to make websites work on every possible mobile device (responsive design)
-
Developer skills such as reading documentation, debugging, and using professional tools
-
Learn the latest frameworks and technologies, including Javascript ES6, Bootstrap 5
Course Details
- Introduction to Web Design
- Static Vs Dynamic Website.
- What is wireframing.
- Handsketch & Wireframing.
- Wireframing tools.
- Story Board (How to think).
- Landscape Design
- Course module overview.
- Project: Guided by the trainer.
- Website Designing tools.
- IDE vs Code editor.
- Environment setup.
- HTML & Browsers.
- Fill extension.
- Creating a file.
- Arranging files and making a startup package.
- Project: Guided by the trainer.
- HTML Syntax.
- Head & Body Section.
- Basic tags.
- HTML Elements & Attributes.
- Commenting in HTML.
- List items in HTML
- Project: Guided by the trainer.
- What is table.
- Table Head and Body Contents.
- Attributes of table.
- Table row and column.
- Layout with table.
- Introduction to form.
- From elements.
- input typed and attributes.
- From controls.
- From arrangement and decoration.
- Project: Guided by the trainer
- Different types of image in HTML.
- I frame in HTML.
- Audio and Video controlling.
- Embedded video from YouTube.
- Gif animation embedded.
- HTML Review.
- Project: Creating a webpage where image, audio, and video and gif animation will embedded.
- Introduction to CSS (Cascading style sheet).
- Syntax of CSS
- How to link CSS.
- Important property of CSS. Inline,Internal,External
- Layout concept in CSS.
- Project: Guided by the trainer
- Introduction Ti Selectors.
- Id Vs Class.
- Attribute selectors.
- Child And Adjacent Selectors.
- Selectors Grouping.
- Project: Guided by the trainer.
- List styling.
- Creating menu in css.
- Styling text.
- Working with web fonts and icons.
- Styling fonts and icons.
- Input box styling.
- Project: Creating a menu with icons. Styling text and fonts.
- Introduction to CSS layout.
- Floats.
- Positioning.
- Project: Guided by the trainer
- Practical positional example.
- Flexbox.
- Grids.
- Project: Guided by the trainer.
- Introduction to lovable css .
- Border and rounded corners.
- Working with background.
- Gradient & shadow
- Transition & transformation.
- Project: Guided by the trainer.
- Overview of Responsive Web Design (RWD).
- Working with viewport.
- practicing Media Queries.
- RWD Frameworks.
- Transition & transformation.
- Project: Guided by the trainer.
- Introduction to Bootstrap Framework. (BS)
- How to install bootstrap.
- Great grid system.
- Understanding device screen size.
- Rs table.
- Bs form.
- BS button.
- BS Image responsive.
- Project: Guided by the trainer.
- BS Modal.
- BS Scrollspy.
- BS Tab & tooltip .
- BS Carousel.
- BS Accordion.
- Project: Guided by the trainer.
- BS Alerts.
- BS Card.
- BS jumbotron.
- BS Navs.
- BS Navbar.
- Project: Guided by the trainer.
- What is Photoshop?
- Basic concept of Photoshop.
- How to use Photoshop tools?
- PSD fonts, color and layer concept.
- Image slicing in Photoshop.
- PSD fonts
- PSD to HTML converting techniques.
- Project: Guided by the trainer.
- Converting Portfolio PSD template to HTML.
- Converting Multipurpose Business PSD template to HTML.
- Introduction to JavaScript (JS)?
- What can’t you do with JavaScript?
- JS basic syntax?
- Variable in JS.
- Project: Playing with JavaScript syntax.
- Operator, Data type and Functions in JS.
- Commenting in JS
- PSD to HTML converting techniques.
- Project: Playing with JavaScript syntax
- Array in JS
- Concept of Objects.
- Switch in JS.
- Loop: for loop, while loop, do while loop.
- Project: Guided by the trainer.
- JQuery Introduction?
- JQuery Selectors?
- JQuary and DOM.
- JQuery and Event.
- Project: Guided by the trainer
- Introduction to JQuery effects.
- Hode, Show, Fade, Slide in JQuery?
- Animation in JQuery.
- Slider in JQuery.
- Using Plugings in JQuery.
- Project: Guided by the trainer.
- Introduction to Fiverr.
- How to create a fiverr account?
- Final Exam.
- Gigs setting techniques.
- Buyer request.
- Overall Review Class
- Discuss on Project
- Opening a fiver account.
Related Course
Web Development
Become a Certified HTML, CSS, JavaScript Web Developer
Graphics Design
Professional creative graphics Design CourseMarket Place
-
Freelancer
-
Upwork
-
Fiverr
