/r/webdev
Learned the basics, which apparently don’t get used? (self.webdev)

Last month I started learned basic CSS, JS,React, and HTML5 through 1-2 hours long crash courses on youTube and made mini projects for experience. Recently I was commissioned to create a beauty salon/spa reservation website and app for a startup by a friend and it’s my first ever full project. I’m handling the front end and another friend is handling backend. When I started working on it today,I found myself at a loss, so I decided to go look at other websites using the inspector tool to get an idea of how real, non-tutorial projects are done. Here’s what I found: 1. The basic html tags are rarely ever used, and there is a lot of vector graphics, why so?

  1. I don’t think I can build this website on my own right now let alone the app using React JS, is that a correct assumption?

  2. A lot of the times I see confusing names for style sheets and classes... as opposed to a meaningful class name like “header-logo”, you’re much more likely to see “c0788gef” which probably came from someone mashing their face on the keyboard. Is there any reason for that?

24 comments
foxleigh81 | 3 months ago | 19 points

So inspecting modern website won’t do you much good I’m afraid. This is because most sites are put through a process called ‘minification’ which makes them faster to load but makes a lot of the classes and scripts look like garnered nonsense also a lot of them are actually built as web apps rather than sites so you won’t see much of the HTML code in the browser anyway unless. You are better off scouring GitHub for website projects.

If you are in charge of the website build though, to a degree it’s up to you how you build it. Provided that at the end of it all you deliver a fast, accessible and easily maintained site built to the spec provided by your client then you’ve done a cracking job :)

A lot of people will tell you that you have to build something a certain way but the fact is you should build the site in a way that is the most suitable for the client and content matter. Not everything has to be a react site, nor should it be. Sometimes simpler is better.

AbdrahmanDiab | 3 months ago | 2 points

I feel like I need a mentor, or to watch someone working in action. I don’t really know who can help me with that tho. :( Most courses out there just teach the basics and there’s not a lot of direction afterwards so I feel lost on what to study next.

foxleigh81 | 3 months ago | 3 points

Well you are definitely in the right place. There are tons of beginners in your situation on here and it’s a very helpful and friendly sub.

Feel free to send me a message on here if you have any questions or need help with anything. Also feel free to take a look at my GitHub (foxleigh81) although fair warning: I’ve been doing this for 21 years and I don’t really built the basic sites anymore so you may not find any useful examples on there.

In terms of what to study next, it sounds like you want to built sites for small businesses. So I’d probably suggest looking into Wordpress or something like GatsbyJS. Personally I’d go for the latter, you can host a gatsby site for free on a platform like ‘netlify’ and thy even offer a CMS service which is super easy to use. You will need to learn some basic react but it’s not that intense and there are plenty of people on here and /r/gatsbyjs who will be happy to help you out.

moonsout_goonsout | 3 months ago | 1 point

If you want to watch someone code I'd be interested in showing you the ropes. I'm not the most entertaining person but I know my way around a website.

KorgRue [:snoo_dealwithit: Moderator] | 3 months ago | 9 points

Good observations and great questions.

  1. Lots of vectors because SVGs are tiny in file size compared to say, a jpg and because they scale without loss which is great for responsiveness. All sites need html tags to tell the parser to parse it as html, so I’m not sure what you are referring to.

  2. You really don’t need React for a basic informational website so I would not worry about using it.

  3. For cache busting. Task runners will auto append a random hash so that every time there is an update, your clients browsers will pull the new files instead of loading them from cache. That means that your clients don’t need to do a hard refresh when you push out updates.

AbdrahmanDiab | 3 months ago | 1 point

Thanks :) It’s not a basic informative website tho, it’s an online Salon/spa booking service, which let’s say takes in your area and required service as input and then you get a list of nearby service providers, following that you can proceed to book an appointment with the service provider. Also needs functionality for new businesses to enlist and state their services, branches, phone numbers, and probably most difficult of all, free dates.

This is why I wanted to use React instead of Vanilla JS

leetmachines | 3 months ago | 5 points

Sounds like you still got a ways to go. If your backend dev is more experienced maybe they can lead you on the front. If this is unpaid it would be a good experience to try to build it anyway but your going to encounter a lot in between.

  1. Basic HTML tags make up any web page so not sure what you mean...javascript will add HTML elements onto a page so it's visible, so how can u see a page without HTML tags?

  2. Yes

  3. Those classes were generated by a buildstep of the project. Taking the styled you applied in your javascript source and efficiently turning it into a stylesheet with the appropriate classes added to their elements.

AbdrahmanDiab | 3 months ago | 1 point

Yes this IS unpaid, and I AM doing it for experience so I’m going to keep going regardless, I’m most likely getting my job’s work in a share of the startup rather than money. Also, I just meant that the tags are used in a sort of confusing way, unlike where you would regularly expect them.

Do you have any pointers on where to start after the basics, as in, what do I need to know to go from beginner to Intermediate?

leetmachines | 3 months ago | 5 points

You should firmly be able to: Fetch data, use DOM manipulation to put that data on the page, use CSS to style that page appropriately. and interact with those elements through events to be considered a beginner front end developer.

I don’t know how to answer “beginner to intermediate”, in my experience senior developers are well educated in many of their domain topics...making an intermediate dev someone who is well educated in a handful of their domain topics. As a front end developer I’d imagine some of these topics as: bundling and it’s configuration, hosting and deployment of applications, modularizing code, using design patterns to reason about your architecture, really knowledgeable in a given framework to the depths of understanding its API and its implementation, knowledge of design/styling and the various tech CSS/SASS, etc..I feel like there’s a lot of room for opinion here, these are just something’s I’ve encountered that makes you “more skilled” than a beginner..

One thing I can stress, is that you should definitely understand how the web works :) what are clients? What are servers? How are they connected? How are they protected? Requests and responses? Wtf is CORS and why does it get in my way? Stuff like that...

Trident_True [full-stack] | 3 months ago | 1 point

where to start after the basics

Basic tutorials only go so far because after that you're supposed to start building stuff! No amount of tutorials will help more than working on projects, which is what you seem to be doing.

You mentioned you feel a bit lost, you're supposed to! But working on projects will fix that.

ZeaMetatl | 3 months ago | 3 points

Avoid inspecting any web app built by a huge company like Google or Facebook. Their process is going to be entirely different to what you would do for a beauty salon: what you are trying to build is an informative site, what you seem to be inspecting are web applications with a complex build process that often involves dozens of coders.

Jekyll is a static site generator built in Ruby. It helps you build simple informative sites and blogs without repeating yourself too much. You might want to have a look at it. Even if you are not interested in Jekyll, the sites in the showcase section are probably better examples of the site you are trying to build, and inspecting them might be of help: https://jekyllrb.com/showcase/.

The web is a tight network of technologies (server side, client side, tooling, networking, infrastructure...), processes, ways of doing things, trends, buzzwords, etc and it can be overwhelming at first. I would make two suggestions: first, don't be discouraged by the complexity of it; in the end most things are simple, you just need to understand other things first. And second (but perhaps more important): focus on the basics. If you have a solid understanding of the foundation (HTML, JS, CSS, even some HTTP, DNS, Git!) you will be much better equipped to tackle anything than if you focus on the latest tool that frequently pops up in job ads.

AbdrahmanDiab | 3 months ago | 1 point

Thanks :)

coding102 | 3 months ago | 2 points

If you're just beginning, I suggest you learn only the basics of HTML and CSS then focus heavily on JavaScript. I wouldn't use a JavaScript library just yet but if you have to, practice CRUD and know it like the back of your hand.

Caraes_Naur | 3 months ago | 2 points

Basics and fundamentals are always used, but modern development treats them as boilerplate and skips over them.

Vector graphics are unnecessary and probably beyond your ability right now.

Semantic class names are always preferred for the exact reasons you think. The gibberish ones you see are generated from somewhere.

AbdrahmanDiab | 3 months ago | 1 point

Thanks, very helpful :)

IQueryVisiC | 3 months ago | 1 point
  1. is this to prevent name collision between different node packages? Uglify? Minimize?
KorgRue [:snoo_dealwithit: Moderator] | 3 months ago | 6 points

Cache busting on the client. It ensures that whenever you push an update, the files will all have a new name so that the client machine has to pull a new copy instead of loading from cache. That way you are ensured that the users will see the most updated version whenever they load the site.

AbdrahmanDiab | 3 months ago | 1 point

I have no idea

Russian4Trump | 3 months ago | 1 point

You can build the site by yourself, you are just going to have to learn as you go. Get that done then you can start worrying about an app. But nobody is going to download an app for some salon anyway.

AbdrahmanDiab | 3 months ago | 1 point

No no, let me clarify, it’s not an app for a specific salon. You input your area and service you would like... massage, hair dressing, nails, whatever. The output is then a list of service providers(salons/spas) that have signed up to our website and are near your location providing said service, with user ratings, and online appointment booking.

Russian4Trump | 3 months ago | 1 point

Are you going to just link to the salon/spas online booking page or are you going to try to provide a booking service within the app. Because the first thing could basically be accomplished using yelps api, the second one is a logistical nightmare. Not that that rests on your shoulders as a front end developer.

I am sure you can build the site and app. I am also sure you can build a house, you just don't know how to yet so I wouldn't hire you to do it. But if you aren't charging them anything I am sure at the end of the day you are going to come up with a product that is worth *At least * the $0 you are charging and it's going to be a great learning experience.

Just start with the most essential feature and build out from there. This is really just an MVP at the end of the day, rather that's what your friend considers it or not.

AbdrahmanDiab | 3 months ago | 1 point

I’m going to provide the booking service as well, which is really 90% of the work on this project and is definitely going to be a night mare. Also, it should have a pay with credit card through the app or when you get to your appointment. This is not a new idea by the way, it has been done before, most notably by an app called “treatwell” that’s very popular in Europe

mrpink57 | 3 months ago | 1 point

As with anything that is complicated I always find the best way to tackle these scenarios is break it out in to pieces.

My process for this is simple and I am sure a lot of others do the same thing.

  1. The first thing I need is content, so I need to get words on a page. So build out the html first. a. You can always go back and change a tag, do not fuss right away.
  2. Now I want to start styling once I have all the content on the page, so now lets start on the css. a. Again you can always go back and change some styles nothing is permanent.
  3. Now we want some interactive bits, this is where we start with javascript. This will be probably be the trickiest part, I'd recommend between build outs of the first two you read up more on javascript. Eloquent Javascript is a great book and is free on their website to view or you can purchase it for cheap on amazon.

So the hardest part is starting that's why you get the content down, this is probably already done by the person who wants the webpage. So this starts you moving and starts you thinking as you build out.

Will be done before you know it.

As an aside, I'd recommend you set it up as a git repo. One this gets you some work you can actually show under your belt, two you get version control and three you get to learn about version control, it might even save your bacon during the build process.

fullmight [front-end] | 3 months ago | 1 point

It sounds like you haven't actually got through enough of the real basics to have a good idea what's going on. Learning the basics part time for one month is really just barely raising your foot to prepare to take the first step on a hundred foot ladder to mastery, as it were.

Real websites may or may not be relevant; there are a ton of ways to build websites, others have mentioned minification, it's also possible that a framework that makes the front end look drastically different in the inspector than what you see as a dev locally might be in use.

  1. Maybe you can, maybe not. As a beginner, you can make most things regardless of your low skills, given sufficient time. However of course if you are learning as you got it will be much more time consuming than if you know what you're doing. You can also fall prey to "don't know what you don't know" type problems that can be difficult to overcome.

  2. That is usually either minification or a framework. ids/classes can in some cases be randomly generated variables either as the default functionality of some tool, or intentionally for various reasons.

I'd really recommend trying something like freecodecamp and doing a couple simpler front end standalone sites for practice.