Coding a landing page website with HTML & CSS

In this live coding stream, we built a website from scratch, using a free template from Frontend Mentor!

Video starts at 3:09!

Huddle landing page from Frontend Mentor:

_____________________________________

TABLE OF CONTENTS:

4:18 - Getting the project files
6:22 - Setting up the files, explaining Sass workflow
17:25 - Writing the different sections of the website in HTML markup
27:45 - Explaining CSS box-sizing
29:10 - Global styles
34:10 - Adding Google fonts
41:40 - Header logo, method 1 (background-image)
48:56 - Header logo, method 2 (img tag)
49:55 - Body background SVG image and padding
58:41 - CSS grid for main content layout (image on left, text on right)
1:09:48 - Main content text
1:22:30 - "Register" CTA button w/ active state
1:48:49 - Social icons using Font Awesome
2:09:51 - Polishing mobile styles

_____________________________________

Follow Coder Coder:

_____________________________________

#webdevelopment #html #css #livecoding #learntocode

[bud]

13:37 = the benefit of using SVG is pretty small file size;
18:39 => CSS grid to handle the design changes between desktop and mobile;
18:46 => flex-box for social icons at the bottom;
19:03 => there's something that flex-box can do that CSS grid can't do;
19:09 - 19:16 => CSS grid is a good way to build a general template of your website;
21:10, 21:32, 21:49 => flexbox is more flexible if the number of images or blocks change you can make it center nicely but CSS grid can't break the template so it will stick to the template that you've created;
21:59 => flexbox is content first (it'll fit your content);
22:06 => you create your grid template and force your content to conform to that grid;
25:48 => $ sign is a variable in sass (it can be reused);
28:00 => box-sizing for adding margin and element so you don't mess up the width (*, *:before, *:after);

# homepage.scss:
29:14 => homepage (body; background-color);
29:26 => color;
51:11 => adding
54:40. 54:49 => (adding the margin and body first);
1:14:11 => font weight 700 is bold;

# media queries
51:42, 52:32 => style mobile and desktop when the device reaches a certain width - in this case starting at 640px of width it'll load the mobile image;
1:02:25 => fr / fraction / ratio;

# global.scss
1:05:12 => deleting the h1 (left-over);

# responsive padding
55:58;
57:33 => every browser comes with preset style (it can be helpful for the forms);
57:54, 58:04 => so it needs some kind of reset (global.scss) - HTML & body: padding & margin: 0 (it'll be overridden by the hompage.scss anyway);

# style.scss (main)
30:51 => every time you create a new Sass file you have to add it in your main sass file;
39:39 => fonts, colors, global, homepage;

# fonts.scss
37:20 => setting fonts;

# global.scss
28:00, 39:19 => (*, *:before, *:after), h1 font-family;
41:47, 45:31 => adding icon before the sudo element to the h1 tag (&:before, content, background-image);
45:37, 45:47, 45:51, 46:49 => padding on the left (50px), left of 0 to push the text and to make the icon as the background image;
47:03, 47:15 => setting width to 50px;
48:31 => line-height: 1 which means the line height will match to the text height/the same height;

# index.html
49:08, 49:34 => image as the logo;
1:04:04 => load the image;

# adding left & right stuff - css grid
58:42, 59:24, 59:39 => if wanna use CSS grid we want to have the parent element (main tag) so it needs the display: grid;
1:00:16, 1:00:28 => technically 640px is where the tablet starts & 1024px for the desktop;
1:01:28 => firefox grid inspector;

# autofit
1:08:02, 1:09:04;

# pixel
1:20:58, 1:21:21 => pixel density double the width in the mobile so the picture that's given needs to be adjusted to 50%;

#button
1:24:35 => display-box (to make it to be in its own line);
1:24:52 => inline-box (will not have the full width - not like display-box);
1:28:32 => text decoration to none to get rid of the underscore;
1:29:47 => border-radius to make something round;
1:29:58 => changing the border radius at the firefox;
1:31:40, 1:31:46 => box shadow;
1:32:04 => the first parameter: left-right;
1:32:16 => the second parameter: up-down;
1:32:27 => the last parameter: spread of the shadow;

# others (footer etc)

1:45:52 => paragraph by default is 16px of padding;
1:44:19 => transform, transition;
1:47:55 => min-width;
1:48:06 => text-align;
1:49:15, 1:49:56 => font awesome (copy to the html/footer);
1:51:08 => css/all.css;
1:51:29 => put in the css folder;
1:51:43 => add reference/link tag to the stylesheet of all.css;
1:52:55 => copy the entire webfonts folder;
1:58:47 => flex-box, justify & align to the center;
2:00:52 => flex-end to make it to the right;
2:02:53 => remove the excess padding;
2:03:19 => css selector;
2:10:59 => direct child (>);
2:15:52 => text-align center for mobile but not for desktop;
2:16:06 => mobile (center);
2:16:10 => desktop (left);
2:22:42 => fixing the footer (went blue & padding - > direct child);
2:23:27 => color back to white - the reason was because it became blue was because that's the default value (2:23:33);
2:24:46 => adding hover to the footer;
2:26:03 => slash will load your homepage no matter what page you're on;

[sarbjotsingh]

One of the best thing, no adds
Thats really make you a great real teacher,
Becoz real teacher always focus on spreading knowledge despite of earning through different platforms
I really appreciate you ❣️❣️

[derangedhermit]

I want to thank you for doing a live stream were we can see the mistakes even seasoned web developers make. Watching as many videos and projects on Web Dev lately I've often felt that I have no future in the industry because I see people push fully finished projects in hours while it can take me weeks and in some cases months. This gives me hope.


Also with emmet if you type link and then tab it will boilerplate the rel and ref.
The space in the middle (between the hero img and the text) might be a gridgap. This will put a space between each element on the grid.

[kennethsantiago]

Hi Coder Coder ! new subsciber here! thank you for your videos, it's very helpful ! im new to web development, just started self study 2weeks ago, I am a network engineer and wanting to learn and hopefully hop into web development.

I would like to ask if you have schedule for your live coding so i can add it into my reminder so i can code with you. thank you

[sandraswift]

thank you for this! i'm not done with the video yet but you've been explaining things much better than my professor lol. thanks again :)

[Ahmed.Kachade]

i have learned a lot today relly you are a master thank you.

[awesomeme]

You are awesome! I love all of your videos! Thank you!!!

[geeklove]

Ooh! finely complete it
Time to execute what I learn from this tutorial.
Thanks you

[perfectwebsolutions]

you made this video in 2019 and still you make it unlisted why? what is the reason?

[cynthiamanor]

This is a really awesome video. I enjoyed watching it.

[satyadeepboga]

This is a great video. Great inspiration for Beginners...

[vitpav]

what I love about this video, is that you are calm.
everybody on youtube is using these intonations, they make me sick.

[entertainmenttube]

Hi! Jessica, can you please make a video of a roadmap on how to learn and apply CSS in such a way that not only me but anyone can convert his/her imagination into reality !!

[TheBlahMan]

Alright let’s go 3 am learning and coding!!

[jaggyjut]

Its great fun to learn with these simple projects. Any ideas if there is an alternative to Irfanview as it does not work on a mac. Thank you for taking the time to create this tutorial.

[angelaadomokhai]

Great job. What image viewer did you use to view your desktop and mobile design files?

[veervikramsingh]

can u tell the name of software used for viewing the image

[aashirkhan]

Liking the way you are using camelCase for the classes

[evankapantais]

I literally always forget to link my files the index one. Then I proceed to spend an hour troubleshooting for no reason :p

[mortkebab]

I must admit that don't understand what I'm looking at at 1:42:07. Do you have a video that explains the use of the Firefox tools?