diff --git a/_sidebar.md b/_sidebar.md index f06ba79..e1b9a5a 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -22,13 +22,13 @@ - [Guide in Learning HTML & CSS](basic_concepts/guide.md) - Activities - - [CSS Box Model and Display Property](study_group/2017/css_box_model_and_display_property/readme.md) - - [HTML Table and CSS Typography, Colors and Float](study_group/2017/html_table_and_css_typography_colors_and_float/readme.md) - - [HTML Form and CSS Position Property](study_group/2017/html_form_and_css_position_property/readme.md) - - [CSS Frameworks](study_group/2017/css_frameworks/readme.md) - - [CSS Preprocessor](study_group/2017/css_preprocessor/readme.md) - - [Responsive Web Design](study_group/2017/responsive_web_design/readme.md) - - [Multi Page Website, CSS Typography, Float and Best Practices](study_group/2017/multi_page_website_css_typography_float_and_best_practices/readme.md) + - [CSS Box Model and Display Property](study_group/2017/css_box_model_and_display_property/README.md) + - [HTML Table and CSS Typography, Colors and Float](study_group/2017/html_table_and_css_typography_colors_and_float/README.md) + - [HTML Form and CSS Position Property](study_group/2017/html_form_and_css_position_property/README.md) + - [CSS Frameworks](study_group/2017/css_frameworks/README.md) + - [CSS Preprocessor](study_group/2017/css_preprocessor/README.md) + - [Responsive Web Design](study_group/2017/responsive_web_design/README.md) + - [Multi Page Website, CSS Typography, Float and Best Practices](study_group/2017/multi_page_website_css_typography_float_and_best_practices/README.md) - Resources diff --git a/study_group/2017/Responsive Web Design/README.md b/study_group/2017/Responsive Web Design/README.md index cb76096..a219bcc 100644 --- a/study_group/2017/Responsive Web Design/README.md +++ b/study_group/2017/Responsive Web Design/README.md @@ -1,14 +1,13 @@ -### Study Group 8 : Responsive Web Design -_____ +## Responsive Web Design + Responsive Web Design is the ability of a website to deliver effective contents for different screen sizes and devices. -### Resources: -#### Viewport +### Viewport > The viewport is the user's visible area of a web page. https://www.w3schools.com/css/css_rwd_viewport.asp -#### CSS Media Queries +### CSS Media Queries > Media Queries in CSS files plays a great role in making you site responsive. It controls which styles to use for different screen sizes. Sample Usage in your CSS file add : @@ -24,12 +23,12 @@ https://www.w3schools.com/css/css3_mediaqueries.asp http://learnlayout.com/media-queries.html https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#media-queries -#### Responsive Concepts +### Responsive Concepts https://www.w3schools.com/css/css_rwd_intro.asp https://www.udacity.com/course/responsive-web-design-fundamentals--ud893 https://developers.google.com/web/fundamentals/design-and-ui/responsive/ -#### Tutorials +### Tutorials https://www.udacity.com/course/responsive-web-design-fundamentals--ud893 ### Exercises : Be Responsive diff --git a/study_group/2017/css_box_model_and_display_property/README.md b/study_group/2017/css_box_model_and_display_property/README.md index 2382310..09717f9 100644 --- a/study_group/2017/css_box_model_and_display_property/README.md +++ b/study_group/2017/css_box_model_and_display_property/README.md @@ -1,11 +1,9 @@ -### Study Group 4: CSS Box Model and Display Property -____ +## CSS Box Model and Display Property -### Resources -#### CSS Box Model +### CSS Box Model https://www.w3schools.com/css/css_boxmodel.asp -#### CSS Layout Properties : Display & Box Model +### CSS Layout Properties : Display & Box Model http://learnlayout.com/no-layout.html http://learnlayout.com/box-model.html https://www.w3schools.com/css/css_display_visibility.asp diff --git a/study_group/2017/css_frameworks/README.md b/study_group/2017/css_frameworks/README.md index 1fb2af9..ca236ef 100644 --- a/study_group/2017/css_frameworks/README.md +++ b/study_group/2017/css_frameworks/README.md @@ -1,11 +1,9 @@ -### Study Group 9 : CSS Frameworks -_____ +## CSS Frameworks > A CSS framework is a pre-prepared software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. -- Wikipedia -### Resources: -#### Why use CSS Frameworks? +### Why use CSS Frameworks? 1. Saves you time in styling. You don't have to do all the styling anymore. Just add the available classes or styles in your markup and you're good to go. But it is always important to know CSS basics to have an idea of what is happening or if you need to customize. @@ -23,7 +21,7 @@ Some CSS frameworks also provide utilies such as helper classes ex. text-capital > Note: It is also important to consider when choosing a framework to use if the project is `active` and `stable`. -#### List of CSS Frameworks +### List of CSS Frameworks as of Sept. 1, 2017 Framework | URL | Stable Version | Release Date | Last Update @@ -40,7 +38,7 @@ SemanticUI | https://semantic-ui.com/ | 2.2.13 | Aug 07, 2017 | Aug. 8, 2017 | -#### Exercises : +### Exercises : 1. Explore from the list of CSS Frameworks 2. Choose which you like most diff --git a/study_group/2017/css_preprocessor/README.md b/study_group/2017/css_preprocessor/README.md index 0b46ad0..6d3ba9d 100644 --- a/study_group/2017/css_preprocessor/README.md +++ b/study_group/2017/css_preprocessor/README.md @@ -1,5 +1,4 @@ -### Study Group 10 : CSS Preprocessor -_____ +## CSS Preprocessor > A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as variable, mixin, nesting selector, and so on. These features make the CSS structure more readable and easier to maintain. To use a CSS preprocessor, you must install a CSS compiler on your web server. -- Mozilla @@ -7,8 +6,7 @@ _____ Why do we need preprocessors? -### Resources: -#### List of CSS Preprocessors +### List of CSS Preprocessors Preprocessor | URL ------------| ----------- SASS : Syntactically Awesome Stylesheets | http://sass-lang.com/ @@ -16,4 +14,4 @@ Less CSS | http://lesscss.org/ Stylus | http://stylus-lang.com/ -### Exercises : +## Exercises : diff --git a/study_group/2017/html_form_and_css_position_property/README.md b/study_group/2017/html_form_and_css_position_property/README.md index 19224eb..3986d8f 100644 --- a/study_group/2017/html_form_and_css_position_property/README.md +++ b/study_group/2017/html_form_and_css_position_property/README.md @@ -1,17 +1,14 @@ +## HTML Form and CSS Position Property -### Study Group 5 : HTML Form and CSS Position Property -_____ -### Resources: +### Presentation +https://docs.google.com/presentation/d/1n2DKw9EuS-fAGPke_jF4LgkjEcoWdy2E23alkgWuLJM/edit?usp=sharing -#### Presentation -https://docs.google.com/presentation/d/1fYJ9X4BpsuRrJKXyYx_9iGAN7xtDTNmx2HlRSkk-1eQ/edit?usp=sharing - -#### HTML Form +### HTML Form https://www.w3schools.com/html/html_forms.asp https://www.w3schools.com/html/html_form_elements.asp https://codepen.io/switmac/pen/OgLmzZ -#### CSS Position Property +### CSS Position Property http://learnlayout.com/position-example.html diff --git a/study_group/2017/html_table_and_css_typography_colors_and_float/README.md b/study_group/2017/html_table_and_css_typography_colors_and_float/README.md index e873034..c72aae8 100644 --- a/study_group/2017/html_table_and_css_typography_colors_and_float/README.md +++ b/study_group/2017/html_table_and_css_typography_colors_and_float/README.md @@ -1,19 +1,17 @@ -### Study Group 6 : HTML Table and CSS Typography, Colors and Float -_____ -### Resources: +## HTML Table and CSS Typography, Colors and Float -#### Presentation -https://docs.google.com/presentation/d/1fYJ9X4BpsuRrJKXyYx_9iGAN7xtDTNmx2HlRSkk-1eQ/edit?usp=sharing +### Presentation +https://docs.google.com/presentation/d/1n2DKw9EuS-fAGPke_jF4LgkjEcoWdy2E23alkgWuLJM/edit?usp=sharing -#### Table +### Table https://www.w3schools.com/tags/tag_thead.asp https://www.w3schools.com/html/html_tables.asp https://codepen.io/switmac/pen/bRbqde?editors=1000 -#### Float +### Float http://learnlayout.com/float.html -#### Colors +### Colors https://www.w3schools.com/html/html_colors.asp https://www.w3schools.com/colors/colors_palettes.asp http://htmlcolorcodes.com/resources/best-color-palette-generators/ @@ -21,7 +19,7 @@ http://htmlcolorcodes.com/color-names/ http://www.colors.commutercreative.com/grid/ https://codepen.io/switmac/pen/dRdaLz?editors=1100 -#### Typography +### Typography https://www.w3schools.com/css/css_font.asp http://cssreference.io/typography/ diff --git a/study_group/2017/multi_page_website_css_typography_float_and_best_practices/README.md b/study_group/2017/multi_page_website_css_typography_float_and_best_practices/README.md index e96c15a..f9c0ec6 100644 --- a/study_group/2017/multi_page_website_css_typography_float_and_best_practices/README.md +++ b/study_group/2017/multi_page_website_css_typography_float_and_best_practices/README.md @@ -1,19 +1,15 @@ -# Study Group 7 : Multi Page Website, CSS Typography, Float and Best Practices +## Multi Page Website, CSS Typography, Float and Best Practices --------------------------------------------------------------------------------- - -# Resources: - -## Float +### Float http://learnlayout.com/float.html -## Typography +### Typography https://www.w3schools.com/css/css_font.asp http://cssreference.io/typography/ -## Best Practices and Guidelines +### Best Practices and Guidelines https://github.com/bendc/frontend-guidelines https://validator.w3.org/nu/#textarea @@ -21,7 +17,7 @@ https://www.webpagefx.com/blog/web-design/20-html-best-practices-you-should-foll https://www.w3schools.com/html/html5_syntax.asp http://csslint.net/ -# Exercises : Practicing order and cleanliness +### Exercises : Practicing order and cleanliness 1. Add a sidebar in the layout, it may float left or right and add a login form inside the sidebar.