WEB DEVELOPMENT PROGRAMME
what is web-development?
Web development is the work involved in developing a Web site for the Internet (World
Wide Web) or an
intranet (a private network). Web development can range from developing a simple
single
static page of
plain text to complex web applications, electronic businesses, and social network services. A more
comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web
design, Web content development, client liaison, client-side/server-side scripting, Web server and
network
security configuration, and e-commerce development.
Among Web professionals, "Web development" usually refers to the main non-design
aspects of building Web
sites: writing markup and coding. Web development may use content management systems
(CMS)
to make
content changes easier and available with basic technical skills.
For larger organizations and businesses, Web development teams can consist of hundreds of people (Web
developers) and follow standard methods like Agile methodologies while developing Web sites. Smaller
organizations may only require a single permanent or contracting developer, or secondary assignment to
related job positions such as a graphic designer or information systems technician. Web
development may be a
collaborative effort between departments rather than the domain of a designated department. There are
three
kinds of Web developer specialization: front-end developer, back-end developer,
and full-stack developer.
Front-end developers are responsible for behavior and visuals that run in the user browser, while
back-end
developers deal with the servers.
Front-end development
Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.
Three main languages and building blocks of the website
Hyper-Text Mark-up Language
Hyper Text Markup Language (HTML) is the backbone of any website development process, without which a web page does not exist. Hypertext means that text has links, termed hyperlinks, embedded in it. When a user clicks on a word or a phrase that has a hyperlink, it will bring another web-page. A markup language indicates text can be turned into images, links, and other representations. It is the HTML code that provides an overall framework of how the site will look. The latest version of HTML is called HTML5.HTML can embed programs written in a scripting language such as JavaScript, affects the behavior and content of web pages.
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) controls the presentation aspect of the site and allows your site to have its own unique look. It does this by maintaining style sheets which sit on top of other style rules and are triggered based on other inputs, such as device screen size and resolution.
JavaScript
JavaScript is an event-based imperative programming language (as opposed to HTML's declarative language model) that is used to transform a static HTML page into a dynamic interface. JavaScript code can use the Document Object Model (DOM), provided by the HTML standard, to manipulate a web page in response to events, like user input.
Web-development Learning map
Focal Languages To learn
Frameworks and Libraries
What's a frame-work or library?
A framework is the basic structure of something. It's a set of ideas or facts that provide support for something For non-technical background people; framework is a bunch of libraries, tools that do common task in web development and it aims to ease the common activities which have to perform in web development. Using appropriate framework is essential for a developer because it saves an important time and efforts for building an app. Most of the applications have a common set of functionality such as handling session data validation etc. and web framework prevent a developer from re-writing every time a same code to create a web app.. In the case of business problems, a framework creates the basic structure that gives focus and support to the problem you're trying to solve.Just as Web-development, A framework or library is a place designed to make your life easier, you don't get to build things from scratch, they provide re-usable codes developer's can use(preferably) to get their various development done much more faster.
Important Frameworks
BACK-END DEVELOPMENT(If Interested)
Back end Development refers to the server side of development where you are primarily focused on how the site works. ... This type of web development usually consists of three parts: a server, an application, and a database. Code written by back end developers is what communicates the database information to the browser.
Focal-Languages to Learn
Learning
please follow these steps accordinly in the order they are, by watching the video according to their numbers.The numbers are there to guide you. Just have fun while learning and practising!
Start with HTML
A video on setting up your environment
HTML & CSS Books(by John Duckett)
Please this is a must read book, to improve your skills and aquire more knowledge on HTML amd CSS
Your Journey Begins
.png)
3rd
Back-up tutorial
Hope you had fun with the last two videos. Please continue following their lectures and teachig, and make sure you always code once they start coding. Don't just take this as a series of videos. Your final Video on HTML!.
.png)
2nd
Back-up tutorial
Please follow their lectures and teaching's too, and make sure you always code once they start coding. Don't just take this as a series of videos. Continue with this!.
.png)
1st
Main-Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Start with this!.
We move to CSS
.png)
3rd
Back-up tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Well-done for reaching here. Let's continue!.
.png)
2nd
Back-up tutorial
Please follow their lectures and teaching's too, and make sure you always code once they start coding. Don't just take this as a series of videos. If you don't understand you can always go back Start with this!.
.png)
1st
Main tutorial
Welcome dear!, You have advanced a little, let's start this coding journey . Don't just take this as a series of videos. Start with this!.
More About CSS Grids and Flex-box
1st
Main Tutorial
Please follow their lectures and teaching's. The purpose of this video is to build your strength on grids and flex-box. Don't just take this as a series of videos. Continue with this!.
.png)
2nd
Main Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. let's continue with this!.
.png)
3rd
Back-up Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Start with this!.
Bootstrap Learning, Journey Continues!
.png)
1st
Main Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Well-done!.
.png)
2nd
Back-up Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Let's continue!.
.png)
3rd
Back-up Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Wonderful!, well done for making it this far..
Preprocessor & Version-Control Learning
.png)
1st
Main Tutorial
Good work done so far!, lets follow up with this preprocessor, so you can be able to work with your terminal.Start with this
.png)
3rd
Back-up Tutorial
Welcome!, hope you are enjoying your journey so far, Let's improve our css so vastly by learning saas(Synthetic and awesome styles sheet). start with this.
2nd
Back-up Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Start with this!.
Java-Script Learning
.png)
3rd
Back-up Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Continue with this!.Welldone
.png)
2nd
Back-up tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. continue with this!.
.png)
1st
Main Tutorial
Welcome to java-script. Follow their lectures and teaching's, and make sure you always code once they start coding. Start with this!. Coding is fun right?
Java-Script library with an additional grid content
.png)
3rd
Back-up Tutorial
Please follow their lectures and teaching's, and make sure you always code once they start coding. Don't just take this as a series of videos. Continue with this!.Welldone
.png)
2nd
Main Tutorial
Welcome to java-script. Follow their lectures and teaching's, and make sure you always code once they start coding. Start with this!. Coding is fun right?
1st
Back-up Tutorial
Please follow these lectures and teaching's, and make sure you always code once they start coding. The purpose of this course is to advance your knowlegde of grids.Review this, congrats in advance!.
Additional and updated content which covers all previous sections & intro to UI/UX design with figma
.png)
4th
Java-Script Lecture(Deeper-Dive)
Please follow these lectures, teaching's and enjoy coding. The purpose of this course is to refresh your knowlegde on Java-Script. Endeavour to, do all the projects with the tutor. Congrats in advance!.
.png)
2nd
Intro to UI/UX part-1
Welcome to Figma. Follow their lectures and teaching's, make sure you always code and practise once they start building. Start with this!. Figma is fun right?
.png)
3rd
Intro to UI/UX part-2(Deep-Diving)
Please follow their lectures and teaching's from the last one immediately. Don't just take this as a series of videos. Continue with this!. Welldone.
.png)
ist
Responsive Design
Please follow these lectures and teaching's. Well-done for getting this far too!. This is a content to strenghten your responsive design with your knowledge on the previous CSS lectures you have undergone. Congrats in advance!.
Very Important Practise Works
# Basic HTML practices.
Over-View
- Practsie of html layouts
- basic linking, mostly all about practising all the semantic elements you have learnt so far.
- Practise of the use of headers, paragraphs to give good structure to your work
- Practise of forms(Very important because they are widely used by most websites and the entire internet.)
- Practise downloading of html files and transffering them to your Local computer
The link to your practise works is located here → click here
The link to your practice tools is located here, please use those tools, they will really help → click here
# Basic and complex CSS practices.
Over-View
- Practices proper use of color
- Practise proper use of font sizes, appropraite fonts use to improve layout of website.
- Practise complex Lay-outs with css flex-box and grids
- Practise hover-effects, practise css animations through transitions properties and transformation properties
- Get to Use bootstrap for harder-Works
- You can try your best to re-clone all the works your-self in a differnt look,just ,make sure you put all that's learnt to practise