CSS is what makes the internet look pretty. All the colors and styles on any web page are all CSS. So just to go over some of the imprtant stuff to always remember when writing CSS code. The first thing is to remember what takes precedence because sometines an element can have a style from different places and only one will render. The problem is that there are some weird rules about this. The first thing is the !important tag anything you put this on will take precedence but it’s considered bad practice because it can be very confising to change. The next is an inline selector like <p style...>. After that are styles that are defined through media queries. Next are user defined styles which are atyles that a user can select in the browser. After that is selector specificity that the more specific a selector is to an element that is the one that takes precedence over the one that’s more general. Then goes the rule order that the last style written takes precedence. And then lastly there are browser defaults.
After finishing the course I decided to go back to the basics and get a better understanding of them. I started with HTML just to really get the basics well. HTML is the language of all browsers everywhere so whenever you load a web page what you’re seeing is HTML. HTML is a markup language and not a programming language it doesn’t deal with any logic but just takes content and displays it. All pages have the same layout and you just change what’s inside them. You start with an <HTML> tag and everything on the page goes in there. The first thing that goes in there is the <head> tag, in there you put all the data that doesn’t get displayed but the page needs it to style or any logic you need. You put in there the name of the page that shows up on the tab of the browser and links to CSS stylesheets and Javascript. After that comes the <body> tag in there goes all the data that you want displayed on the page. You can put in there regular text, headers, tables, ordered lists, and unordered lists. You can also put in links to other pages either on your site or somewhere else on the internet and you can put in images as well. This is how you get the skeleton of a web page which will show a a bunch of text with very minimal styling and on top of this you build the CSS to give it some style and Javscript to give it some brains.
So finally I’ve reached the final project of my course the React project. I took some time to think about what I can do with react to make something nice and functional and I settled on making a simple shopping list app. The first thing I did was to set up the back end. It took some time to research what the best way to do it was and I found some great resources on how to make a rails api to manage it. The front end though was much more challenging. I felt like I knew the basics of react and redux but getting them to work together with each other and the api proved to be quite challenging. The great part was that I had to go back and really learn it well so it became really clear how everything in react works from receiving props to passing props and using the store and the reducers.
Javascript is a beautigul thing. I came from learning ruby and then built up to rails and really bringing in HTML and CSS to start javascript. The beauty of this is that I got to see some of the things I could do but javscript just made it that much more powerful. In taking a dead thing like the page of a browser and really livening it up. It all starts with function which were a little confusing for me at first because coming from ruby it felt like it really wasn’t clean. That took a little getting used to but slowly it started to click. Once I was comfortable with that I started to see the next pieces like jquery. With this you can do even more because not only can you run functions in your browser you can actually interact with the database. All that really just led me straight into my project. Now I’m able to get and post things without the page refreshing. This was really cool and also not so difficult to integrate into my already funtioning rails project. I added some extra funtionality so users could see their appointments on their home page without moving to a different page and that the users could see the appointments they create on the page they create them.
So now I’m doing the rails project which is tuning out to be a big challenge. When i was doing the sinatra project I found it much easier because sinatra is easier and has less details moving around. In rails everything is in different places which can make it much hrder to debug. When thinking about an idea for the project i decided on an app where users could book appointments with a hair stylist. I would need a user model an appointment model and a service model. Getting that started was the first challenge to figure out how they would relate to each other. After a few tries I settled on a user having many appointments and having services through the appointments. The appointment table besides having a time would also serve as a join table between users and services. The next step was taking this and building out the controllers and views. Building the user model was easy enough I made a signup page and a link to sign in with google. The next step was building the services controller and views so when the appointment model was built it would have services to choose from. I built that out and made full crud actions for it. Well after all this I just needed to do the best part cleaning it up and making it nice. It wasnt the biggest deal and it went well over all.