Web Development

Fundamentals
Getting started with web pages
https://www.udemy.com/course/web-development-introduction/learn/

Get the Course Here Web Dev Course

 INSTRUCTOR:

LAURENCE SVEKIS
- Over 300 courses in technology and
web applications.
- 20 years of JavaScript web
programming experience
- 500,000+ students across multiple
platforms
- Digital instructor since 2002

READY TO HELP YOU LEARN and

ANSWER ANY questions you may
have.

Course instructor : Laurence Svekis

The Internet
Image a giant city that you can go anywhere, and To find something in this massive city you need a guide. Just like
everything is open 24/7 on the web you need a starting point and a way to find the path
to what you are searching for.
Even better since you can see and do anything instantly!
Going to Google Home page and typing in search content, Google
There is always something new to see, learn and do. then responds with its vast knowledge of all the billions of
This is just like the internet, you have a portal that can locations, returning what it thinks are the best results for your
transport you to anywhere almost instantly within the query.
city. With over 2 billion websites and growing, each with many pages
you could have billions of possible locations that match the
search query.

Get the Course Here Web Dev Course

Browser
Your browser is the program that sits on Your Computer There are standards for the languages but not all browsers
allowing you to have a portal to see the content of the interpret the code 100% the same.

internet. That content is represented by HTML CSS and

JavaScript which the browser interprets and displays for
you.
Your computer is acting as a client retrieving
information from the host computers that serve the
content.

Get the Course Here Web Dev Course

Connecting to other computers - step 1 open browser to Google. Result your browser now has the IP

172.217.12.142 - Google.com
Get IP of any website at https://dnschecker.org/

Get the Course Here Web Dev Course

Connecting to other computers - step 2 connects to server and retrieves content for the IP and page

Once you connect to the server via the IP address it sends the files back to your computer browser to
interpret.

Get the Course Here Web Dev Course

Connecting to other computers - step 2 connects to server and retrieves content for the IP and page

https://www.submarinecablemap.com/ - shows cross ocean cables for network.

https://root-servers.org/ - shows root servers for DNS

Get the Course Here Web Dev Course

File Types Code
HTML - Hypertext Markup Language Provides the JS - JavaScript Responsible for behaviors and what
structure of the webpage. Like framing for a house, lays happens within the house. In the house what the light
out what it should contain. switch does, what happens when you open a door.
CSS - Cascading Style Sheets Styling of the website. Creates interaction and dynamic content.
Painters and decorators of the house. How it appears
and what goes where.

Get the Course Here Web Dev Course

From Server to Browser
The files are sent back to the computer from the server Code inspector - see HTML CSS and JavaScript code!!!!
to the client browser which requested the files from the press Ctrl+U (PC) or ⌥ Option⌘ Command+U (Mac) to display
the source code of any webpage in your browser.
IP address of the server. Files are then displayed to the
user.

Get the Course Here Web Dev Course

Web Developer Editors create the code
Text Editor - used to write code. It depends on you which tools you want to use to write your
Brackets - http://brackets.io/ code. Most come with extensions to extend what you can do
with the editor, change the appearance and style of the content.
Atom - https://atom.io/
Visual Studio - https://code.visualstudio.com/

Online Code Editors - share your Code

CodePen - https://codepen.io/
JSFiddle - https://jsfiddle.net/
JSBin - http://jsbin.com

Browser recommended to develop.

Chrome - https://www.google.com/chrome/
Chrome DevTools -
https://developers.google.com/web/tools/chrome-devt
ools

Get the Course Here Web Dev Course

Web Developer HELP Learn about the code
Everything you need for developers - 1. Create a portfolio to showcase work you do!!!!
https://stackoverflow.com/ 2. Practice coding, doing it over and over again.
3. Challenge yourself all the time, don’t give up as this is
when you learn.
Learn web development :
https://developer.mozilla.org/en-US/docs/Web

HTML - https://dev.w3.org/html5/html-author/
CSS - https://www.w3.org/Style/CSS/
JavaScript -
https://developer.mozilla.org/en-US/docs/Web/JavaScri
pt

Get the Course Here Web Dev Course

Web Developer Useful Tools once you have code
Compare differences -
https://www.diffchecker.com/diff

Inspiration -
https://dribbble.com/shots/popular/web-design
https://codepen.io/

Speed test -
https://developers.google.com/speed/pagespeed/insigh
ts/

Validators -
https://validator.w3.org/
https://jigsaw.w3.org/css-validator/
https://codebeautify.org/jsvalidate
https://jsonlint.com/

Get the Course Here Web Dev Course

Project Tracking and Communication tools
Task tracking - https://asana.com/ free for groups of up JSON storage data file - http://myjson.com/
to 15. Perfect to track projects and share progress with Draw.io - https://www.draw.io/ plan your design and share
Google Suite - Sharing of docs, sheets, pdfs, and everything you
clients.
can think of.
https://trello.com/en great way to keep on track. API development tool - https://www.getpostman.com/
Draw something - https://www.gimp.org/ or
Connect with others - communicate https://slack.com/ https://inkscape.org/ or https://www.canva.com/
Free for up to 10K of your team's most recent messages Share slides - post slides - https://www.slideshare.net/
Needs free images - https://pixabay.com/
https://www.pexels.com/ https://www.freepik.com/
Use Skype or Google hangouts
https://www.flaticon.com/ https://unsplash.com/
https://www.skype.com/en/ Icons https://fontawesome.com/
Framework https://getbootstrap.com/
Package managers - https://www.npmjs.com/
https://yarnpkg.com/lang/en/
Prototyping https://www.figma.com/design/

Get the Course Here Web Dev Course

Grow
Linkedin Profile - Great way to connect to others Your next gig - some of the sites you can check out
professionally. https://stackoverflow.com/jobs
https://codepen.io/jobs/
https://www.upwork.com/
Create a website - Serves as a base for your online https://www.freelancer.com/
presence, you can showcase your top work and provide https://www.fiverr.com/
a way to contact you. https://www.kijiji.ca/
https://www.toptal.com/
https://www.craigslist.org/about/sites
Groups -
https://www.peopleperhour.com/
Join groups on social media, contribute content and
share ideas. Post to github, stackoverflow and other Continue to work on projects you are passionate about,
popular sites. volunteer, practice coding with fun pet projects, challenge
yourself to take on new tasks.
Be ready to share your top relevant work to the job,
make it easy to contact you, be open to connect and
discuss work.

Get the Course Here Web Dev Course

More Useful and interesting Resources
Git Hosts - Collaborate and get Source Code FTP Clients -
GitHub - https://github.com/ Filezilla https://filezilla-project.org/
CoreFTP Windows http://www.coreftp.com/download.html
GitLab - https://about.gitlab.com/
CyberDuck for Mac https://cyberduck.io/
BitBucket - https://bitbucket.org/
JavaScript -
Past websites https://github.com/rwaldron/idiomatic.js - Guidelines
https://archive.org/web/ - wayback machine shows https://babeljs.io/ - JavaScript Compiler
https://nodejs.org/en/ - Node
what a website use to look like. Great way to see new
trends and website changes. Also see code from the
CSS -
past. https://flexboxfroggy.com/ - learn flexbox game
Color Palettes - https://colorhunt.co/
One of the first websites http://info.cern.ch/
Placeholder Text -
https://loremipsum.io/
Hosted Libraries
https://placeholder.com/
https://developers.google.com/speed/libraries

Get the Course Here Web Dev Course

Bonus… More resources
https://devdocs.io/ - Learn code with syntax and
examples
https://www.w3schools.com/ - Resource to learn coding
with examples

Color Generators
Accessibility color contrast checker :
https://webaim.org/resources/contrastchecker/
The super fast color schemes generator! :
http://coolors.co
Color encyclopedia : http://www.colorhexa.com
Color Wheel : http://kuler.adobe.com

Get the Course Here Web Dev Course

 Thank you for your support
If you have any questions or comments please let me
know. I’m always happy to hear from you!!!
Find out more about my courses at http://discoveryvip.com/

Course instructor : Laurence Svekis -

providing online training to over
500,000 students across hundreds of
courses and many platforms.

Get the Course Here Web Dev Course