/wdg/ - Web Development General

Smug Edition
>Free beginner resources to get started with HTML, CSS, JavaScript and PHP
eloquentjavascript.net/Eloquent_JavaScript.pdf - A modern introduction to JavaScript
developer.mozilla.org/en-US/docs/Learn - A good starting point to learn about web dev fundamentals
javascript.info/ - Quite a good JS tutorial
freecodecamp.org - Curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
theodinproject.com - Curriculum including HTML/CSS/JS, and either Ruby on Rails / SQL, or Node.js / MongoDB
fullstackopen.com/en/ - Requires you to have basic web dev, db and git knowledge
flexboxfroggy.com/ and cssgridgarden.com/ - Learn flex/grid in CSS
phptherightway.com/ - A decent PHP resource
phptutorial.net - A PHP tutorial

>List of design resources
github.com/bradtraversy/design-resources-for-developers

>All useful documentation in one place
devdocs.io

>Need help? Create an example and post the link
jsfiddle.net - if you need help with HTML/CSS/JS
3v4l.org - if you need help with PHP/HackLang
codesandbox.io - if you need help with React/Angular/Vue

We have own website: wdg.one
Submit your project progress updates using the following format in your posts (the scraper will pick it up):
:: my-project-title ::
dev:: user
tools:: node, react, etc
link:: my.website.com
repo:: github.com/user/repo
progress:: Lorem ipsum dolor sit amet


Previous :

Attached: smug.jpg (565x720, 59.01K)

Other urls found in this thread:

reactrouter.com/docs/en/v6/getting-started/concepts#layout-routes
twitter.com/NSFWRedditImage

Does she Noa lot about web dev?

Attached: n0a.jpg (715x1030, 380.16K)

yes

stop posting these anime character you fucking trannies

Is there a way to force websites on mobile to be only viewable on landscape mode?

you mean for debugging purposes or for every joe accessing the website?>

you can maybe rotate it with CSS when it's in portrait so it looks weird and keep it normal when it's landscape mode

Different user, but I have a related question:
Is there a way to have break points work based on the windows aspect ratio rather than width? I know it would be easy with JS, but can it be done with CSS?

for ever joe when accessing

you mean with @media in css? take a look at the website, zerozdcode.xyz on mobile phones, its stupid in potrait mode, i want to force it only in landscape cuz it looks how it should then

why is react so popular again? the code is so verbose even for simple apps

Reactbros is this an appropriate way to lay out my routing? Haven't seen routing examples with navbar/footer and it doesn't make sense to include them in every page

Attached: react routing.png (486x369, 16.85K)

reactrouter.com/docs/en/v6/getting-started/concepts#layout-routes

you WILL componentize every element of your page
you WILL manage states of everything instead of just using forms
you WILL make every project a nest of convoluted bloat
you WILL use javascript for everything

Render pages in a wrapper/layout component that contains the header, footer ect.

I wouldnt know my guy. You can do that from chrome, but no idea how to export this through code. Stack overflow is probably your best bet here

Sirs let me see if I got it right.

Do I need react for even a simple landing page?
In case of pic related, when an user types his email to subscribe, I will need to have a backend to get the input and store in the DB?

So I know what can be done using a framework (frontend+backend) and I know what can be done with pure html+css (static sites).
I still dont know why people generally says you should learn vanilla js, html and css. If your page is static, why you even need js? Wont it be just display info with html and css? Can this landing page be done with vanilla js?

Attached: landingp age.png (710x493, 138.01K)

>you WILL manage states of everything instead of just using forms
Remix doesn't have this issue

Attached: remix.png (200x200, 18.31K)

Don't overthink it.

HTML + CSS = Necessary

JavaScript = Add interactivity, for example if you want when the button is clicked, show a "Thanks for subscribing message" without casuing a full page reload, or giving some client side feedback if the input is wrong and focusing on the wrong input, etc.

React = Allows you to compose pieces of the site into re-usable components, it can help here, but is not necessary. Helps a lot on bigger websites.

This example confuses me. I've been using App.js as the index/home page. What goes into App.js if the home page is a seperate file?

Attached: app-js.png (575x425, 22.51K)

Alright, as I expected. For a moment I thought I was going crazy and somehow you could use pure js to transfer data from the email field to a stored list or redis without coding any backend.

iirc app.js is just a file calling all other builder files. You dont need to have home code in this file, just call it.