🌐 Public

Web design and development fundamentals

By amit mojumder

Introduction

This is an one stop learning curve from 100% scratch. People who want to build their career by self study in web design industry, this is a must follow road map for those individuals.

amit mojumder — Designer, Developer & Brand Consultant

Added by amit mojumder: “Step Seven: Join Web Engineering 2 Topics covered: Each chapter presents the following content through a series of instructional videos, screencasts and online interactive exercises. You will also work in small groups, applying and testing practical examples of key technical aspects in Web development. Chapter 11: Starter Kit: Tools for the HTML5 App in the Cloud Chapter 12: REST Architectural Style for Mobile Web Applications Chapter 13: Interactive Exercises with JavaScript at Codecademy Chapter 14: Single-Page Applications with AJAX, JSON, and REST APIs Chapter 15: Overview of HTML5 and its JavaScript APIs Chapter 16: Exercises with the HTML5 Mobile Application Framework Sencha Touch Chapter 17: Introduction to NoSQL Databases for Web Apps Chapter 18: Full-Stack JavaScript: Design and Implementation of a WebSocket App Chapter 19: Preparing an HTML5 App for App Stores Chapter 20: Screen Casting Web Apps for User Documentation Good luck and see u there.

1 Web Engineering II: Developing Mobile HTML5 Apps

Become familiar with the challenges that come with the planning, development, testing, and maintenance of HTML5 apps. Web Engineering takes you through the concepts, methods, techniques, and tools needed for systematically developing websites and Web applications. In Web Engineering I "Basics of Web Development" we learned how to create a professional website, and now we take a step further as

Added by amit mojumder: “Step 6: Join Web Engineering - 01 A free course from iVersity teaching the 100% enginnering way to develop modern websites using some top notch cutting edge tool. Topics covered: You will learn the following content using instructional videos, screencasts, and online interactive exercises and test the technical aspects with examples from practice. Chapter 1: Introduction to the MOOC "Web Engineering" Chapter 2: Starter Kit: tools for the website in the cloud Chapter 3: History of the Internet: from ARPANET via HTTP to the cloud Chapter 4: HTTP: Hypertext Transfer Protocol Chapter 5: Interactive Internship: HTML / CSS Chapter 6: Semantic markup, Unicode & UTF-8, (X) HTML-Standards Chapter 7: Digital Accessibility Chapter 8: Web Design | Web Usability Chapter 9: website analysis and optimization Chapter 10: Security risks of a site Good luch and see you there.

2 Web-Engineering I: Grundlagen der Web-Entwicklung

Lernen Sie die Herausforderungen bei Planung, Entwicklung, Test und Wartung von Websites kennen. Sie erwerben die Kompetenz, W3C-konforme, sichere und performante Webpräsenzen zu entwickeln. „Web-Engineering" bietet Konzepte, Methoden, Techniken und Werkzeuge für die systematische Entwicklung von Websites und Web-Applikationen. Sie üben online den Umgang mit der Infrastruktur und den Werkzeugen, die für die Entwicklung und Wartung einer mit Twitter Bootstrap

Added by amit mojumder: “Tools: As a modern web designer you need to you need to include a substantial amount of tools for your development and workflow. Here is a comprehensive list of tools to give you a good idea: 01. Adobe Photoshop or Adobe Illustrator or Gimp (Gimp is open source and free image editing tool : http://www.gimp.org/ ) 02. Code Editor: Sublime Text 2, or Notepad++ or Dreamweaver or Coda (for Mac). There is a new open source awesome text/code editor called Brackets ( http://download.brackets.io/ ) 03. XAMPP/WAMP/MAMP - Local server for PHP/MySQL based development. You can download for free from here: http://www.apachefriends.org/ 04. GitHub / BitBucket or SubVersion for issue tracking and version controlling of your codes. 05. Dropbox.com for large file sharing. 06. Google Drive for Word/Excel/Powerpoint/forms doment with online free storage. 07. Chrome Dev Tools - For live debugging of your code on local or remote machine. 08. Multiple Chrome or Firefox extension installation for advanced browsing as a web designer. Here is 2 lists of Chrome extension for web designers: 1. http://goo.gl/pvUyI 2. http://goo.gl/mG9sU 09. Multiple browser installation on your working machine. At least 5 browser - Chrome, Safari, IE, Firefox and opera, you have to install to test every web page's performance and browser compatibility. ::::: Friends & Community :::::::::::::::::::::::::::::::::::::::::::::: As a modern web designer you will be using a lot of cutting edge tools and you certainly need to understand who is your friend in your project development project. 01. Google: is your 1st friend in any case. Ask anything you want to know, you will get tons of link. 02. If you get stuck in a certain point of a project, just ask question here: http://stackoverflow.com/ and you will get honest and free consultancy from the top notch developer from around the world. This is how web design community works. 03. Join multiple forums and keep checking them on a regular basis. Here are some very popular forums: CSS -Tricks Forum, SitePoint forum 04. Blogs to follow regularly to keep you up to date on web designing: http://goo.gl/DvMDIs 05. Use a RSS feed to gather web design and development related articles and try to read at least 1 hour beside your professional activities. http://goo.gl/sbGK 06. Follow renowned designs and developers on twitter: http://goo.gl/uOxV 07. If you need inspiration, idea just visit the listed webdesign related galleries here: http://goo.gl/cXnR

3 Step - Five: Know your tools, friends and community

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages. ( more...) This is the official GIMP web site. It contains information about downloading, installing, using, and enhancing it. This site also serves as a

Added by amit mojumder: “Step - Four: Know your profession and choose specific niche for further specialization and building a successful webdesign based career. By now, you know the basic and some advanced technique of web development and you have proper idea about how web pages works. You also have learned (If you followed Step-2 properly) how to integrate jQuery plugin even if you dont have any knowledge of programming or JavaScript. There are lots of open sourced jQuery plugins for almost every web component like ; slide shows, image rotators, galleries, tool tips, accordion, tabs etc. You dont necessarily master JavsScript or jQuery programming in order to use all those as soon as you understand how to use them on your web pages. But if you want to learn JavsScript or jQuery to develop custom plugins for your projects, thats really great as there are tons of free and premium tutorials available for you to jump in. In this point you need to understand and decide which path to choose further career development as a web designer professional since now a days WebDesign is a really really big topics and its really hard to master everything together. (For A-Z web development mastery you may have to consider investing time equivalent to a graduation (4 years formal) and a post graduation (2 years) or even more. Because, there are hell lot of things to learn if you dont want to be a cheap template based web developer. Here is a comprehensive list of NICHE web development profession: UI designer: >> Only Adobe Photoshop or Adobe Fireworks >> Strong design and color sense. >> Principal of design, typography, composition and other basic rules. >> Advanced knowledge of web usability Front-end developer: >> Only converts designed PSD/AI/FW UI intocross browser HTML/CSS. So you just need to learn photoshop or equivalent image editing software (a bit / not advanced learning required ), HTML, CSS. >> Usability / user experience >> Semantic rules and best practice convention Front -end Engineer: >> Have to learn PSD to HTML along with JavaScript (Now a days must). >> HTML 5 APIs >> One javaScript framework like angular.js, node.js etc. >> Proper understanding of DOM and DOM manipulation >> Chrome dev tools >> Working knowledge of on page SEO >> Responsive web design >> Version controlling tools like GitHub >> Usability / user experience >> Semantic rules and best practice convention Backend developer: >> Must have to learn HTML and CSS first. >> Then a dynamic programming language like PHP, RUBY, Python etc. >> Different APIs integration techniques >> CMS development or master any one open source CMS like WordPress, Joomla, Drupal, Magento etc. >> Version controlling tools like GitHub Web Engineer: >> HTML/CSS and JavaScript must >> HTML 5 APIs >> One javaScript framework like angular.js, node.js etc. >> Then a dynamic programming language like PHP, RUBY, Python etc. >> CMS development or master any one open source CMS like WordPress, Joomla, Drupal, Magento etc. >> Proper understanding of DOM and DOM manipulation >> Chrome dev tools >> Working knowledge of on page SEO >> Website security measuring using various tools and programming. >> Website performance measuring skills >> Responsive design techniques >> Web application development techniques >> Version controlling tools like GitHub, Bit bucket, SubVersion etc. >> Usability / user experience >> Semantic rules and best practice convention >> Clear knowledge of how browser works and detailed knowledge of different browser engines like IE, Chrome, Firefox, Opera and Safari at least. Social media manager or SEO Expert: >> Basic HTML >> Fundamentals of on page and off page SEO >> All major social media and how to use them in order to marketing a product. >> Advanced SEO >> Google web masters tools >> Google keywords tool >> Google analytic tools >> Google adwords for maintaining campaigns >> Email marketing Content manager: >> Basic HTML >> Content writing / copywriter Cloud Architect: >> HTML/CSS >> A dynamic language like PHP or Python >> Basic networking >> Amazon web services >> Google cloud services This is so far a comprehensive guide to give you an idea of the diversity of the web design profession.

4 Step - Four: Know your profession and choose specific niche for further specialization and building a successful webdesign based career.

Added by amit mojumder: “The whole standard reference fr real world HTML. By now, it's really crucial that you know or understand some fundamental HTML theories. Here are the theory topics: >> HTML DocType - what to do with that? >> What is a HTML element? >> What is the blobk level element? or even what's the inline element? >> What is the HTML box model? >> What is the HTML REGULAR FLOW? How you can manipulate the HTML normal flow by using some CSS tricks in order to achieve a desired layout? >> What is the HTML elements parent - sibling relationship? >> What is the HTML5 semantic? >> Basics of using HTML tags for on page SEO optimization. >> How to use H1 to H6 tags in a page in order to make the page super SEO friendly? >> What is HTML comment? How will you describe briefly an HTML element in your layout as a reference for other developers so that they would understand your markup easily? >> What about CSS concepts? Give a shot here: http://reference.sitepoint.com/css >> You clearly understand the CSS positioning? >> You know how FLOAT works? Can you clear a float? >> How the positioning and float inherited from parent to child or even siblings? >> How about CSS vendor prefixes? >> What is CSS sprites? >> Whats the general order of a CSS selector affect on an element.

5 Step - Three: Review of your HTML / CSS skills and Knowledge

Added by amit mojumder: “This is called "Learning by Doing". Complete the full course step by step. HTML and CSS may seem very easy to learn, but the fact is when you are working in a large scale project HTML/CSS may become very tricky. Also for new comers, HTML may seems simple as they dont practice by writing initially. It is crucial that you build a habit of writing HTML markup. Here comes code academy with some interactive tutorials step by step. Complete the full web development fundamentals. At the end you will be able to develop a valid W3C compliant static website.

6 Step - One: Understanding basic HTML / CSS

Added by amit mojumder: “Ok, by now you know the basics and all the building blocks of a web page layout. Now you need to go further to achieve the skill to convert (translate) a visual page designed in Photoshop or other graphic tools, into HTML/CSS pixel by pixel. If you want to learn how to design page layout, that's another thing and out of our guideline scope. Designs are created inside Photoshop or Fireworks or other tools, requires BROWSER ready conversion. You will be using the PSD design as your visual guide and make the layout and other building blocks by using your freshly learned HTML and CSS techniques. Take your time and get comfortable about finishing those practice tutorials. Those are all hand picked highest standard tuts, so you can learn most significant professional tricks, real world web layout problems, cross browser issues and most importantly INDUSTRY BEST PRACTICE CONVENTION. After successfully finishing this tuts you will not just be a copy/paste cheap web professional, instead you will be in a path of being world's top class web professionals. All The best.

7 Step - Two: Real world top class HTML/CSS project to learn faster.

braino

Freshman

  • 0 Playlists
  • 0 Followers

rashmi_pradhan

Freshman

  • 0 Playlists
  • 0 Followers

edwina

Freshman

  • 11 Playlists
  • 1 Followers

Jakub Dziedzic

Freshman

  • 0 Playlists
  • 0 Followers

hcaltiner

Freshman

  • 0 Playlists
  • 0 Followers

John Wilton Williams

Visit my personal site at johnyux.com

  • 0 Playlists
  • 0 Followers

Patrick M. Ndifon II

Freshman

  • 0 Playlists
  • 0 Followers

Beanez

Freshman

  • 0 Playlists
  • 0 Followers

Claire Tollerton

Freshman

  • 0 Playlists
  • 0 Followers

NinjaPandaEgg

Freshman

  • 0 Playlists
  • 0 Followers

abdallah alshaer

big ambition and crazy dream

  • 0 Playlists
  • 0 Followers

Mudit saxena

Freshman

  • 0 Playlists
  • 0 Followers

Corentin Clichy

Curious Internet/startup lover!

  • 0 Playlists
  • 0 Followers

kellymccann91

Freshman

  • 0 Playlists
  • 0 Followers

ilhan89bln

Freshman

  • 0 Playlists
  • 0 Followers

Jessica Crees

Freshman

  • 0 Playlists
  • 0 Followers

Роман «Nergal Sham» Миронов

Захватить весь мир!

  • 0 Playlists
  • 0 Followers

Albert Mark Gertskis

Freshman

  • 0 Playlists
  • 0 Followers

Abu Hauri Asy-Syifa Falisha

Freshman

  • 0 Playlists
  • 0 Followers

Abhinay Balusu

Foodie, Technology Enthusiast

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?