Welcome to my website! My new years resolution is to gain new skills, and I think there are many skills to be gained by doing this. I hope to explore many websites and hopefully inspire others on the way. Check out Neocities!
Found a youtube video that I am going to follow along to help better my code/website. I want to do it all here and maybe save things to watch my progress. I don't really know how I am going to go about it, but I'll figure it out as I go.
Learned how to have a link open up in a new tab! I hope I learn/implement at least 1 new thing each update :3
Learned some code to change the color of the buttons! "First step to customization" said Fig. I am very excited aobut this, even though it is not such a crazy thing.
Still on the buttons stuff. Today I started using RGB values for the button color and how to round out the edges. Also, changed the cursor so that it changes to a pointer instead of the regular one when it touches the button.
Learned how to make different classes for my buttons so that I can personalize each one. Simple, obvious, but still cool to learn something new right?
My code did not save from the previous button lesson. Alongside that, now that I am trying to fix it, the code is not working. Took a couple tries but I figured it out. Now I was able to learn how to make space between the buttons, or I guess to create space around the button so that there isn't anything directly touching it and such.
Figured out hovering on my buttons!
I can now make my buttons a bit more opaque when I hover over them
Made the opacity when you hover over a button to be a smooth transition.
I have lacked on this since I got sick last week and started some productive things elsewhere, but we are back today! I am a little drunk, so lets see what I end up adding to my code. Ok! So drunk butterfly found out how to make the buttons have a cute hover transition into the color when you have your cursor on it, but when your cursor comes off of the button, it immediately goes back into the original color without some transition thing.
Added a shadow to my button!
Learned to use the RGBA thing for the button shadows. Also, to only have the shadows come up when you hover over the button.
Added a transistion for the shadow thing behind the buttons.
I added margins on the left side of the buttons, creating more space between them. Also learned how removing the "forced" dimensions of the buttons lets you put in a bunch of words and it will adjust.
Learned the definition of padding, which just makes space in the button, from the words to the boarder of it.
Explored the button information found in "Inspect." Reading the box model is quite easy. Learned that using padding is better than height and width because then it will automatically reshape itself when more words are added into the button. Also, learned to use the vertical-align thing to make all the buttons aligned, not by just the text.
I will update my website every weekday no matter the time! I am using my laptop right now instead of my PC, so the typing is a bit harder. However, I completed the first 4 lessons of the youtube video already! I think I need to be more detailed in my logs, I want these to be more like notes to go back on. Anywho, this next lesson is on text styles so I am excited about that, I think I after this lesson I can make a new page for my website and start actually making it, if that makes sense, since the two pages I have right now are just for learning how to do it. Classes are used kind of liek variables, to my understanding, and we have to start with a . to use it in our code. Since it is late, all I am adding today is how to change the font of my text. However, this did inspire me to make my first page of my website just be a collection of all the quotes and writing pieces I have made thus far. I am excited.
I need to sleep soon so I just want to learn something new, even if I do not add anything to my code. The things I ended up learning/adding were changing the font size and making the class bold. I hope that as I progress I can learn to only make certain words in a quote to be bold.
Learned that most text based codes for CSS is easily googleable. Made the text italic. Now we are learning how to align the text with text-align:.
I am at work right now trying to add code to my website, but the youtube video I am using refuses to load.... I am using a website I found for coding on text styles. I really want to get at least one page where I have all my poetry and writings. That first website did not really help so I decided to use this one instead and it is way more helpful.
I finally got out of my depressive episode and am back on my grind. Today we are continuing with learning about different text styles. The tips that the video is giving is to 1) create elements with HTML and then 2) style them with CSS (one-by-one). My overall goal with this youtube course is to complete the video, make this website something I am proud of, and then get the certification offered in the description of the video. I will get there. Line-height is used to create space in between your written lines. We are using an html entity to give little symbols for our texts; googling "html entity (OBJECT LOOKING FOR)" will give the code that we would copy and paste into our text. I got the starting point for the page I want to post all my writings to.
Using the inspect tool you can see all the "code" for certain parts of your website (whatever you have highlighted). You can use it to match rgb colors for the texts. When making a paragraph, it kind of has a preset margin for itself, so we are going to fix that and make our intro paragraph closer to the title of the page. We are doing that by setting margin-bottom to 0 on the title, and then lowering the margin-top of the paragraph.
After a wretched March of depression and illness, I am finally back. We remember that if we want to use symbols and stuff we must look up the HTML entity for it, and we copy and paste that code into the writing where we want it. I added a sentence to my intro paragraph and put a fixed width on it too. I did not like it though, and will aim to learn how to keep my text in the center on the page. Fortunately, I did learn how to use "general" style code so I do not have to retype stuff into each class.
Ok I am back! Butterfly had some set backs, as per yuzsh, but all that matters is that I find my way back here. Anyways, CSS Specificity: the browser will prioritize/favorite some lines of code (that are using the same properties); the selector targets a particular class, the one that is more specific is the one prioritized.
Alrighty and we are back.... again.... I got super sick and kind of told myself I had to slow down. The more I felt like I HAD to do something, or rushed myself, the less productive I grew. Anywho, I really do want to commit to this so I am back. A good reminder that if I want specific symbols I need to find the HTML entity for it. I fixed a random error I had in my code, and it helped me remember that I can use h /h to make headings, so my title is now seen as a heading. I really want to figure out how to make a page pretty, because I already know I want one of the pages to just be my quotes and such. A text element is an element inside a line of text.
Ok it is obvious that i'm being slow on this because I keep following steps instead of doing what I want and figuring it out, so i am now actually just putting in my quotes. I am trying to figure out if I can make each thing its own class. I will come back to type more if I do what i want hehe. I learned about br ! This is going to change my coding life. I added a couple quotes! The first of many!!