gabsiepeca - Tumblr blog

[gabsiepeca]

A very simple effect but one that can be very useful. In case you want to give your buttons a special touch, just add a shadow box with vibrant colors, increase this shadow in the  :hover

You can also add some transition, for a more dramatic effect.

Have fun!

[gabsiepeca]

Continuing work on the Flexbox. When having multiple elements in the content, we are allowed to accommodate them in different ways. Either stretching them as in the first example, where we don't have to do anything, just leave "stretch" to cover all the available space inside the container. Now, if we don't want it to stretch, we can accommodate it with the value of "flex" by adding "start" or "end" to place them in the container, also in its version at the center. The latter does not alter the form of this content.

[gabsiepeca]

The Odin Project provides a free open source coding curriculum that can be taken entirely online. It is a free online bootcamp with courses for people who are looking to learn the necessary skills to land a job as a web developer or junior software engineer. There are no instructors for The Odin Project. But, they have a community of beginner and experienced software engineers to whom students can reach out if they need support. The curriculum takes about 1000 hours to complete.

It is a good resource for those looking to start in the world of programming, quite useful and as everything requires dedication and time. A possible option for those looking to change their career, especially after such an enlightening 2020.

[gabsiepeca]

This week we started to work a bit with the Flexbox within CSS. For small-scale projects, a suitable tool is the flexbox, where we can accommodate our content very efficiently and let it flow with our design.

As a visual aid, here is a representation of some of the basic concepts about the Flexbox. I hope you find it useful.

Cheers!

[gabsiepeca]

HTML structure

A bit of colors in an example of the structure of an HTML5 web page, dividing its components in this way we can work in a fluid and adequate way all the visual elements that will be added with the CSS.

[gabsiepeca]

[gabsiepeca]

Similar but not the same

With a new week comes a new lesson in HTML and CSS. But how do they differ?

In the image above you can see that, although they maintain similarities, they are not the same. On the left, HTML is like the skeleton, the structure of our design. You have to be smart enough to know what goes where or you can end up putting a "header" where you don't want.

On the right the CSS, the makeup of our website. All the pretty colors and shapes will take place in this part, my favorite part if you ask me.

[gabsiepeca]

Learn HTML in a quite dynamic way

If you are interested in learning the basics of HTML and CSS this is by far the best place to do it. It is not a flat and boring lecture, you work receiving the example and it is immediately put into practice, so you advance at your own pace and with very useful and practical examples.

The only negative point is that it is quite short and leaves you wanting to move on. You have payment options for the course if you want to continue but just getting the basics in this type of teaching is pretty great.

And it's free!

[gabsiepeca]

HTML powa!

A simple shell of a website with only HTML, quite simple but the important thing to note is that ... dogs are better than cats. We definitely need a website that says that, although it is general knowledge.

At first I was a little lost with my blank screen, but little by little I was remembering the basic things that I learned at the beginning of my career on Tumblr, when you were a hackerman just to know how to change the colour of your background, simple pleasures.

[gabsiepeca]

[gabsiepeca]

The HTML page you MUST KNOW

Before starting (although without making much progress) in web design, I had no idea where to start. Yes, the readings and classes are great, however personally I have many problems learning from a person who just “lecture” me, I learn by doing it.

I consider myself as a kinesthetic learner, (yes, I do), and I do it because I learn through my senses and I have got a really good body memory, sometimes I even know how am I doing certain things. You can get an idea of it with the keyboard shortcuts, do you know them? or do you remember them? Bingo!

So now you might be wondering, well Gabs, what does all this have to do with this link? Oh, my dear friend, it has everything to do with this. Because this web is brilliant!

With a really easy interface, it has lots of quizzes, tutorials, exercises and references that you can actually try! Right now. Not only for HTML, ( I use it for that but is not limited to it) but for many programming languages. Told you. Brilliant.

It might sound silly for you, but who knows? maybe there is a clueless student that does not know how to write basic HTML and suddenly they run into this website.

That is it. Run, explore and learn. It is for free!

[gabsiepeca]

It is certainly a very nice website.

It has videos, tutorials, inspiration and guides for those looking for a little boost in their creations.

Recommended, especially the video tutorials.

Everything is so beautifully done. *sigh*