For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Full-Stack Software Developer
Data Science and Machine Learning - 16 wks
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions and more.
Guides on different topics related to the technologies that we teach in our courses
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
CSS Layouts and the positioning of elements are probably one of the most challenging concepts in CSS; both were meant for older, less advanced and less rich websites.
Let’s go back to HTML: How can I create documents with 2 columns? We know that some scientific documents have several columns, but how can I replicate that in a website?
We need to use boxes for it. A box is a container with a specific width and height. Boxes are containers that bring order into the HTML/CSS world. By far, the most used tag for a box is
All website content should be wrapped within boxes (div, header, footer, etc.). Boxes are invisible by default, so in order to make them visible, you have to either set a background color or a border. The following image shows how many invisible boxes a normal website has:
All box containers can have the following attributes:
|Content||Whatever elements are contained within the tag (the words in a paragraph, an image, the text in a list of items, etc).|
|Padding||This is an optional empty space or margin that can be added between the content and the border of the box.|
|Border||The line around the box and its content.|
|Background image||The image that is shown behind the box content.|
|Background color||In addition to the background image, you can also have a background color behind both the content and the background image.|
|Margin||Optional space that can be added between this particular box and other elements around.|
In the following example, we divided the website content into 2 different areas. The left side will be The menu and the right side will have The content of the website. We put a red color to the #div1 of the menu, and a blue color to the #div2 of the content so that the example is easier to understand.
This important property is connected to the box model, and it defines how the height and width of the element are calculated: should include the
padding and may (or may not) include the
If the value is content-box, width and height will only be applied to the
content of the element.
If the value is border-box, width and height apply to all parts of the elements: content, padding, and borders.
All boxes have two attributes that define their size:
height. In some cases they are adjusted automatically, but in others we must assign them manually or place them percentage-wise (relative to the parent content for example).
The browser is responsible for assigning positions to all elements of a page. However, as we know, the positions brought by the elements are quite limited and make the documents look both ugly and antiquated.
In order for a website to look like today's websites, we have to redesign the entire page positioning. This is achieved by using both the
position property and the
display property (which we will learn later on) so that we can replicate whatever layout imaginable by the most avid designer.
|Static||This does not involve any special positioning of the elements. As a consequence, the top, left, right and bottom properties are not considered.|
|Absolute||When you tell a box that its position is absolute, you also need to define the top, bottom, left, and right rules. Here, you are asking the box to ignore where it was positioned in the HTML document. Its new position will be based on the rules (top, left, right, and bottom that you specified in the CSS).|
|Relative||Similar to absolute. The main difference here is that its position in the HTML document is not ignored. The box will be located in accordance to the top, left, right, and bottom attributes, relative to its parent element as the starting point.|
|Fixed||If you fix an element, it means that it will always remain in the same position. When the user scrolls in any direction, the element will stay in the very same position. "Fixed" could be used on PopUps, menus, etc.|
Wait!! If you don’t get what we just explained, well... there's nothing to worry (at this current stage). This is one of those things we need you to practice a lot. There is no other way. 🙁
The values of the
display property are much more advanced than just showing or hiding elements. Actually, the
display property changes the way in which a document can be visualized.
It is common to find this property in menus, social network activity feeds, etc.
|Inline||This is the default value of |
|Block||This is the default value of |
|Inline-Block||The best of both worlds. This value places the containers in the same row, but respecting each of their limits (width and height). Thanks to this value, sites like Pinterest use masonry design.|
|Flex||This property comes to fix all the major problems with display to date. Flex is used to make boxes flexible. When you apply |
|None||Hides the element (making it invisible) and does not hold any space for it within the document.|
Ok, now… to understand what we just explained, there is no other choice but… Practice!
Float is a simple but very useful property. It works by telling a box to move as far as possible to one side: left or right. Once you assign the float property to an element, it will look for the best space to be accommodated, trying to coexist with the elements that surround it.
Float is very much used in blogs when you want to add images to your articles. It is very good in such cases, because once the photo is moved to one side, the text of the article will find its place around the image in a very natural way.
|Left||Moves the element as far to the left as possible.|
|Right||Moves the element as far to the right as possible.|
It’s yoga time, let’s stop the coding and think about mankind for a minute. How do humans act? How do they behave? What do they like? Where do they click?
This course is not just about user interface (UI) and experience (UX). Web developers tend to underestimate this matter. It is important to take enough time to design the website navigation flow, the menu position, UI elements, etc. Here you have some layout examples:
Some websites have great content, but, unfortunately, they also have poor layouts that limit their potential for success. These are the main criteria to consider when choosing your layout:
The following examples gather a large percentage of the most used layouts on the web. Understand them well because you will probably use them throughout the rest of your life as a developer. Sometimes you will use a mixed approach to accomplish several things at the same time.
Facebook is like this: a centered content website has a max-width for the content. This means that it doesn’t matter if the client computer has a 4000px width, the website width will stop at "max-width" and the rest of the page will be white.
Here is the exact code needed for website content to always be aligned at the center of the screen:
Left sidebars are great when you have a widescreen (landscape). You can have a menu, some ads, a newsletter sign-up call to action, a login form, etc. And you can still have enough space for content! Almost every website uses a left sidebar these days, some of them include also a right sidebar.
This pre-work website has a left sidebar, and it's a great option for us because we want to have the syllabus permanently available for our students.
This is almost the same, but instead of having the left-sidebar as the primary menu, you will use it for complementary content. The main menu should be at the top box because is the first thing users see when they land on the website.
Pinterest made this layout universally known. By using this "innovative" UI, they became one of the most visited websites in the world. Masonry distributes the containers in an optimal way: first fills the whole row by appending boxes to the right (adding them at the end), and then jumping to the next row when there is no longer space available.
To replicate the alert behavior you have to:
<div>with absolute position.
Use the sliders on the left toolbar to change the margin, padding, border radius, or any other CSS Rule available in the demo:
You will have to be learning "on the go" because there is an infinite amount of combinations you can create for a website layout. What really matters is that you fully understand the display, position, float and flex rules.
There is a lesson called
Bootstrap that was made to facilitate the design. You'll learn this in the next lesson.