Advanced CSS Tutorial — Level Up Your CSS Skills

Advance your CSS skills! Build your very first web page from scratch with these five free tutorials — Sign up here: ↙️

In part four of this web development tutorial series, we will focus on more advanced CSS techniques, covering:

Advanced CSS — Introduction (00:00)

How to create high-fidelity screens (00:38)

How to style your images properly (03:30)

How to change fonts (06:55)

How to add footers (15:00)

Let’s add some finishing touches (18:50)

How to change the background color (22:20)

Let’s recap (27:47)

Links to the free resources required for this tutorial:

Making a career change? Let us know in the comments below what you would like to learn about CSS, and what videos you’d like to see from CareerFoundry!

#CSS #CSStutorial #AdvancedCSS

Check out our other social media channels and blog here:

For more information on our courses, visit us at:

Advanced CSS Tutorial — Level Up Your CSS Skills (2021):

[demostheneslocke]

If anyone is struggling to read his code: You can always zoom in on the page where the code is. It cuts him out, but you will be able to read it. Shortcut to zoom in on most browsers: Control+Scroll in or out on mouse. If you need to move it side to side after zooming in, there should now be a scroll bar at the bottom of the browser to do so. Additionally, if you did not already know: If you have windows 10, you can press the windows key and use the arrows to adjust the browser around the screen. For example, my set up is to have youtube take up half my screen on the left and my IDE takes up the other half on the right. Instead of resizing with dragging my mouse along the corners trying to get it right, I just select my browser and press windows key and left arrow at the same time. Then repeat the process with my IDE but use the right arrow with the windows key. For viewing your website, I recommend creating another window to switch to. If you have any problems, let me know and I will do my best to help.

[towewe]

I have been enjoying this free course so far. One thing I would like to say is that if he can show us what effects he is going to work on (on the web page look) BEFORE starting coding, that would be easier for us to understand the coding.

[geckografix]

You have an error in your CSS on the class in line 52 ! there is no hyphen in the ease-in-out transition, so it is showing as "ease in-out" instead of "ease-in-out"

[futurepilot]

I love how he is straight to the point and not beating around the bush. Love him ❤️❤️

[RayTrades-tl]

@CareerFoundry please make the screen bigger

[nuhualfa]

Thank you for the knowledge share simple and concise for understanding.
I need a little clarification for inserting images from our own directory, for example, the images in the links provided I try to follow the tutorial and ran into error images using
<img
<div class="project-grid">
<img class="project-image" src="images/project-1.jpg"/>
<img class="project-image" src="images/project-2.jpg"/>
<img class="project-image" src="images/project-3.jpg"/>
<img class="project-image" src="images/project-4.jpg"/>
</div>

[rickr]

The font is pretty small. I get what you were trying to go for that cool look but I am on a 14 inch laptop and the text is not legible. Too small

[paarkavi]

Explanations are crystal clear... Keep up the good work!

[esraashahien]

In minute 8:00 to 9:00, Once I reach the point of styling the projects's 4 images, the grid is no longer affecting the website when I refresh. So instead of having each 2 pictures next to each other. I have each one separately in a row once I write this code!
what can be the reason?

<div
<img class="project-image" src="images/project-1.jpg"/>
<h4>Project 1</h4>
</div>
<div
<img class="project-image" src="images/project-2.jpg"/>
<h4>Project 2</h4>
</div>
<div
<img class="project-image" src="images/project-3.jpg"/>
<h4>Project 3</h4>
</div>
<div
<img class="project-image" src="images/project-4.jpg"/>
<h4>Project 4</h4>
</div>

[geraldarthurmoore]

Thank you for this brilliant short course. I cannot see the link to the fonts we will use. Could you kindly direct me to the link?

[merlin]

Just a note there is no embed link to the font used in description and I can't find one on Google Fonts, what do I do?

[nathaliareyes]

There is no embed link to the font used in description and I can't find one on Google Fonts ...

[judassean]

Good not try typing as you explain. Than type then explain ....there is period where its just mouse clicks

[wytze]

Where is the Google Drive link for the images? I can't find it in the description.

[matttroughton]

my font-family: 'Roboto Mono', monospace; for my header "my projects" didnt chance its font style how do I change it ????

[codewithdevhindi]

just a not for you bro: two of your video time stamps are messed up which are: how to change fonts and how to add footers both are misplaced by each other...BTW Liked Your Video Very Much

[dead_minstrel]

I'm at 14:50 in the video, but the text isnt showing, and i have duplicates of images 2 -3 on my screen... how do i fix this?

[happyfamilylifescreations]

I did a lot of editing and revision the hover, effects given on the images, but still the style effect of showing the title when hovering over the image, as well the shadows not shown on the profile pic..can I one on one chat with you or someone for guidance..I am in Canada...so MST..

[nysunra]

The ability to access specific styles in Google Fonts is no longer applicable. Also the link is NOT in the description. To remedy this I just added Roboto Mono twice since the Sans no longer applies.

[adityachanda]

hello! i love your videos. what is the transitions code? it is not clear