From noob to full-stack - LEARNING DIARY #3 pseudo-classes, w3 styles

[adamak2k]

English	Polski
Another day of learning JavaScript, CSS and HTML!	Kolejny dzień nauki JavaScript, CSS i HTMLa.
I updated page on GitHub and you can see it's current state all the time. What's new?	Zaktualizowałem stronę na GitHub i można zobaczyć jej obecny stan. Co nowego?
I changed the way of highlighting buttons I learned something about W3C stylesheet	Zmieniłem sposób podświetlania przycisków Nauczyłem się trochę o stylach W3C

---

Developing thoughts / Przemyślenia

In previous post I was sugested to change editor to Brackets. I tried it, but I had some technical problems first and I just don't consider it comfortable enough. I also changed function names to English from my mother-language. I learned about pseudo-classes. It is like, styling for links-change color for it when mouse over it, when clicked etc. I used them to make buttons on this site. Previously it was made with id's and function variable for each button.

W poprzednim wpisie zasugerowano mi zmianę edytora na Brackets. Spróbowałem go, jednak miałem problemy techniczne, a poza tym nie jest dla mnie wystarczająco wygodny. Zmieniłem nazwy funkcji na angielskie z polskiego. Nauczyłem się o pseudo-klasach. To tak jakby stylizowanie linków-zmienia się kolor po najechaniu myszą, po kliknięciu itd. Użyłem ich do zrobienia przycisków na stronie. Wcześniej były zrobione za pomocą id oraz wartościami funkcji dla każdego oddzielnego przycisku.

You can always check current state of my project here:

Zawsze możesz zobaczyć obecny stan mojego projektu tutaj:

https://adamak2k.github.io/learning-rep/

And source code here:	A kod źródłowy tu:

https://github.com/adamak2k/learning-rep

---

Workspace changes

As I said before, I did not change editor. I still use Atom, but I changed it's UI theme, syntax and added some packages.	Jak mówiłem, nie zmieniłem edytora. Nadal używam Atoma, ale zmieniłem motyw UI, podświetlenie kodu i dodałem kilka paczek.

Element	Name
UI Theme	Pristine
Syntax Theme	Base16 Tomorrow Dark
Package	Zen - distraction free mode
Package	Pigments - see HEX, RGB etc. colors from editor

That's how Atom looks like now:

Website Project

Okay so let's come back to the project. Let me talk about those buttons a little bit. They are made with pseudo-classes. You can see below CSS part from my project. There is main style for bar-button1 class. A little bit lower there is defined special style for pseudo-classes, hover (when mouse is over this element) and active (when it is clicked). It's really useful thing. I actually saved a lot of code lanes (you can see changes in GitHub in JS file).

Dobrze więc powróćmy do projektu. Powiem teraz trochę o tych przyciskach. Są one zrobione przy użyciu pseudo-klas. Poniżej możesz zobaczyć wycinek kodu z pliku projektu. Jest główny styl dla klasy bar-button1. Trochę niżej są zdefiniowane style dla pseudo-klas, hover (gdy mysz jest nad elementem) oraz active (kiedy jest naciskany). To naprawdę użyteczna rzecz i pozwoliła mi zaoszczędzić wiele linii kodu (możesz zobaczyć zmiany w pliku JS na GitHubie).

.bar-button1 {
  border: 1px solid powderblue;
  background-color: #720CD9;
  padding: 15px;
  width: 40%;
  margin:5px;
  text-align:center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float:left;
}

.bar-button1:hover {
  background-color: #2F71E2
}

.bar-button1.active {
  background-color: #7E2DE6
}

That's how site looks like now.	Tak prezentuje się teraz strona.

I also learned something about W3C styles. I used it in homepage for "Title goes here" sign. Still reading about it.	Nauczyłem się też trochę o stylach W3C. Użyłem takich na stronie głównej dla napisu "Title goes here". Nadal o tym czytam.

Ending

That's all in this post. Hope you guys enjoyed reading about my learning process. If you want to read more of these posts, follow me: @adamak2k	To wszystko na ten wpis. Mam nadzieję, że wam się podobało czytanie o mojej nauce. Jeśli chcesz czytać kolejne wpisy, obserwuj mnie: @adamak2k

Comments

[lukmarcus]

Jaki jest cel ostateczny?

[adamak2k]

Cel ostateczny to umiejętność swobodnego tworzenia stron. Chciałbym stworzyć jakiś prosty blog od zera. Potem może ogarnięcie jakiegoś CMS (jeśli dobrze rozumiem co to jest), mam na myśli WordPressa i tego typu rzeczy.

[minnowsupport]

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by adamak2k from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, and someguy123. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you like what we're doing please upvote this comment so we can continue to build the community account that's supporting all members.