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
everything is open 24/7
Even better since you can see and do anything instantly!
There is always something new to see, learn and do.
This is just like the internet, you have a portal that can
transport you to anywhere almost instantly within the
city.
Get the Course Here Web Dev Course
To find something in this massive city you need a guide. Just like
on the web you need a starting point and a way to find the path
to what you are searching for.
Going to Google Home page and typing in search content, Google
then responds with its vast knowledge of all the billions of
locations, returning what it thinks are the best results for your
query.
With over 2 billion websites and growing, each with many pages
you could have billions of possible locations that match the
search query.
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
to 15. Perfect to track projects and share progress with
clients.
https://trello.com/en great way to keep on track.
Connect with others - communicate https://slack.com/
Free for up to 10K of your team's most recent messages
Use Skype or Google hangouts
https://www.skype.com/en/
Get the Course Here Web Dev Course
JSON storage data file - http://myjson.com/
Draw.io - https://www.draw.io/ plan your design and share
Google Suite - Sharing of docs, sheets, pdfs, and everything you
can think of.
API development tool - https://www.getpostman.com/
Draw something - https://www.gimp.org/ or
https://inkscape.org/ or https://www.canva.com/
Share slides - post slides - https://www.slideshare.net/
Needs free images - https://pixabay.com/
https://www.pexels.com/ https://www.freepik.com/
https://www.flaticon.com/ https://unsplash.com/
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/
Grow
Linkedin Profile - Great way to connect to others
professionally.
Create a website - Serves as a base for your online
presence, you can showcase your top work and provide
a way to contact you.
Groups -
Join groups on social media, contribute content and
share ideas. Post to github, stackoverflow and other
popular sites.
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
Your next gig - some of the sites you can check out
https://stackoverflow.com/jobs
https://codepen.io/jobs/
https://www.upwork.com/
https://www.freelancer.com/
https://www.fiverr.com/
https://www.kijiji.ca/
https://www.toptal.com/
https://www.craigslist.org/about/sites
https://www.peopleperhour.com/
Continue to work on projects you are passionate about,
volunteer, practice coding with fun pet projects, challenge
yourself to take on new tasks.
More Useful and interesting Resources
Git Hosts - Collaborate and get Source Code
GitHub - https://github.com/
GitLab - https://about.gitlab.com/
BitBucket - https://bitbucket.org/
Past websites
https://archive.org/web/ - wayback machine shows
what a website use to look like. Great way to see new
trends and website changes. Also see code from the
past.
One of the first websites http://info.cern.ch/
Hosted Libraries
https://developers.google.com/speed/libraries
Get the Course Here Web Dev Course
FTP Clients -
Filezilla https://filezilla-project.org/
CoreFTP Windows http://www.coreftp.com/download.html
CyberDuck for Mac https://cyberduck.io/
JavaScript -
https://github.com/rwaldron/idiomatic.js - Guidelines
https://babeljs.io/ - JavaScript Compiler
https://nodejs.org/en/ - Node
CSS -
https://flexboxfroggy.com/ - learn flexbox game
Color Palettes - https://colorhunt.co/
Placeholder Text -
https://loremipsum.io/
https://placeholder.com/
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